/*
Theme Name:   HogMatch
Theme URI:    https://hogmatch.com
Description:  Child theme of Kadence for the HogMatch marketplace. Site-specific CSS belongs here. Business logic belongs in the hogmatch-core plugin, never in this theme.
Author:       Shaun Wilson Designs
Author URI:   https://shaunwilsondesigns.com
Template:     kadence
Version:      2.90.2
Text Domain:  hogmatch
*/

/* Self-hosted so no public page calls Google on every visit. */
@font-face {
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/Orbitron-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/Orbitron-800.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Orbitron';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('fonts/Orbitron-900.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/SpaceGrotesk-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/SpaceGrotesk-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/SpaceGrotesk-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   HogMatch design system
   Loud, high contrast, industrial. Not a design agency site.
   Magenta is an accent and never a flood: #FF0082 on white is
   3.77:1 and fails AA for body text, so it only ever appears on
   dark grounds or at display sizes.
   ============================================================ */

:root {
	--hog-ink:        #08080A;
	--hog-ink-2:      #121215;
	--hog-ink-3:      #1C1C21;
	--hog-line:       #2A2A31;
	--hog-paper:      #FFFFFF;
	--hog-mute:       #9A9AA5;
	--hog-pink:       #FF0082;
	--hog-pink-dim:   #C7006A;
	--hog-pink-solid: #B8005F;   /* white on this is 6.3:1, passes AA for body text */
	--hog-pink-glow:  rgba(255, 0, 130, .35);
	--hog-display:    'Orbitron', 'Space Grotesk', system-ui, sans-serif;
	--hog-body:       'Space Grotesk', system-ui, -apple-system, sans-serif;
	--hog-edge:       0px;           /* hard corners everywhere */
}

body {
	background: var(--hog-ink);
	color: #E8E8ED;
	font-family: var(--hog-body);
	font-size: 17px;
	line-height: 1.55;
	text-wrap: pretty;
}

/* Kadence styles headings explicitly, so every level must be overridden
   or they keep the parent theme's colour on our dark grounds. */
h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title {
	color: #FFFFFF;
	font-family: var(--hog-display);
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
	line-height: 1.02;
}

a { color: var(--hog-pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #FF4DA6; }

::selection { background: var(--hog-pink); color: #fff; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--hog-pink);
	outline-offset: 2px;
}

/* ---------- shared shells ---------- */
.hog-wrap { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.hog-section { padding-block: clamp(56px, 8vw, 104px); }

.hog-eyebrow {
	font-family: var(--hog-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hog-pink);
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 18px;
}
.hog-eyebrow::after {
	content: ""; flex: 1; height: 2px;
	background: linear-gradient(90deg, var(--hog-pink), transparent);
}

.hog-h1 { font-size: clamp(2.6rem, 7.5vw, 5.6rem); }
.hog-h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: .35em; }
.hog-lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: #C9C9D3; max-width: 62ch; }

/* ---------- buttons ---------- */
.hog-btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--hog-body);
	font-weight: 700; font-size: .95rem;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 17px 30px;
	border: 2px solid var(--hog-pink);
	border-radius: var(--hog-edge);
	background: var(--hog-pink);
	color: #FFFFFF !important;
	text-decoration: none;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.hog-btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--hog-pink-dim); background: #FF1F92; }
.hog-btn--ghost { background: transparent; color: #FFFFFF !important; border-color: #FFFFFF; }
.hog-btn--ghost:hover { background: #FFFFFF; color: var(--hog-ink) !important; box-shadow: 6px 6px 0 var(--hog-pink); border-color: #FFFFFF; }

/* ---------- hero ---------- */
.hog-hero { position: relative; overflow: hidden; background: var(--hog-ink); border-bottom: 3px solid var(--hog-pink); }
.hog-hero__media { position: absolute; inset: 0; }
.hog-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hog-hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.9) 72%, var(--hog-ink) 100%),
		radial-gradient(70% 90% at 12% 40%, var(--hog-pink-glow) 0%, transparent 60%);
}
.hog-hero__inner { position: relative; padding-block: clamp(80px, 13vw, 168px); }
.hog-hero__title { max-width: 17ch; }
.hog-hero__title em { font-style: normal; color: var(--hog-pink); display: block; }
.hog-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- ticker ---------- */
.hog-ticker {
	background: var(--hog-pink); color: #fff;
	border-block: 3px solid var(--hog-ink);
	overflow: hidden; white-space: nowrap;
}
.hog-ticker__track {
	display: inline-flex; gap: 52px; padding: 13px 0;
	font-family: var(--hog-display); font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase; font-size: .85rem;
	animation: hog-scroll 34s linear infinite;
}
.hog-ticker__track span::before { content: "▸ "; opacity: .65; }
@keyframes hog-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.hog-ticker__track { animation: none; }
}

/* ---------- stat band ---------- */
.hog-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--hog-line); }
.hog-stats > div { padding: 26px 22px; border-right: 2px solid var(--hog-line); }
.hog-stats > div:last-child { border-right: 0; }
.hog-stats b { display: block; font-family: var(--hog-display); font-size: clamp(1.8rem, 3.4vw, 2.9rem); color: #fff; line-height: 1; }
.hog-stats small { display: block; margin-top: 8px; color: var(--hog-mute); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; }
@media (max-width: 780px) {
	.hog-stats { grid-template-columns: repeat(2, 1fr); }
	.hog-stats > div:nth-child(2n) { border-right: 0; }
	.hog-stats > div:nth-child(-n+2) { border-bottom: 2px solid var(--hog-line); }
}

/* ---------- steps ---------- */
.hog-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--hog-line); border: 2px solid var(--hog-line); }
.hog-steps article { background: var(--hog-ink-2); padding: 34px 28px 38px; }
.hog-steps .n {
	font-family: var(--hog-display); font-size: 3rem; line-height: 1;
	color: transparent; -webkit-text-stroke: 2px var(--hog-pink); display: block; margin-bottom: 16px;
}
.hog-steps h3 { font-size: 1.22rem; margin-bottom: 10px; }
.hog-steps p { color: #B7B7C2; margin: 0; font-size: .98rem; }
@media (max-width: 860px) { .hog-steps { grid-template-columns: 1fr; } }

/* ---------- breed tiles ---------- */
.hog-breeds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--hog-line); border: 2px solid var(--hog-line); }
.hog-breeds a {
	background: var(--hog-ink-2); padding: 22px 20px; text-decoration: none;
	font-family: var(--hog-display); font-weight: 800; text-transform: uppercase;
	color: #fff; font-size: .95rem; display: flex; justify-content: space-between; align-items: center;
	transition: background .12s ease, color .12s ease;
}
.hog-breeds a::after { content: "→"; color: var(--hog-pink); transition: transform .12s ease; }
.hog-breeds a:hover { background: var(--hog-pink); color: #fff; }
.hog-breeds a:hover::after { color: #fff; transform: translateX(5px); }
@media (max-width: 900px) { .hog-breeds { grid-template-columns: repeat(2, 1fr); } }

/* ---------- seller call to action ---------- */
.hog-cta { background: var(--hog-pink); color: #fff; border-block: 3px solid var(--hog-ink); }
.hog-cta h2, .hog-cta h3 { color: #fff; }
.hog-cta p { color: rgba(255,255,255,.92); }
.hog-cta .hog-btn { background: var(--hog-ink); border-color: var(--hog-ink); }
.hog-cta .hog-btn:hover { box-shadow: 6px 6px 0 rgba(0,0,0,.45); background: #000; }

/* ============================================================
   WooCommerce: the listing catalog
   ============================================================ */
.woocommerce ul.products { display: grid !important; gap: 22px; margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }

@media (min-width: 700px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }

.woocommerce ul.products li.product {
	background: var(--hog-ink-2);
	border: 2px solid var(--hog-line);
	border-radius: var(--hog-edge);
	position: relative;
	transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: var(--hog-pink);
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 var(--hog-pink-dim);
}
.woocommerce ul.products li.product a img {
	aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
	margin: 0 0 14px; border-radius: 0; display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.06rem !important;
	padding: 0 18px; margin: 0 0 10px;
	color: #fff;
}
.woocommerce ul.products li.product .price {
	display: block; padding: 0 18px 18px;
	font-family: var(--hog-display); font-weight: 800;
	color: var(--hog-pink) !important; font-size: 1.35rem;
}
.woocommerce ul.products li.product .price del { color: var(--hog-mute) !important; font-size: .8em; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart { display: none !important; }

/* spec chips written by hogmatch-core */
.hog-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; padding: 0 18px; }
.hog-chips li {
	font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	padding: 5px 9px; border: 1px solid var(--hog-line); color: #CFCFD9; background: var(--hog-ink-3);
}
.hog-chips li.hog-chip-loc { border-color: var(--hog-pink-dim); color: #FF7BBE; }

/* pig detail specs */
.hog-specs { width: 100%; border-collapse: collapse; margin: 26px 0; border: 2px solid var(--hog-line); }
.hog-specs th, .hog-specs td { padding: 11px 15px; border-bottom: 1px solid var(--hog-line); text-align: left; font-size: .93rem; }
.hog-specs th {
	width: 38%; color: var(--hog-mute); font-weight: 700;
	text-transform: uppercase; letter-spacing: .11em; font-size: .74rem;
	background: var(--hog-ink-2);
}
.hog-specs td { color: #fff; font-weight: 600; }
.hog-specs tr:last-child th, .hog-specs tr:last-child td { border-bottom: 0; }

.woocommerce div.product .product_title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.woocommerce div.product p.price { color: var(--hog-pink) !important; font-family: var(--hog-display); font-weight: 800; font-size: 2rem; }
.woocommerce .quantity { display: none !important; }

/* ---------- navigation ---------- */
.site-header-wrap, .site-header-inner-wrap { background: var(--hog-ink) !important; }
.site-header { border-bottom: 2px solid var(--hog-line); }
.main-navigation .primary-menu-container > ul > li > a {
	font-family: var(--hog-body); font-weight: 700;
	text-transform: uppercase; letter-spacing: .1em; font-size: .82rem;
	color: #fff !important;
}
.main-navigation .primary-menu-container > ul > li > a:hover { color: var(--hog-pink) !important; }
.main-navigation ul ul { background: var(--hog-ink-2) !important; border: 2px solid var(--hog-line); }
.main-navigation ul ul li a { color: #DEDEE6 !important; font-size: .84rem; }
.main-navigation ul ul li a:hover { color: #fff !important; background: var(--hog-pink) !important; }

/* ---------- footer ---------- */
.hog-footer { background: var(--hog-ink-2); border-top: 3px solid var(--hog-pink); }
/* Asymmetric on purpose: the space above the columns is breathing room, the
   space below was just black. */
.hog-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 34px; padding-block: 60px 30px; }
.hog-footer h3 {
	font-family: var(--hog-body); font-size: .74rem; letter-spacing: .18em;
	color: var(--hog-pink); margin: 0 0 16px;
}
.hog-footer h3 a { color: inherit; text-decoration: none; }
.hog-footer h3 a:hover, .hog-footer h3 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.hog-footer ul { list-style: none; margin: 0; padding: 0; }
.hog-footer li { margin-bottom: 9px; }
.hog-footer li a { color: #C4C4CE; text-decoration: none; font-size: .92rem; }
/* 2.88.0 (Shaun 2026-09-11): footer links step to the right on hover and a
   pink dash slides in from the left to meet them. */
.hog-footer li a {
	position: relative; display: inline-block; padding-left: 0;
	transition: padding-left .22s ease, color .22s ease;
}
.hog-footer li a::before {
	content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: 0;
	background: var(--hog-pink); transform: translateY(-50%);
	transition: width .22s ease;
}
.hog-footer li a:hover, .hog-footer li a:focus-visible { color: #fff; padding-left: 18px; outline: none; text-decoration: none; }
.hog-footer li a:hover::before, .hog-footer li a:focus-visible::before { width: 12px; }
@media (prefers-reduced-motion: reduce) {
	.hog-footer li a, .hog-footer li a::before { transition: none; }
}
.hog-footer__bar {
	border-top: 2px solid var(--hog-line); padding-block: 22px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	color: var(--hog-mute); font-size: .82rem;
}
@media (max-width: 1000px) { .hog-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hog-footer__grid { grid-template-columns: 1fr; } }

/* A newline between inline grid children becomes <br> under wpautop and each
   one steals a grid cell. Belt and braces. */
.hog-stats > br, .hog-steps > br, .hog-breeds > br, .hog-footer__grid > br { display: none; }

/* ---------- core-block variants so editable blocks pick up the system ---------- */
.hog-steps.wp-block-columns { gap: 2px !important; margin: 0; }
.hog-steps.wp-block-columns .wp-block-column {
	background: var(--hog-ink-2); padding: 34px 28px 38px; border: 0;
}
.hog-steps.wp-block-columns .wp-block-column h3 { font-size: 1.22rem; margin: 0 0 10px; }
.hog-steps.wp-block-columns .wp-block-column p { color: #B7B7C2; margin: 0; font-size: .98rem; }
.hog-steps.wp-block-columns .wp-block-column p.n {
	font-family: var(--hog-display); font-size: 3rem; line-height: 1;
	color: transparent; -webkit-text-stroke: 2px var(--hog-pink); margin: 0 0 16px;
}
.hog-hero-cover { min-height: clamp(460px, 62vh, 660px) !important; border-bottom: 3px solid var(--hog-pink); }
.hog-hero-cover .wp-block-cover__inner-container { max-width: 1280px; margin-inline: auto; padding-inline: 24px; width: 100%; }
.hog-hero-cover h1 { max-width: 17ch; font-size: clamp(2.6rem, 7vw, 5.2rem); }
.hog-hero-cover h1 mark { background: none; color: var(--hog-pink); }
.hog-hero-cover .wp-block-buttons { margin-top: 30px; gap: 14px; }
.hog-hero-cover .wp-block-button__link { border-radius: 0; }
.hog-band { padding-block: clamp(56px, 8vw, 104px); }
.hog-band--dark { background: var(--hog-ink); }
.hog-band--panel { background: var(--hog-ink-2); }
.hog-band > .wp-block-group__inner-container,
.hog-band.wp-block-group > * { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.woocommerce .hog-band ul.products { margin-top: 26px; }

/* ---------- kill the white shells Kadence/WP wrap the page in ---------- */
.site, .wp-site-blocks, #wrapper, #inner-wrap,
.content-area, .content-container, .site-container,
.entry-content, .entry-content-wrap, article.entry {
	background: var(--hog-ink) !important;
}
.content-area, .site-main { padding: 0 !important; margin: 0 !important; }
.entry-content > * { margin-block: 0; }
.content-width-fullwidth .content-container { max-width: none !important; padding-inline: 0 !important; }

/* header */
.site-header-row, .site-header-wrap, .site-header-inner-wrap,
.site-header-main-section-left, .site-header-main-section-right { background: transparent; }
.site-branding img, .site-branding .site-title { color: #fff; }
.site-title { font-family: var(--hog-display); text-transform: uppercase; letter-spacing: -.02em; }
.header-navigation .menu > li > a { color: #fff !important; }
.header-navigation .menu > li > a:hover { color: var(--hog-pink) !important; }
.header-navigation ul ul { background: var(--hog-ink-2) !important; border: 2px solid var(--hog-line) !important; }
.header-navigation ul ul a { color: #DEDEE6 !important; }
.header-navigation ul ul a:hover { background: var(--hog-pink) !important; color: #fff !important; }
.header-navigation .menu > li.menu-item-has-children > a::after { color: var(--hog-pink); }

/* Kadence mega menu panels */
.header-navigation .menu .kadence-menu-mega-enabled > ul.sub-menu {
	background: var(--hog-ink-2) !important;
	border: 2px solid var(--hog-pink) !important;
	padding: 26px !important;
}
.header-navigation .menu .kadence-menu-mega-enabled > ul.sub-menu > li > a {
	color: var(--hog-pink) !important; font-weight: 800;
	text-transform: uppercase; letter-spacing: .12em; font-size: .74rem;
}

/* The sticky header wrapper keeps Kadence's light background outside the
   centred row, which shows as white bands either side once it detaches. */
#masthead, #main-header, #mobile-header,
.site-header-wrap, .site-header-inner-wrap,
.site-header-upper-wrap, .site-header-upper-inner-wrap,
.site-header-lower-wrap, .site-header-lower-inner-wrap,
.site-mobile-header-wrap,
.item-is-fixed, .item-is-stuck,
#main-header.item-is-fixed, .site-header-wrap.item-is-fixed,
.kadence-sticky-header, .kadence-sticky-header.item-is-fixed {
	background-color: var(--hog-ink) !important;
	border-bottom-color: var(--hog-line) !important;
}
#masthead { border-bottom: 2px solid var(--hog-line); }
.header-navigation .header-button { border-radius: 0 !important; }
.site-header-row-container-inner,
.site-header-row-container,
.site-main-header-wrap,
.site-top-header-wrap,
.site-bottom-header-wrap { background-color: var(--hog-ink) !important; }

/* ============================================================
   Pig detail page
   ============================================================ */
.single-product div.product { padding-block: clamp(36px, 5vw, 64px); }
.single-product .woocommerce-product-gallery img { border: 2px solid var(--hog-line); }
.single-product .flex-control-thumbs { display: flex; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.single-product .flex-control-thumbs li { width: auto !important; margin: 0 !important; }
.single-product .flex-control-thumbs img { width: 84px; border: 2px solid var(--hog-line); opacity: .6; }
.single-product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--hog-pink); }

.hog-breederline {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin: 0 0 14px; font-size: .78rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase;
}
.hog-breederline__farm { color: #fff; }
.hog-breederline__loc { color: var(--hog-pink); }
.hog-breederline__loc::before { content: "◆ "; opacity: .7; }

.hog-ask { margin: 22px 0 6px; }
.hog-ask__note { margin: 10px 0 0; font-size: .84rem; color: var(--hog-mute); max-width: 46ch; }

.hog-notice {
	margin: 24px 0 0; padding: 18px 20px;
	border: 2px solid var(--hog-line); border-left: 4px solid var(--hog-pink);
	background: var(--hog-ink-2);
}
.hog-notice strong {
	display: block; color: var(--hog-pink); font-size: .74rem;
	letter-spacing: .16em; text-transform: uppercase; margin-bottom: 7px;
}
.hog-notice p { margin: 0; color: #B7B7C2; font-size: .92rem; }

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	background: var(--hog-pink) !important; color: #fff !important;
	border: 2px solid var(--hog-pink) !important; border-radius: 0 !important;
	font-family: var(--hog-body); font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 17px 30px !important;
	transition: transform .12s ease, box-shadow .12s ease;
}
.woocommerce div.product form.cart .button:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--hog-pink-dim); }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--hog-line); padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--hog-mute) !important; text-transform: uppercase;
	letter-spacing: .12em; font-size: .78rem; font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hog-pink) !important; }
.woocommerce div.product .woocommerce-tabs .panel { background: transparent; border: 0; }
.related.products > h2, .up-sells > h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 20px; }
.woocommerce .product_meta { color: var(--hog-mute); font-size: .82rem; border-top: 2px solid var(--hog-line); padding-top: 14px; margin-top: 20px; }

/* ============================================================
   Catalog header and empty states
   ============================================================ */
.hog-shophead { max-width: 1280px; margin: 0 auto clamp(24px, 3vw, 40px); padding: clamp(40px,6vw,72px) 24px 0; }
.hog-shophead h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0 0 .4em; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: var(--hog-mute); }
.woocommerce .woocommerce-ordering select {
	background: var(--hog-ink-2); color: #fff;
	border: 2px solid var(--hog-line); border-radius: 0; padding: 10px 14px;
}

.hog-empty {
	max-width: 760px; margin: clamp(30px,5vw,60px) auto clamp(60px,9vw,110px);
	padding: clamp(34px,5vw,56px);
	border: 2px solid var(--hog-line); background: var(--hog-ink-2);
	border-top: 4px solid var(--hog-pink);
}
.hog-empty h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin: 0 0 .5em; }
.hog-empty p { color: #B7B7C2; }
.hog-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Woo's own empty-cart and account states, kept in the same language. */
.woocommerce .cart-empty, .woocommerce-info, .woocommerce-message, .woocommerce-error {
	background: var(--hog-ink-2) !important; color: #DEDEE6 !important;
	border-top: 3px solid var(--hog-pink) !important; border-radius: 0 !important;
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--hog-pink) !important; }

/* archive hero: Kadence's page title band leaves light gutters */
.entry-hero, .entry-hero-container-inner, .hero-section-overlay,
.page-hero-section, .entry-hero .entry-header,
.woocommerce-products-header { background: var(--hog-ink) !important; }
.post-archive-hero-section, .product-archive-hero-section { display: none !important; }

/* active filter chips */
.hog-filters {
	max-width: 1280px; margin: 0 auto 22px; padding: 0 24px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.hog-filters__label {
	font-size: .7rem; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--hog-mute);
}
.hog-filters ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hog-filters li {
	display: inline-flex; align-items: center; gap: 9px;
	border: 2px solid var(--hog-pink); background: var(--hog-ink-2);
	color: #fff; padding: 6px 11px;
	font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hog-filters li a { color: var(--hog-pink); text-decoration: none; font-size: 1rem; line-height: 1; }
.hog-filters li a:hover { color: #fff; }
.hog-filters__clear {
	font-size: .72rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--hog-mute); text-decoration: underline;
}
.hog-filters__clear:hover { color: var(--hog-pink); }

/* the add-to-cart label was sitting low in its box */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button { line-height: 1.1 !important; height: auto !important; }

/* mega menu panel links */
.header-navigation .menu .kadence-menu-mega-enabled > ul.sub-menu ul li a {
	color: #DEDEE6 !important; font-size: .9rem; padding: 9px 12px !important;
	border-bottom: 1px solid var(--hog-line);
}
.header-navigation .menu .kadence-menu-mega-enabled > ul.sub-menu ul li a:hover {
	background: var(--hog-pink) !important; color: #fff !important;
}
body.post-type-archive-product .entry-hero,
body.tax-product_cat .entry-hero,
body.woocommerce-shop .entry-hero,
body.post-type-archive-product .entry-hero-container,
body.woocommerce-shop .entry-hero-container { display: none !important; }

/* ============================================================
   Gravity Forms — seller application
   ============================================================ */
.gform_wrapper { --gf-color-primary: var(--hog-pink); margin-block: 0 !important; }
.gform_wrapper form { max-width: 780px; }
.gform_wrapper .gform_title { display: none; }
.gform_wrapper .gsection {
	border: 0 !important; border-top: 2px solid var(--hog-line) !important;
	margin: 44px 0 22px !important; padding-top: 26px !important;
}
.gform_wrapper .gsection_title {
	font-family: var(--hog-display); text-transform: uppercase;
	color: #fff !important; font-size: 1.35rem !important; letter-spacing: -.01em;
}
.gform_wrapper .gsection_description { color: var(--hog-mute) !important; font-size: .95rem; margin-top: 6px; }
.gform_wrapper .gfield_label {
	color: #fff !important; font-family: var(--hog-body); font-weight: 700 !important;
	font-size: .82rem !important; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px !important;
}
.gform_wrapper .gfield_required { color: var(--hog-pink) !important; }
.gform_wrapper .gfield_description, .gform_wrapper .ginput_complex label {
	color: var(--hog-mute) !important; font-size: .84rem !important;
}
.gform_wrapper input[type=text], .gform_wrapper input[type=email],
.gform_wrapper input[type=tel], .gform_wrapper input[type=url],
.gform_wrapper input[type=number], .gform_wrapper textarea, .gform_wrapper select {
	background: var(--hog-ink-2) !important; color: #fff !important;
	border: 2px solid var(--hog-line) !important; border-radius: 0 !important;
	padding: 13px 15px !important; font-family: var(--hog-body) !important; font-size: 1rem !important;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus {
	border-color: var(--hog-pink) !important; outline: 3px solid var(--hog-pink-glow); outline-offset: 0;
}
.gform_wrapper input::placeholder, .gform_wrapper textarea::placeholder { color: #6C6C78 !important; }
.gform_wrapper .gfield_radio label, .gform_wrapper .gfield_checkbox label { color: #DEDEE6 !important; font-size: .96rem; }
.gform_wrapper .gfield_radio .gchoice, .gform_wrapper .gfield_checkbox .gchoice {
	border: 2px solid var(--hog-line); background: var(--hog-ink-2);
	padding: 11px 14px; margin-bottom: 8px;
	display: flex; align-items: flex-start; gap: 11px;
}
.gform_wrapper .gfield_radio .gchoice:hover, .gform_wrapper .gfield_checkbox .gchoice:hover { border-color: var(--hog-pink); }
.gform_wrapper input[type=radio], .gform_wrapper input[type=checkbox] { accent-color: var(--hog-pink); margin-top: 3px; }
.gform_wrapper .gform_footer { border-top: 2px solid var(--hog-line); padding-top: 26px !important; margin-top: 34px !important; }
.gform_wrapper .gform_button, .gform_wrapper input[type=submit] {
	background: var(--hog-pink) !important; color: #fff !important;
	border: 2px solid var(--hog-pink) !important; border-radius: 0 !important;
	font-family: var(--hog-body) !important; font-weight: 700 !important;
	letter-spacing: .1em; text-transform: uppercase; padding: 17px 32px !important;
	transition: transform .12s ease, box-shadow .12s ease;
}
.gform_wrapper .gform_button:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--hog-pink-dim); }
.gform_wrapper .gfield_error, .gform_wrapper .gform_validation_errors {
	background: var(--hog-ink-2) !important; border: 2px solid var(--hog-pink) !important; border-radius: 0 !important;
}
.gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message {
	background: transparent !important; border: 0 !important;
	color: #FF7BBE !important; padding-left: 0 !important; font-size: .86rem;
}
.gform_wrapper .gform_drop_area, .gform_wrapper .gform_fileupload_rules {
	background: var(--hog-ink-2) !important; border: 2px dashed var(--hog-line) !important;
	border-radius: 0 !important; color: var(--hog-mute) !important;
}
.gform_wrapper .gform_confirmation_message {
	border: 2px solid var(--hog-line); border-top: 4px solid var(--hog-pink);
	background: var(--hog-ink-2); padding: clamp(28px,4vw,44px);
}
.hog-forminfo {
	border: 2px solid var(--hog-line); border-left: 4px solid var(--hog-pink);
	background: var(--hog-ink-2); padding: 15px 18px; color: #B7B7C2; font-size: .92rem;
}
.hog-forminfo strong { color: var(--hog-pink); }

/* seller journey steps on the apply page */
.hog-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--hog-line); border: 2px solid var(--hog-line); margin: 0 0 clamp(30px,5vw,54px); }
.hog-journey div { background: var(--hog-ink-2); padding: 22px 20px; }
.hog-journey b { display: block; font-family: var(--hog-display); color: var(--hog-pink); font-size: .78rem; letter-spacing: .16em; margin-bottom: 8px; }
.hog-journey span { color: #DEDEE6; font-size: .95rem; }
@media (max-width: 900px) { .hog-journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hog-journey { grid-template-columns: 1fr; } }

/* ============================================================
   Seller gate, my listings
   ============================================================ */
.hog-gate {
	max-width: 720px; margin: clamp(30px,5vw,60px) auto;
	padding: clamp(32px,5vw,52px);
	border: 2px solid var(--hog-line); border-top: 4px solid var(--hog-pink);
	background: var(--hog-ink-2);
}
.hog-gate h2 { font-size: clamp(1.6rem,3.2vw,2.4rem); margin: 0 0 .5em; }
.hog-gate p { color: #B7B7C2; }

.hog-mylistings { width: 100%; border-collapse: collapse; border: 2px solid var(--hog-line); margin: 24px 0; }
.hog-mylistings th {
	text-align: left; padding: 13px 16px; background: var(--hog-ink-2);
	color: var(--hog-mute); font-size: .72rem; letter-spacing: .14em;
	text-transform: uppercase; border-bottom: 2px solid var(--hog-line);
}
.hog-mylistings td { padding: 15px 16px; border-bottom: 1px solid var(--hog-line); color: #DEDEE6; vertical-align: top; }
.hog-mylistings tr:last-child td { border-bottom: 0; }
.hog-mylistings .price, .hog-mylistings ins { color: var(--hog-pink) !important; text-decoration: none; font-weight: 700; }
.hog-status {
	display: inline-block; padding: 4px 9px; font-size: .68rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--hog-line);
}
.hog-status--publish { border-color: #0a7d28; color: #55D983; }
.hog-status--pending { border-color: var(--hog-pink); color: var(--hog-pink); }
.hog-status--draft   { border-color: var(--hog-line); color: var(--hog-mute); }
.hog-mylistings small { display: block; margin-top: 6px; color: var(--hog-mute); font-size: .8rem; }

/* Seven columns did not fit the 825px account column, so the table painted
   under the account nav and hid the Manage links. Scroll in its own box, and
   tighten the dense columns so it normally does not need to. */
.hog-tscroll { max-width: 100%; overflow-x: auto; }
.hog-mylistings th, .hog-mylistings td { padding-left: 12px; padding-right: 12px; }
.hog-mylistings th:nth-child(5), .hog-mylistings th:nth-child(6),
.hog-mylistings td[data-l="Views"], .hog-mylistings td[data-l="Inquiries"] { text-align: center; }
.hog-mylistings td[data-l="Status"] small { max-width: 16ch; font-size: .74rem; }
.hog-mylistings td[data-l="Expires"] { white-space: nowrap; }

/* badges, enquiry context */
.hog-badge {
	position: absolute; top: 0; left: 0; z-index: 3;
	font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	padding: 7px 11px; color: #fff;
}
.hog-badge--sold { background: var(--hog-ink); border-right: 2px solid var(--hog-pink); border-bottom: 2px solid var(--hog-pink); }
.hog-badge--ending { background: var(--hog-pink); }
.woocommerce ul.products li.product:has(.hog-badge--sold) a img { opacity: .45; }
.hog-notice--sold { border-left-color: #fff; }
.hog-notice--sold strong { color: #fff; }

.hog-askabout {
	display: flex; gap: 18px; align-items: center;
	border: 2px solid var(--hog-line); border-left: 4px solid var(--hog-pink);
	background: var(--hog-ink-2); padding: 16px 18px; margin-bottom: 30px;
}
.hog-askabout img { width: 90px; height: 60px; object-fit: cover; flex: none; }
.hog-askabout h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.hog-askabout h3 a { color: #fff; text-decoration: none; }
.hog-askabout h3 a:hover { color: var(--hog-pink); }
.hog-askabout p { margin: 0; color: var(--hog-mute); font-size: .86rem; }
.hog-askabout .hog-eyebrow { margin-bottom: 0; }

.wp-block-list { color: #C9C9D3; padding-left: 1.15em; }
.wp-block-list li { margin-bottom: .55em; }
.hog-band h3 { font-size: 1.15rem; margin: 28px 0 8px; }

/* ============================================================
   Catalog v2 — constrained two-column shell, filter rail, cards
   ============================================================ */
.hog-archive {
	display: grid; grid-template-columns: 264px minmax(0, 1fr);
	gap: 34px; align-items: start;
	padding-bottom: clamp(60px, 9vw, 110px);
}
@media (max-width: 1000px) { .hog-archive { grid-template-columns: 1fr; gap: 22px; } }

/* the rail */
.hog-rail__box { border: 2px solid var(--hog-line); background: var(--hog-ink-2); }
.hog-rail__box > summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center;
	padding: 16px 18px;
	font-family: var(--hog-body); font-weight: 700; font-size: .78rem;
	letter-spacing: .16em; text-transform: uppercase; color: #fff;
	border-bottom: 2px solid transparent;
}
.hog-rail__box > summary::-webkit-details-marker { display: none; }
.hog-rail__box[open] > summary { border-bottom-color: var(--hog-line); }
.hog-rail__box > summary i {
	width: 11px; height: 11px; border-right: 2px solid var(--hog-pink);
	border-bottom: 2px solid var(--hog-pink); transform: rotate(45deg);
	transition: transform .15s ease; margin-bottom: 4px;
}
.hog-rail__box[open] > summary i { transform: rotate(225deg); margin-bottom: -2px; }
.hog-rail__inner { padding: 4px 18px 18px; }

.hog-facet { padding-top: 18px; }
.hog-facet + .hog-facet { border-top: 1px solid var(--hog-line); }
.hog-facet h3 {
	font-family: var(--hog-body); font-size: .68rem; letter-spacing: .18em;
	text-transform: uppercase; color: var(--hog-pink); margin: 0 0 10px;
}
.hog-facet ul { list-style: none; margin: 0; padding: 0; }
.hog-facet li { margin: 0; }
.hog-facet a {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 8px 10px; margin: 0 -10px;
	color: #C9C9D3; text-decoration: none; font-size: .92rem;
	border: 1px solid transparent;
}
.hog-facet a:hover { background: var(--hog-ink-3); color: #fff; }
.hog-facet a b {
	font-weight: 700; font-size: .72rem; color: var(--hog-mute);
	background: var(--hog-ink-3); padding: 2px 7px; min-width: 24px; text-align: center;
}
.hog-facet a.is-on { border-color: var(--hog-pink); color: #fff; background: rgba(255,0,130,.09); }
.hog-facet a.is-on b { background: var(--hog-pink); color: #fff; }
.hog-rail__clear {
	display: inline-block; margin-top: 18px;
	font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--hog-mute); text-decoration: underline;
}
.hog-rail__clear:hover { color: var(--hog-pink); }

/* toolbar */
.hog-results .woocommerce-result-count,
.hog-results .woocommerce-ordering { margin: 0; }
.woocommerce .hog-results .woocommerce-result-count {
	float: none; color: var(--hog-mute); font-size: .8rem;
	letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.woocommerce .hog-results .woocommerce-ordering { float: none; }
.hog-results { display: flow-root; }
.woocommerce .hog-results::before {
	content: ""; display: block;
}
.hog-toolbar {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	flex-wrap: wrap; padding: 0 0 18px; margin-bottom: 22px;
	border-bottom: 2px solid var(--hog-line);
}

/* the grid, now inside a constrained column */
.woocommerce .hog-results ul.products { gap: 24px; }
@media (min-width: 700px)  { .woocommerce .hog-results ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .woocommerce .hog-results ul.products { grid-template-columns: repeat(3, 1fr); } }

.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.woocommerce ul.products li.product .price { margin-top: auto; padding-bottom: 0; }
.hog-card-farm {
	padding: 0 18px; margin: 0 0 12px;
	color: var(--hog-mute); font-size: .72rem;
	letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.hog-card-cta {
	display: block; margin: 16px 18px 18px; padding-top: 14px;
	border-top: 1px solid var(--hog-line);
	color: var(--hog-pink); font-size: .72rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
}
.hog-card-cta::after { content: " →"; }
.woocommerce ul.products li.product:hover .hog-card-cta { color: #fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding-top: 2px; }

/* badges sit on the image, not over the text */
.woocommerce ul.products li.product a:first-of-type { position: relative; display: block; }
.hog-badge { padding: 8px 13px; font-size: .64rem; }

/* pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 34px; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 8px; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 2px solid var(--hog-line); background: var(--hog-ink-2);
	color: #DEDEE6; padding: 11px 16px; font-weight: 700; font-size: .85rem;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--hog-pink); color: #fff; background: var(--hog-ink-3); }
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--hog-pink); border-color: var(--hog-pink); color: #fff;
}

/* the shop header should line up with the grid, not float wider */
.hog-shophead { padding-inline: 0; max-width: 1280px; }
.hog-filters { padding-inline: 0; }

/* the rail is a rail on desktop and a disclosure on mobile */
@media (min-width: 1001px) {
	.hog-rail { position: sticky; top: 96px; }
	.hog-rail__box > summary { display: none; }
	.hog-rail__inner { padding-top: 4px; }
}
@media (max-width: 1000px) {
	.hog-rail__box > summary { display: flex; }
}
/* even card heights: reserve two lines for the title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.4em; display: flex; align-items: flex-start;
}
.woocommerce ul.products li.product .product-action-wrap { margin-top: auto; }

/* the card CTA was clipping past the card edge */
.woocommerce ul.products li.product { overflow: visible; }
.woocommerce ul.products li.product a:first-of-type { overflow: hidden; }
.hog-card-cta { margin: 14px 18px 16px; }
.woocommerce ul.products li.product .price { padding-bottom: 4px; }

/* search + skip link */
.hog-search { display: flex; margin-bottom: 18px; }
.hog-search input[type=search] {
	flex: 1; min-width: 0;
	background: var(--hog-ink-2); color: #fff;
	border: 2px solid var(--hog-line); border-right: 0; border-radius: 0;
	padding: 12px 14px; font-family: var(--hog-body); font-size: .95rem;
}
.hog-search input[type=search]::placeholder { color: #6C6C78; }
.hog-search input[type=search]:focus { border-color: var(--hog-pink); outline: none; }
.hog-search button {
	background: var(--hog-pink); color: #fff; border: 2px solid var(--hog-pink);
	border-radius: 0; padding: 12px 18px; cursor: pointer;
	font-family: var(--hog-body); font-weight: 700; font-size: .74rem;
	letter-spacing: .12em; text-transform: uppercase;
}
.hog-search button:hover { background: #FF1F92; }
@media (min-width: 1001px) { .hog-search { grid-column: 1 / -1; max-width: 460px; } }

.hog-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--hog-pink); color: #fff; padding: 14px 22px;
	font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem;
}
.hog-skip:focus { left: 8px; top: 8px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ============================================================
   Video hero + brand logo + mega menu corrections
   ============================================================ */
.hog-hero-cover { isolation: isolate; }
.hog-hero-video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0; pointer-events: none;
}
.hog-hero-cover .wp-block-cover__image-background { z-index: 0; }
.hog-hero-cover .wp-block-cover__background { z-index: 1; }
.hog-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }
/* a second wash so headline contrast survives a moving background */
.hog-hero-cover::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	/* Lightened once the video was actually visible underneath: the old wash
	   plus the block's own 40% dim left the footage almost black. The left
	   third stays dark so the headline keeps its contrast. */
	background:
		linear-gradient(90deg, rgba(8,8,10,.88) 0%, rgba(8,8,10,.52) 46%, rgba(8,8,10,.10) 100%),
		linear-gradient(180deg, rgba(8,8,10,.42) 0%, transparent 42%, rgba(8,8,10,.72) 100%);
}
@media (prefers-reduced-motion: reduce) { .hog-hero-video { display: none; } }
@media (max-width: 700px) {
	.hog-hero-cover::after { background: linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.86) 100%); }
}

/* brand logo in the header */
.site-branding .custom-logo, .site-header-item .custom-logo { height: auto; }
.site-branding a.brand img { display: block; }

/* every button in the hero, whatever WP core decides its default is */
.hog-hero-cover .wp-block-button__link,
.wp-block-button__link.hog-btn,
.wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--hog-pink) !important;
	background-image: none !important;
	color: #fff !important;
	border: 2px solid var(--hog-pink) !important;
	border-radius: 0 !important;
}
.wp-block-button__link.hog-btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	border-color: #fff !important; color: #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #fff !important; color: var(--hog-ink) !important;
}

/* ---------- mega menu: the panel backgrounds were escaping the panel ----------
   Kadence gives every nested sub-menu the dropdown background, border and
   absolute positioning, so the column lists rendered as floating boxes that
   overran the panel. Inside a mega panel the nested lists must be plain. */
.header-navigation .kadence-menu-mega-enabled > ul.sub-menu {
	padding: 24px !important;
	box-shadow: 0 24px 60px rgba(0,0,0,.55) !important;
	overflow: hidden;
}
.header-navigation .kadence-menu-mega-enabled > ul.sub-menu > li { padding: 0 10px; }
.header-navigation .kadence-menu-mega-enabled ul.sub-menu ul.sub-menu,
.header-navigation .kadence-menu-mega-enabled ul.sub-menu ul {
	position: static !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 1 !important;
	/* 3.6.0 (audit D29): "visible" overrode the CLOSED panel's hidden state, so
	   Tab walked through invisible breed links. Inherit follows the panel. */
	visibility: inherit !important;
	transform: none !important;
	left: auto !important; top: auto !important;
}
.header-navigation .kadence-menu-mega-enabled > ul.sub-menu > li > a {
	border-bottom: 2px solid var(--hog-line) !important;
	padding: 0 0 10px !important; margin-bottom: 8px !important;
	background: transparent !important;
	pointer-events: none; cursor: default;
}
.header-navigation .kadence-menu-mega-enabled > ul.sub-menu > li > a:hover {
	background: transparent !important; color: var(--hog-pink) !important;
}
.header-navigation .kadence-menu-mega-enabled ul ul li a {
	border-bottom: 0 !important; padding: 8px 10px !important; margin: 0 -10px !important;
}

/* ---------- hero stacking, corrected ----------
   WP core sets .wp-block-cover__inner-container to z-index 1, the same as my
   wash, so the wash painted over the headline. Explicit layers instead:
   image 0, video 1, block dim 2, brand wash 3, content 4. */
/* The video and the cover image were BOTH z-index 0, and the image comes
   later in the DOM, so the still image painted straight over a video that was
   playing perfectly well underneath it. The image is the fallback and belongs
   behind; it is what shows when reduced motion hides the video. */
.hog-hero-cover .wp-block-cover__image-background { z-index: 0 !important; }
.hog-hero-cover .hog-hero-video { z-index: 1 !important; }
.hog-hero-cover .wp-block-cover__background { z-index: 2 !important; }
.hog-hero-cover::after { z-index: 3 !important; }
/* The wash is an ::after, so at an equal z-index it paints AFTER the inner
   container and washes out the headline. Content must sit one layer above it.
   Final order: image 0, video 1, block dim 2, brand wash 3, content 4. */
.hog-hero-cover > .wp-block-cover__inner-container,
.hog-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 4 !important; }

/* ---------- the logo is the wordmark, so the text title is redundant ---------- */
.site-branding .site-title,
.site-header-item .site-title,
.site-branding .site-description { display: none !important; }
.site-branding img.custom-logo,
.site-header-item img.custom-logo,
a.brand img {
	max-height: 52px !important;
	width: auto !important; height: auto !important;
	max-width: 240px !important;
}
@media (max-width: 800px) {
	.site-branding img.custom-logo, a.brand img { max-height: 40px !important; max-width: 180px !important; }
}
.site-branding a.brand { display: inline-flex; align-items: center; }

/* ============================================================
   2.0.0 — audit corrections
   ============================================================ */

/* ---------- contrast ----------
   White on #FF0082 measures 3.77:1 and fails AA for normal text. The bright
   magenta stays for large display type, borders, icons and focus rings. Any
   filled surface carrying white body text uses the darker solid instead. */
.hog-btn:not(.hog-btn--ghost),
.gform_wrapper .gform_button,
.gform_wrapper input[type=submit],
.hog-search button,
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.wp-block-button__link.hog-btn:not(.hog-btn--ghost),
.wp-block-button.is-style-fill .wp-block-button__link,
.hog-hero-cover .wp-block-button__link:not(.hog-btn--ghost),
.woocommerce nav.woocommerce-pagination ul li span.current,
.hog-facet a.is-on b,
.hog-badge--ending {
	background-color: var(--hog-pink-solid) !important;
	border-color: var(--hog-pink-solid) !important;
	color: #FFFFFF !important;
}
.hog-btn:not(.hog-btn--ghost):hover,
.gform_wrapper .gform_button:hover,
.hog-search button:hover,
.woocommerce div.product form.cart .button:hover { background-color: #D1006D !important; border-color: #D1006D !important; }

/* the ticker and the seller call to action carry body-size text on magenta */
.hog-ticker { background: var(--hog-pink-solid); }
.hog-cta { background: var(--hog-pink-solid); }
}
.hog-cta .hog-btn { background: var(--hog-ink) !important; border-color: var(--hog-ink) !important; }

/* ---------- catalog alignment ---------- */
.hog-search { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 1001px) { .hog-search { max-width: 1280px; } .hog-search > * { max-width: 460px; } }
.hog-shophead { padding-inline: 24px !important; }
.hog-filters { padding-inline: 24px; }
.hog-archive { padding-inline: 24px; }
@media (max-width: 520px) {
	.hog-shophead, .hog-filters, .hog-archive, .hog-search { padding-inline: 18px; }
	.hog-shophead h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}

/* active filter count in the mobile summary */
.hog-rail__box > summary span b {
	display: inline-block; margin-left: 8px; padding: 1px 7px;
	background: var(--hog-pink-solid); color: #fff; font-size: .7rem;
}

/* ---------- breed tiles: stop words breaking mid-syllable ---------- */
.hog-breeds a {
	word-break: normal; overflow-wrap: normal; hyphens: none;
	gap: 10px; font-size: .88rem;
}
.hog-breeds a::after { flex: none; }
@media (max-width: 620px) {
	.hog-breeds { grid-template-columns: 1fr; }
	.hog-breeds a { font-size: .95rem; }
}

/* ---------- product page ---------- */
.woocommerce-breadcrumb, .woocommerce-breadcrumb a {
	color: #B7B7C2 !important; font-size: .82rem;
}
.woocommerce-breadcrumb a:hover { color: var(--hog-pink) !important; }
.woocommerce div.product .woocommerce-product-rating,
.woocommerce div.product .product_meta,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .stock,
#reviews, .woocommerce-product-gallery__trigger { display: none !important; }
/* the summary already carries the description, so the long duplicate goes */
.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: 6px; }
.hog-notice--pay strong { color: var(--hog-pink); }
.hog-notice--pay .hog-btn { margin-top: 12px; }

/* ---------- focus visibility on magenta surfaces ---------- */
.hog-cta :where(a, button):focus-visible,
.hog-ticker :where(a):focus-visible { outline-color: #fff; }
.hog-soldlink { max-width: 1280px; margin: 26px auto 0; padding-inline: 24px; color: var(--hog-mute); font-size: .9rem; }
.hog-soldlink a { color: var(--hog-pink); }

/* seller self-service controls */
.hog-manage { white-space: nowrap; }
.hog-manage form { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.hog-manage input[type=number] {
	width: 92px; background: var(--hog-ink-3); color: #fff;
	border: 2px solid var(--hog-line); border-radius: 0; padding: 7px 9px; font-size: .88rem;
}
.hog-manage button {
	background: var(--hog-pink-solid); color: #fff; border: 2px solid var(--hog-pink-solid);
	border-radius: 0; padding: 7px 11px; cursor: pointer;
	font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.hog-manage__link {
	display: inline-block; margin-right: 12px;
	font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--hog-mute); text-decoration: underline;
}
.hog-manage__link:hover { color: var(--hog-pink); }

/* WooCommerce account area, a promised buyer and breeder tool */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 2px solid var(--hog-line); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--hog-line); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block; padding: 13px 16px; color: #DEDEE6; text-decoration: none;
	font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover {
	background: var(--hog-pink-solid); color: #fff;
}
.woocommerce-MyAccount-content { color: #DEDEE6; }

/* Orientation panel at the top of the buyer and breeder areas. Same shape in
   both, and the same shape as the Mission Control masthead, so the three
   dashboards introduce themselves identically. */
.hog-intro {
	background: var(--hog-ink-2);
	border-left: 4px solid var(--hog-pink);
	padding: 24px 26px;
	margin: 0 0 34px;
}
.hog-intro .hog-eyebrow { margin: 0 0 8px; color: var(--hog-pink); }
.hog-intro__title {
	margin: 0 0 10px;
	font-family: var(--hog-display);
	font-size: 1.34rem; line-height: 1.2; color: #fff;
	text-wrap: pretty;
}
.hog-intro__body { margin: 0; color: #C9C9D2; font-size: .95rem; line-height: 1.65; max-width: 68ch; text-wrap: pretty; }
.hog-intro__note {
	margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hog-line);
	color: var(--hog-mute); font-size: .86rem; line-height: 1.6;
}
.hog-intro__note strong { color: var(--hog-pink); }
@media (max-width: 600px) { .hog-intro { padding: 20px; } }
.woocommerce-MyAccount-content a { color: var(--hog-pink); }

/* Logged-out account page: login and register side by side. Stretch makes the
   two boxes the same height whatever their content; the register button rides
   the bottom edge instead of crowding the privacy text. */
.woocommerce-account #customer_login {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch;
}
/* Woo's clearfix ::before/::after become anonymous grid items: the ::before
   occupied the first cell and pushed login and register diagonal. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { display: none; content: none; }
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2 { width: 100%; float: none; display: flex; flex-direction: column; }
.woocommerce-account #customer_login h2 {
	font-family: var(--hog-display); font-size: 1.3rem; letter-spacing: .04em;
	text-transform: uppercase; color: #fff; margin: 0 0 14px;
}
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	flex: 1 1 auto; display: flex; flex-direction: column;
	border: 1px solid var(--hog-line); border-radius: 0; padding: 26px 28px; margin: 0;
}
.woocommerce-account #customer_login form.register .woocommerce-privacy-policy-text { margin-bottom: 18px; }
.woocommerce-account #customer_login form.register .form-row:last-of-type,
.woocommerce-account #customer_login form.login .form-row:last-of-type { margin-top: auto; padding-top: 6px; }
@media (max-width: 800px) { .woocommerce-account #customer_login { grid-template-columns: 1fr; } }

/* The account nav was 352px of mostly empty space while the breeder table
   overflowed its 825px column and hid the Manage controls. Flex the two
   columns and give the content the width it actually needs. */
@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		display: flex; align-items: flex-start; gap: 40px;
	}
	.woocommerce-account .account-navigation-wrap {
		order: 2; flex: 0 0 240px; width: 240px; float: none;
	}
	/* The page heading is a sibling ABOVE the two columns and ran the full
	   width, so the display type crossed into the nav's column and read as
	   running behind it. Cap it to the content column: 240px nav + 40px gap. */
	.woocommerce-account .hog-shophead {
		max-width: calc(100% - 280px);
		/* the base rule is margin: 0 auto, which centred the capped heading */
		margin-inline: 0 auto;
	}
	.woocommerce-account .woocommerce-MyAccount-content {
		/* padding-right was a gutter for the old float layout; the flex gap
		   does that job now, and it was costing the table 42px. */
		order: 1; flex: 1 1 auto; width: auto; min-width: 0; float: none;
		padding-right: 0;
	}
	/* Side by side, these links made Manage the widest column. Stacked, it is
	   as wide as the longest one instead of the sum. */
	.hog-mylistings td.hog-manage .hog-manage__link {
		display: block; margin-right: 0; margin-top: 8px;
	}
	/* Same reason: the price field and its Save button side by side were the
	   widest thing in the column. */
	.hog-mylistings td.hog-manage input[type="text"],
	.hog-mylistings td.hog-manage input[type="number"] { width: 96px; }
	/* The price form is display:flex, so display:block on the button was
	   inert; the form itself has to stack. */
	.hog-mylistings td.hog-manage form { flex-direction: column; align-items: flex-start; }
	.hog-mylistings td.hog-manage button { margin-top: 8px; }
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text {
	background: var(--hog-ink-2) !important; color: #fff !important;
	border: 2px solid var(--hog-line) !important; border-radius: 0 !important; padding: 12px 14px !important;
}
.woocommerce .button, .woocommerce a.button, .woocommerce button.button {
	background: var(--hog-pink-solid) !important; color: #fff !important;
	border-radius: 0 !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.woocommerce table.shop_table, .woocommerce table.shop_table td, .woocommerce table.shop_table th {
	border-color: var(--hog-line) !important; color: #DEDEE6;
}

/* listing video */
.hog-video { margin: 26px 0 0; }
.hog-video .hog-eyebrow { margin-bottom: 12px; }
.hog-video__frame, .hog-video__file { border: 2px solid var(--hog-line); background: #000; }
.hog-video__frame iframe, .hog-video__file { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }
.hog-video__frame { position: relative; }

/* phone video uploader on the listing form */
.hog-vidup { border: 2px dashed var(--hog-line); background: var(--hog-ink-2); padding: 18px; margin-bottom: 14px; }
.hog-vidup__btn {
	display: inline-block; cursor: pointer;
	background: var(--hog-pink-solid); color: #fff; border: 2px solid var(--hog-pink-solid);
	padding: 14px 22px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
}
.hog-vidup__btn:hover { background: #D1006D; }
.hog-vidup__note { color: var(--hog-mute); font-size: .84rem; margin: 10px 0 0; }
.hog-vidup__bar { height: 8px; background: var(--hog-ink-3); border: 1px solid var(--hog-line); margin-top: 12px; }
.hog-vidup__bar i { display: block; height: 100%; width: 0; background: var(--hog-pink); transition: width .2s ease; }
.hog-vidup__msg { margin: 8px 0 0; font-size: .86rem; color: #DEDEE6; }
.hog-vidup__msg.is-err { color: #FF7BBE; }
.hog-has-uploader label.gfield_label { margin-bottom: 4px; }
.hog-status--available{border-color:#0a7d28;color:#55D983}
.hog-status--reserved{border-color:#b26a00;color:#E9A13B}
.hog-status--sold{border-color:var(--hog-line);color:var(--hog-mute)}
.hog-status--expired,.hog-status--withdrawn{border-color:var(--hog-line);color:var(--hog-mute)}
.hog-status--rejected{border-color:#9a1b1b;color:#E97B7B}


/* ---------- 2.5.0 the inquiry desk ---------- */

.hog-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.hog-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 2px solid var(--hog-line);
  font: 700 .74rem/1 var(--hog-display, inherit); letter-spacing: .1em; text-transform: uppercase;
  color: var(--hog-mute); text-decoration: none; background: transparent;
  transition: color .18s, border-color .18s, background .18s;
}
.hog-tab span {
  min-width: 1.6em; padding: 2px 6px; text-align: center;
  background: var(--hog-line); color: var(--hog-ink); font-size: .72rem;
}
.hog-tab:hover, .hog-tab:focus-visible { color: #fff; border-color: #fff; }
.hog-tab.is-on { color: var(--hog-ink); background: var(--hog-pink); border-color: var(--hog-pink); }
.hog-tab.is-on span { background: var(--hog-ink); color: var(--hog-pink); }

.hog-inquiries td { vertical-align: top; }
.hog-enqform { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hog-mini {
  padding: 6px 10px; border: 1px solid var(--hog-line); background: transparent;
  color: var(--hog-mute); font: 700 .68rem/1 var(--hog-display, inherit);
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.hog-mini:hover, .hog-mini:focus-visible { color: #fff; border-color: #fff; }

.hog-status--enq-new       { border-color: var(--hog-pink); color: var(--hog-pink); }
.hog-status--enq-contacted { border-color: #b26a00; color: #E9A13B; }
.hog-status--enq-closed    { border-color: #0a7d28; color: #55D983; }
.hog-status--enq-spam      { border-color: var(--hog-line); color: var(--hog-mute); }

.hog-pip {
  display: inline-block; padding: 2px 7px; margin-left: 4px;
  background: var(--hog-pink); color: var(--hog-ink);
  font: 700 .64rem/1.5 var(--hog-display, inherit); letter-spacing: .06em; text-transform: uppercase;
}

.hog-notice--ok   { border-left-color: #55D983; }
.hog-notice--warn { border-left-color: #E9A13B; }

/* a video that is not playable yet must not look like a broken player */
.hog-video--wait .hog-video__wait {
  border: 2px dashed var(--hog-line); padding: 22px;
  color: var(--hog-mute); margin: 0;
}

@media (max-width: 640px) {
  .hog-tab { padding: 8px 11px; font-size: .68rem; }
  .hog-enqform { gap: 5px; }
  .hog-mini { flex: 1 1 auto; }
}

/* the marketplace's own position, stated where the money conversation starts */
.hog-notice--pickup { border-left-color: var(--hog-line); }
.hog-ask .hog-eyebrow { margin-bottom: 10px; }

.hog-trustline {
  margin: 20px 0 0; color: var(--hog-mute);
  font: 700 .78rem/1.6 var(--hog-display, inherit);
  letter-spacing: .12em; text-transform: uppercase;
}
.hog-forminfo--warn { border-left: 3px solid #E9A13B; }

/* superseded 2026-08-30: the notice is now its own full-width row and the
   readable measure is set on its inner span instead. */

/* ---------- the seller tables on a phone ----------
   A breeder fills these in and reads them from the barn. A seven-column table
   at 390px scrolls sideways and half of it is never seen, so it becomes a card
   per row with the column name in front of each value.
   The breakpoint is 900px, not 760px: seven columns need about 898px of
   content width, so a 768px tablet was still overflowing sideways. */
@media (max-width: 900px) {
  .hog-mylistings, .hog-mylistings tbody, .hog-mylistings tr, .hog-mylistings td {
    display: block; width: 100%; box-sizing: border-box; max-width: 100%;
  }
  /* display:none, not a clipped thead: an absolutely positioned thead still
     lays its cells out at their natural width and pushed the document 220px
     wider than the phone. Every cell carries its own label below. */
  .hog-mylistings thead { display: none; }
  .hog-mylistings { border: 0; }
  .hog-mylistings tr {
    border: 2px solid var(--hog-line); margin: 0 0 16px; padding: 4px 0; background: var(--hog-ink-2);
  }
  .hog-mylistings td {
    display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
    padding: 11px 14px; border-bottom: 1px solid var(--hog-line); text-align: right;
    box-sizing: border-box; overflow-wrap: anywhere;
  }
  .hog-mylistings tr td:last-child { border-bottom: 0; }
  .hog-mylistings td::before {
    content: attr(data-l); flex: 0 0 auto; text-align: left;
    color: var(--hog-mute); font: 700 .68rem/1.5 var(--hog-display, inherit);
    letter-spacing: .12em; text-transform: uppercase;
  }
  .hog-mylistings td[data-l="Pig"] { display: block; text-align: left; font-size: 1.02rem; }
  .hog-mylistings td[data-l="Pig"]::before { display: block; margin-bottom: 4px; }
  .hog-mylistings td[data-l="Question"] { display: block; text-align: left; }
  .hog-mylistings td[data-l="Question"]::before { display: block; margin-bottom: 4px; }
  .hog-mylistings td.hog-manage { display: block; text-align: left; }
  .hog-mylistings td.hog-manage::before { display: block; margin-bottom: 8px; }
  .hog-mylistings small { text-align: right; }
  .hog-mylistings td[data-l="Pig"] small,
  .hog-mylistings td[data-l="Question"] small { text-align: left; }
  .hog-enqform { margin-top: 8px; }
}

/* ============================================================
   2.6.0 — the listing experience
   ============================================================ */

/* ---------- the product layout, so the gallery can hold still ----------
   WooCommerce floats the gallery left and the summary right. A float cannot
   be relied on to stick, and the related-products section has to span both
   columns, so the product becomes a two-column grid above 1024px. */
@media (min-width: 1024px) {
  .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 50px;
    align-items: start;
  }
  .woocommerce div.product > .woocommerce-product-gallery,
  .woocommerce div.product > .summary {
    float: none !important; width: auto !important; margin: 0 !important;
  }
  /* WooCommerce core sets position:relative with
     `.woocommerce div.product div.images.woocommerce-product-gallery`, which is
     MORE specific than the obvious child selector, so sticky was silently
     losing the cascade. The class is repeated to win on specificity rather
     than on stylesheet order, which a concatenating cache can change. */
  .woocommerce div.product > div.images.woocommerce-product-gallery.woocommerce-product-gallery {
    grid-column: 1; grid-row: 1;
    position: sticky;
    /* the header is static here, so this is breathing room, not clearance */
    top: 28px;
    align-self: start;
  }
  .woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
  .woocommerce div.product > .summary { grid-column: 2; grid-row: 1; }
  /* anything else the template prints, related products included, spans both */
  /* Everything that is not one of the two columns spans the full width.
     .hog-gallerycol has to be excluded: it IS the gallery column now, and
     without this it matched here and stretched across both, which put the
     summary on top of a full-bleed gallery image. */
  .woocommerce div.product > *:not(.hog-gallerycol):not(.woocommerce-product-gallery):not(.summary) {
    grid-column: 1 / -1;
  }
}
/* A sticky child is dead if any ancestor clips its overflow. */
.woocommerce div.product,
#main.site-main, .content-container, #primary.content-area { overflow: visible; }

/* ---------- the bar that follows the buyer ---------- */

.hog-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--hog-ink-2, #101014);
  border-top: 2px solid var(--hog-pink);
  transform: translateY(101%);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 -18px 40px rgba(0,0,0,.5);
}
.hog-bar.is-up { transform: translateY(0); }
.hog-bar__in {
  max-width: 1240px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 18px;
}
.hog-bar__thumb { flex: 0 0 auto; line-height: 0; }
.hog-bar__thumb img {
  width: 54px; height: 54px; object-fit: cover; display: block;
  border: 1px solid var(--hog-line);
}
.hog-bar__id { flex: 1 1 auto; min-width: 0; }
.hog-bar__id b {
  display: block; font-family: var(--hog-display, inherit); font-size: .98rem;
  letter-spacing: .01em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hog-bar__id small { display: block; color: var(--hog-mute); font-size: .78rem; }
.hog-bar__price {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 10px;
  font-family: var(--hog-display, inherit); font-size: 1.24rem; color: var(--hog-pink);
}
.hog-bar__price .amount, .hog-bar__price ins { color: var(--hog-pink); text-decoration: none; }
.hog-bar__state {
  font-style: normal; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hog-mute); border: 1px solid var(--hog-line); padding: 3px 8px;
}
.hog-bar__act { flex: 0 0 auto; }
.hog-bar__cta { margin: 0; white-space: nowrap; }
body.has-hog-bar { padding-bottom: 84px; }

@media (max-width: 720px) {
  .hog-bar__in { padding: 10px 14px; gap: 12px; flex-wrap: wrap; }
  .hog-bar__thumb { display: none; }
  .hog-bar__id { flex: 1 1 60%; }
  .hog-bar__id small { display: none; }
  .hog-bar__price { font-size: 1.06rem; }
  .hog-bar__act { flex: 1 1 100%; }
  .hog-bar__cta { display: block; width: 100%; text-align: center; }
  body.has-hog-bar { padding-bottom: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .hog-bar { transition: none; }
}

/* ---------- the cart drawer ---------- */

.hog-cartbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 2px solid var(--hog-line); cursor: pointer;
  padding: 9px 14px; color: #fff;
  font: 700 .72rem/1 var(--hog-display, inherit); letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .18s, color .18s;
}
.hog-cartbtn:hover, .hog-cartbtn:focus-visible { border-color: var(--hog-pink); color: var(--hog-pink); }
.hog-cartbtn__n {
  min-width: 1.5em; padding: 2px 6px; background: var(--hog-pink); color: var(--hog-ink);
  font-size: .7rem;
}

html.hog-locked { overflow: hidden; }

.hog-drawer { position: fixed; inset: 0; z-index: 200; }
.hog-drawer__scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,.68);
  opacity: 0; transition: opacity .26s ease;
}
.hog-drawer.is-open .hog-drawer__scrim { opacity: 1; }
.hog-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--hog-ink-2, #101014);
  border-left: 2px solid var(--hog-pink);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto; overscroll-behavior: contain;
}
.hog-drawer.is-open .hog-drawer__panel { transform: translateX(0); }
.hog-drawer__panel:focus { outline: none; }
.hog-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 2px solid var(--hog-line);
  position: sticky; top: 0; background: var(--hog-ink-2, #101014); z-index: 1;
}
.hog-drawer__head h2 { margin: 0; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; }
.hog-drawer__x {
  background: none; border: 0; color: var(--hog-mute); cursor: pointer;
  font-size: 1.9rem; line-height: 1; padding: 0 4px;
}
.hog-drawer__x:hover, .hog-drawer__x:focus-visible { color: var(--hog-pink); }
.hog-drawer__body { padding: 22px; }
.hog-drawer__empty h3 { margin: 6px 0 12px; font-size: 1.16rem; }
.hog-drawer__empty p { color: var(--hog-mute); }
.hog-drawer .woocommerce-mini-cart__buttons a { display: block; margin-bottom: 10px; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .hog-drawer__panel, .hog-drawer__scrim { transition: none; }
}

/* ---------- the listing hero ---------- */

.hog-phero {
  position: relative; isolation: isolate;
  min-height: 520px; display: flex; align-items: flex-end;
  margin: 0 0 46px; overflow: hidden;
  border: 2px solid var(--hog-line); background: var(--hog-ink-2, #101014);
}
.hog-phero__media { position: absolute; inset: 0; z-index: 0; }
.hog-phero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  display: block;
}
/* two washes: one for depth, one so the type is always readable */
.hog-phero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,10,.30) 0%, transparent 34%, rgba(8,8,10,.90) 100%),
    linear-gradient(90deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.20) 58%, transparent 100%);
}
.hog-phero__in { position: relative; z-index: 2; padding: 40px 44px; max-width: 46rem; }
.hog-phero__by { margin: 0 0 12px; color: var(--hog-pink); }
.hog-phero__by span { color: var(--hog-mute); }
.hog-phero__h1 {
  margin: 0 0 16px; color: #fff; line-height: .96;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  text-wrap: pretty;
}
.hog-phero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; }
.hog-phero__chips li {
  border: 1px solid rgba(255,255,255,.32); padding: 6px 12px;
  font: 700 .72rem/1 var(--hog-display, inherit); letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: rgba(8,8,10,.4);
  backdrop-filter: blur(2px);
}
.hog-phero__price {
  margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-family: var(--hog-display, inherit); font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--hog-pink);
}
.hog-phero__price .amount, .hog-phero__price ins { color: var(--hog-pink); text-decoration: none; }
.hog-phero__price del { color: var(--hog-mute); font-size: .6em; }
.hog-phero__state {
  font-style: normal; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,.45); padding: 5px 11px;
}
.hog-phero__state--sold { background: var(--hog-pink); border-color: var(--hog-pink); color: var(--hog-ink); }
/* a sold pig reads as sold at a glance, not after reading a sentence */
.hog-phero.is-sold .hog-phero__img,
.hog-phero.is-expired .hog-phero__img { opacity: .62; }

@media (max-width: 860px) {
  .hog-phero { min-height: 380px; margin-bottom: 32px; }
  .hog-phero__in { padding: 26px 22px; }
  .hog-phero__chips { gap: 6px; }
  .hog-phero__chips li { padding: 5px 9px; font-size: .66rem; }
}

/* ============================================================
   2.8.0 — the HogMatch motion system
   Same convention as the Cru Bear build: one reveal class, one easing, lines
   that draw outward, and nothing that moves for its own sake.
   Everything is opt-IN via .hm-js, so a browser with no JavaScript shows the
   finished state and never a blank page.
   ============================================================ */

:root {
  --hm-ease: cubic-bezier(.22,.61,.36,1);
  --hm-dur: .62s;
}

/* the resting (hidden) state exists only when JS is running */
.hm-js .hm-a { opacity: 0; will-change: opacity, transform; }
.hm-js .hm-a--up      { transform: translateY(22px); }
.hm-js .hm-a--right   { transform: translateX(-18px); }
.hm-js .hm-a--scale   { transform: scale(1.045); }
.hm-js .hm-a.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--hm-dur) var(--hm-ease),
              transform var(--hm-dur) var(--hm-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.hm-js .hm-a.is-in { will-change: auto; }

/* the eyebrow rule draws outward from the text, it does not fade in */
.hm-js .hog-eyebrow::after { transform: scaleX(0); transform-origin: left center; }
.hm-js .hog-eyebrow.is-in::after {
  transform: scaleX(1);
  transition: transform .85s var(--hm-ease) .12s;
}

/* headline underscore that builds as the section arrives */
.hog-h2.hm-a::after, .hog-phero__h1.hm-a::after { content: none; }

/* catalog cards lift, and their photograph settles rather than pops */
.woocommerce ul.products li.product .hog-card__media,
.woocommerce ul.products li.product img {
  transition: transform .5s var(--hm-ease);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.04); }
.woocommerce ul.products li.product { transition: transform .28s var(--hm-ease), border-color .28s var(--hm-ease); }
.woocommerce ul.products li.product:hover { transform: translateY(-4px); }

/* the listing hero image drifts in on load, no JS involved */
.hog-phero__img { animation: hm-heroin 1.5s var(--hm-ease) both; }
@keyframes hm-heroin { from { transform: scale(1.07); opacity: .35; } to { transform: scale(1); opacity: 1; } }
.hog-phero__in > * { animation: hm-rise .7s var(--hm-ease) both; }
.hog-phero__by    { animation-delay: .10s; }
.hog-phero__h1    { animation-delay: .18s; }
.hog-phero__chips { animation-delay: .26s; }
.hog-phero__price { animation-delay: .34s; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* the price gets one quiet pulse when it arrives, then never again */
.hog-phero__price .amount { animation: hm-pricepulse 1.9s var(--hm-ease) .5s 1 both; display: inline-block; }
@keyframes hm-pricepulse {
  0% { transform: scale(1); }
  18% { transform: scale(1.055); }
  40% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* chips build left to right */
.hog-phero__chips li { animation: hm-rise .55s var(--hm-ease) both; }
.hog-phero__chips li:nth-child(1) { animation-delay: .30s; }
.hog-phero__chips li:nth-child(2) { animation-delay: .37s; }
.hog-phero__chips li:nth-child(3) { animation-delay: .44s; }
.hog-phero__chips li:nth-child(4) { animation-delay: .51s; }

/* the footer rule sweeps, then breathes: the reference feel from Cru Bear */
.hog-footer { position: relative; }
.hog-footer::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--hog-pink), rgba(255,0,130,0));
  transform: scaleX(0); transform-origin: left center;
}
.hog-footer.is-in::before {
  animation: hm-sweep 1.1s var(--hm-ease) forwards, hm-breathe 5.5s ease-in-out 1.1s infinite;
}
@keyframes hm-sweep { to { transform: scaleX(1); } }
@keyframes hm-breathe { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* the stat band counts up rather than simply appearing */
.hog-stats b { font-variant-numeric: tabular-nums; }

/* buttons gain a little weight under the cursor */
.hog-btn { transition: transform .18s var(--hm-ease), background .18s var(--hm-ease), color .18s var(--hm-ease), border-color .18s var(--hm-ease); }
.hog-btn:hover { transform: translateY(-2px); }
.hog-btn:active { transform: translateY(0); }

/* facet rows slide their count across on hover */
.hog-facet a { transition: color .18s var(--hm-ease), border-color .18s var(--hm-ease); }

/* Nothing above may move for a visitor who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
  .hm-js .hm-a, .hm-js .hm-a.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hm-js .hog-eyebrow::after, .hm-js .hog-eyebrow.is-in::after { transform: scaleX(1) !important; transition: none !important; }
  .hog-phero__img, .hog-phero__in > *, .hog-phero__chips li,
  .hog-phero__price .amount, .hog-footer.is-in::before { animation: none !important; }
  .hog-footer::before { transform: scaleX(1); }
  .woocommerce ul.products li.product:hover { transform: none; }
  .woocommerce ul.products li.product:hover img { transform: none; }
  .hog-btn:hover { transform: none; }
}

/* the account dashboard's own numbers */
.hog-stats--account { margin: 0 0 26px; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-child { color: var(--hog-mute); }

/* ---------- breeder profiles ---------- */
.hog-breederlink { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .18s var(--hm-ease), border-color .18s var(--hm-ease); }
.hog-breederlink:hover, .hog-breederlink:focus-visible { color: var(--hog-pink); border-bottom-color: var(--hog-pink); }
.hog-phero__by .hog-breederlink:hover { color: #fff; border-bottom-color: #fff; }
.hog-breederhead { margin-bottom: 34px; }
.hog-stats--breeder { margin: 26px 0 20px; }
.hog-breederhead__note { color: var(--hog-mute); font-size: .9rem; max-width: 62ch; line-height: 1.55; }
.hog-breedergrid { margin-bottom: 46px; }
.hog-breeder-page .hog-h2 { margin-top: 8px; }

/* ---------- the SWD logo tag ----------
   Shaun's studio credit: the Shaun Wilson Designs wordmark as an inline SVG,
   sized small and tinted to the HogMatch palette. Same structure as the
   canonical version on crubear.com, so it stays consistent across his estate. */
.hog-swd-link {
  position: relative; display: inline-flex; align-items: center;
  color: var(--hog-mute); transition: color .3s var(--hm-ease); line-height: 0;
}
.hog-swd-link .hog-swd-mark {
  height: 13px; width: auto; aspect-ratio: 927/227; fill: currentColor; display: block; /* Shaun 2026-09-11: was 15px, a tick smaller */
}
.hog-swd-link:hover, .hog-swd-link:focus-visible { color: var(--hog-pink); }
.hog-swd-link::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 12px); right: 0;
  white-space: nowrap; background: var(--hog-ink-2, #101014);
  border: 1px solid var(--hog-line); color: #fff;
  font-family: var(--hog-display, inherit); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--hm-ease), transform .25s var(--hm-ease);
  transform: translateY(5px);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.7);
}
.hog-swd-link::before {
  content: ""; position: absolute; bottom: calc(100% + 6px); right: 14px;
  border: 5px solid transparent; border-top-color: var(--hog-line);
  opacity: 0; transition: opacity .25s var(--hm-ease); pointer-events: none;
}
.hog-swd-link:hover::after, .hog-swd-link:hover::before,
.hog-swd-link:focus-visible::after, .hog-swd-link:focus-visible::before { opacity: 1; }
.hog-swd-link:hover::after, .hog-swd-link:focus-visible::after { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hog-swd-link, .hog-swd-link::after, .hog-swd-link::before { transition: none; }
}

/* The credit signs off at the end of the bar rather than floating between the
   two blocks of text, which is what space-between did with three children. */
.hog-footer__bar { align-items: center; }
@media (max-width: 700px) {
  .hog-swd-link { margin-left: 0; }
  .hog-swd-link::after { right: auto; left: 0; }
  .hog-swd-link::before { right: auto; left: 14px; }
}

/* ---------- footer bottom, rebuilt ----------
   The marketplace notice used to sit between the copyright and the credit, so
   a four-line legal paragraph was fighting two one-line items and the whole
   bar read as off centre. The notice is now its own full-width row and the bar
   below it carries exactly two things: copyright left, marks right. */
/* The crest stands alone in the footer, so it carries the brand and gets the
   size to do it. The wake is Codex's `hero-crest-enter` curve from the motion
   package, run ONCE when it scrolls into view rather than on a loop. */
.hog-footer__crest {
  display: block; width: 160px; height: auto; margin: 0 0 20px;
}
.hm-js .hog-footer__crest { opacity: 0; }
.hm-js .hog-footer__crest.is-in {
  animation: hm-crest-wake 1.05s var(--hm-ease) both;
}
@keyframes hm-crest-wake {
  from { opacity: 0; transform: scale(.68); filter: blur(10px); }
  70%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-js .hog-footer__crest, .hm-js .hog-footer__crest.is-in {
    opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important;
  }
}
@media (max-width: 700px) { .hog-footer__crest { width: 132px; } }
/* The RULE spans the full container; the TEXT is capped at a readable measure
   by an inner span. Capping the paragraph itself drew a divider that stopped
   two thirds of the way across, because a border follows its element's width. */
.hog-footer__notice {
  border-top: 2px solid var(--hog-line);
  margin: 22px 0 0; padding-top: 22px;
  color: var(--hog-mute); font-size: .82rem; line-height: 1.6;
}
.hog-footer__notice > span { display: block; max-width: 92ch; }
.hog-footer__bar {
  border-top: 0; padding-block: 18px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  color: var(--hog-mute); font-size: .82rem;
}
.hog-footer__copy { flex: 0 1 auto; }
.hog-footer__marks { display: inline-flex; align-items: center; gap: 16px; }
.hog-socials { display: inline-flex; align-items: center; gap: 12px; }
.hog-social {
  display: inline-flex; color: var(--hog-mute); line-height: 0;
  transition: color .3s var(--hm-ease), transform .3s var(--hm-ease);
}
.hog-social svg { width: 17px; height: 17px; display: block; }
/* Shaun 2026-09-11: the Facebook glyph only fills 20 of its 24 units (Instagram
   fills all 24), so at the same box it drew about 14px against 17px. Scaled so
   the two read the same size. */
.hog-social[aria-label="Facebook"] svg { width: 20px; height: 20px; }
.hog-social:hover, .hog-social:focus-visible { color: var(--hog-pink); transform: translateY(-2px); }
/* the credit sits in the same row of marks, so it reads as one cluster */
.hog-swd-link { flex: 0 0 auto; }
.hog-footer__marks .hog-swd-link { padding-left: 4px; }

@media (max-width: 700px) {
  .hog-footer__bar { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .hog-social:hover { transform: none; } }

/* ---------- the gallery column ----------
   The gallery is sticky INSIDE this wrapper. The wrapper is the grid item and
   fills the row, so it bounds the sticky travel; a sticky grid item on its own
   escaped its row and covered the related products. */
@media (min-width: 1024px) {
  .woocommerce div.product > .hog-gallerycol { grid-column: 1; grid-row: 1; align-self: stretch; }
  .woocommerce div.product > .hog-gallerycol > div.images.woocommerce-product-gallery.woocommerce-product-gallery {
    position: sticky; top: 28px; float: none !important; width: auto !important; margin: 0 !important;
  }
}

/* The inquiry call to action is the main action on a listing, so it is solid.
   A ghost outline sat next to the price and read as a secondary link. */
.hog-ask .hog-btn--primary {
  background: var(--hog-pink); color: var(--hog-ink); border: 2px solid var(--hog-pink);
}
.hog-ask .hog-btn--primary:hover, .hog-ask .hog-btn--primary:focus-visible {
  background: #fff; border-color: #fff; color: var(--hog-ink);
}
.hog-ask { margin: 26px 0 0; }

/* the money split table, used on settings and anywhere the deal is explained */
.hog-split { width: 100%; max-width: 30rem; border-collapse: collapse; margin: 6px 0 0; }
.hog-split td { border-bottom: 1px solid var(--hog-line); font-size: .92rem; }
.hog-split tr:last-child td { border-bottom: 0; }

/* ---------- masked contact, the relay, and demo mode ---------- */
.hog-masked { color: var(--hog-mute); font-family: var(--hog-display, inherit); letter-spacing: .06em; }
.hog-masked__note, .hog-unlocked { display: block; font-size: .72rem; margin-top: 4px; }
.hog-masked__note { color: var(--hog-mute); font-style: italic; }
.hog-unlocked { color: #55D983; }
.hog-thread { margin: 10px 0; }
.hog-thread summary { cursor: pointer; color: var(--hog-mute); font-size: .78rem; }
.hog-thread__msg { margin: 8px 0; padding: 8px 10px; border-left: 2px solid var(--hog-line); font-size: .86rem; }
.hog-thread__msg--buyer { border-left-color: var(--hog-pink); }
.hog-thread__msg b { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hog-mute); }
.hog-replyform { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hog-replyform textarea {
  width: 100%; background: var(--hog-ink); border: 1px solid var(--hog-line);
  color: #fff; padding: 8px 10px; font: inherit; font-size: .86rem; resize: vertical;
}
.hog-deposit { margin: 22px 0 0; padding: 18px; border: 2px solid var(--hog-pink); }
.hog-deposit__demo {
  margin: 0 0 10px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #E9A13B;
}
/* Sticky, not relative. Kadence measures whatever sits above the header and
   offsets its fixed header by that much: with this bar in the flow it reserved
   33px, then the bar scrolled away and left a transparent band that page
   content showed through. Pinning the bar fills exactly the space Kadence
   reserved, and it still takes up flow space so nothing jumps on load. */
.hog-demobar {
  background: #E9A13B; color: #1a1a1a; text-align: center; padding: 8px 14px;
  font: 700 .74rem/1.4 var(--hog-display, inherit); letter-spacing: .1em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 1300;   /* above Kadence's header at 1200 */
}
body.admin-bar .hog-demobar { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .hog-demobar { top: 46px; } }

/* ---------- reserved: a pig with a sale in progress ----------
   Reserved is the one inactive state a buyer should still act on, because
   deposits fall through. It gets the brand pink. Sold and expired stay muted,
   so the three do not compete for the same attention. */

.woocommerce ul.products li.product.hog-state-reserved {
  border-color: var(--hog-pink);
  box-shadow: 0 0 0 1px var(--hog-pink) inset, 0 14px 34px -20px rgba(255,0,130,.55);
}
.woocommerce ul.products li.product.hog-state-reserved:hover {
  box-shadow: 0 0 0 1px var(--hog-pink) inset, 0 20px 40px -18px rgba(255,0,130,.7);
}

/* the listing hero carries the same signal at full size */
.hog-phero.is-reserved {
  border-color: var(--hog-pink);
  box-shadow: 0 0 0 1px var(--hog-pink) inset;
}
.hog-phero__state--reserved {
  background: var(--hog-pink); border-color: var(--hog-pink); color: var(--hog-ink);
}

/* sold and expired recede rather than compete */
.woocommerce ul.products li.product.hog-state-sold,
.woocommerce ul.products li.product.hog-state-expired { opacity: .82; }
.woocommerce ul.products li.product.hog-state-sold:hover,
.woocommerce ul.products li.product.hog-state-expired:hover { opacity: 1; }

/* the seller's own dashboard row, so a pending sale is obvious there too */
.hog-mylistings tr:has(.hog-status--reserved) { outline: 1px solid var(--hog-pink); outline-offset: -1px; }

/* ---------- breathing room above the footer ----------
   The related-products section had zero margin, so its last row of cards sat
   flush against the footer's top edge. Measured at exactly 0px. The rule on
   the content area is the safety net, so no page can butt the footer again. */
/* The obvious fix, a padding-bottom on the content area, does NOT work here:
   this stylesheet already carries `.content-area, .site-main { padding-bottom:
   0 !important }`, added so the full-bleed bands on the homepage sit flush
   against the footer. That is deliberate and worth keeping, so the space is
   added on the specific sections that end a page instead. */
.woocommerce div.product section.related { margin-bottom: 96px; }
.hog-breeder-page .hog-breedergrid:last-of-type { margin-bottom: 96px; }
.hog-breeder-page .hog-empty:last-of-type { margin-bottom: 88px; }
@media (max-width: 782px) {
  .woocommerce div.product section.related,
  .hog-breeder-page .hog-breedergrid:last-of-type { margin-bottom: 56px; }
}

/* the way in, sitting beside the primary navigation */
.hog-signin {
  display: inline-flex; align-items: center; margin-left: 18px;
  padding: 9px 16px; border: 2px solid var(--hog-line); color: #fff;
  font: 700 .72rem/1 var(--hog-display, inherit); letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  transition: border-color .18s var(--hm-ease), color .18s var(--hm-ease);
}
.hog-signin:hover, .hog-signin:focus-visible { border-color: var(--hog-pink); color: var(--hog-pink); }
@media (max-width: 1024px) { .hog-signin { margin-left: 10px; padding: 7px 12px; font-size: .66rem; } }

/* ---------- header: a bigger mark, and air under the divider ---------- */
.site-header .site-branding img,
.site-header .custom-logo-link img { max-height: 62px !important; width: auto !important; }
@media (max-width: 1024px) {
  .site-header .site-branding img,
  .site-header .custom-logo-link img { max-height: 48px !important; }
}
/* The hero was butting straight against the header's bottom rule. */
.hog-hero-cover, .hog-phero { margin-top: 26px; }
.woocommerce div.product > .hog-gallerycol { padding-top: 0; }
@media (max-width: 782px) { .hog-hero-cover, .hog-phero { margin-top: 16px; } }

/* the sign-in item sits in the nav list, so it needs list resets */
.hog-signin-item { display: flex; align-items: center; list-style: none; }
.hog-signin-item::marker { content: none; }

/* ---------- Codex farm aerials (media library, 2026-08-31) ----------
   Backgrounds, never content: every one sits under a dark wash tuned to the
   image so the type never fights the picture. 19 and 20 are Shaun's homepage
   picks; three more dress the inner-page headers. */

/* stats band: rural dusk is already night, so the wash is light */
.page-id-33 .hog-band:has(.hog-stats) {
	background: linear-gradient(rgba(8, 8, 10, .55), rgba(8, 8, 10, .8)),
		url(https://dev.hogmatch.com/wp-content/uploads/2026/08/19-rural-dusk-farm.webp) center 30% / cover no-repeat;
}
/* how-it-works band: dawn fog is bright, so it runs behind a heavy wash */
.page-id-33 .hog-band--dark:has(.hog-steps) {
	background: linear-gradient(rgba(8, 8, 10, .88), rgba(8, 8, 10, .93)),
		url(https://dev.hogmatch.com/wp-content/uploads/2026/08/20-dawn-fog-farm.webp) center 60% / cover no-repeat;
}

/* Inner pages get NO aerial backgrounds. Their first .hog-band wraps nearly
   the whole page (1300px+), so a 1600x900 image stretched to cover it was
   blown out across all the content. Aerials only work on section-height
   bands, which today means the homepage. Any future placement must go on a
   band that is one screen tall or less. */

/* ---------- contact page ---------- */
/* Hero: the gravel lane to the farm. Section-height by design (see the
   aerials rule above); the wash deepens toward the text. */
.page-id-37 .hog-contact-hero {
	background: linear-gradient(100deg, rgba(8, 8, 10, .86) 30%, rgba(8, 8, 10, .55)),
		url(https://dev.hogmatch.com/wp-content/uploads/2026/08/09-gravel-lane-farm.webp) center 62% / cover no-repeat;
	display: flex; align-items: center;
	min-height: clamp(340px, 44vh, 480px);
	border-bottom: 3px solid var(--hog-pink);
}
.hog-contact-hero__lead { max-width: 52ch; }

/* the router's contextual guidance, revealed by the topic picker */
.hog-form-hint {
	background: var(--hog-ink-2); border-left: 4px solid var(--hog-pink);
	padding: 16px 20px; margin: 4px 0 10px;
	color: #C9C9D2; font-size: .93rem; line-height: 1.6;
}
.hog-form-hint a { color: var(--hog-pink); }

/* ---------- about page ---------- */
.page-id-36 .hog-about-hero {
	background: linear-gradient(100deg, rgba(8, 8, 10, .84) 32%, rgba(8, 8, 10, .5)),
		url(https://dev.hogmatch.com/wp-content/uploads/2026/08/08-blue-hour-show-barn.webp) center 45% / cover no-repeat;
	display: flex; align-items: center;
	min-height: clamp(340px, 44vh, 480px);
	border-bottom: 3px solid var(--hog-pink);
}
.hog-about-hero__lead { max-width: 58ch; }
.hog-about-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 8px 0 34px;
}
.hog-about-card {
	border: 1px solid var(--hog-line); background: var(--hog-ink-2);
	padding: 24px 26px; color: #C9C9D2; line-height: 1.65;
}
.hog-about-card .hog-eyebrow { margin-bottom: 10px; }
.hog-about-card p:last-child { margin-bottom: 0; }
.hog-about-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 30px; }
/* doubled class beats the base a.hog-btn rule that was filling it pink */
a.hog-btn.hog-btn--ghost, .hog-btn.hog-btn--ghost {
	background: transparent; border: 2px solid var(--hog-paper); color: var(--hog-paper);
}
a.hog-btn.hog-btn--ghost:hover, .hog-btn.hog-btn--ghost:hover { border-color: var(--hog-pink); color: var(--hog-pink); }
.hog-about-legal { color: var(--hog-mute); font-size: .84rem; max-width: 86ch; }
@media (max-width: 900px) { .hog-about-grid { grid-template-columns: 1fr; } }

/* ---------- how it works page ---------- */
.page-id-34 .hog-hiw-hero {
	background: linear-gradient(100deg, rgba(8, 8, 10, .86) 34%, rgba(8, 8, 10, .58)),
		url(https://dev.hogmatch.com/wp-content/uploads/2026/08/05-misty-valley-farm.webp) center 42% / cover no-repeat;
	display: flex; align-items: center;
	min-height: clamp(340px, 44vh, 480px);
	border-bottom: 3px solid var(--hog-pink);
}
.hog-hiw-hero__lead { max-width: 56ch; }
.hog-hiw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 34px; }
.hog-hiw-list { list-style: none; margin: 0; padding: 0; }
.hog-hiw-list li { position: relative; padding-left: 22px; margin-bottom: 12px; }
.hog-hiw-list li::before {
	content: ""; position: absolute; left: 0; top: .52em;
	width: 9px; height: 9px; background: var(--hog-pink);
}
.hog-hiw-list li:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .hog-hiw-grid { grid-template-columns: 1fr; } }

/* the sign-in gate on my-listings / my-inquiries */
.hog-gate--signin { max-width: 560px; text-align: left; }
.hog-gate__form { margin-top: 22px; }
.hog-gate__form form.login {
	border: 0; padding: 0; margin: 0; background: none;
}
.hog-gate__form .form-row { margin-bottom: 14px; display: flex; flex-direction: column; }
/* Woo's login form is not inside a .woocommerce wrapper here, so the theme's
   input styling never reached it: white boxes and a blue button on black. */
.hog-gate__form label { display: block; margin-bottom: 6px; color: var(--hog-mute); font-size: .84rem; }
.hog-gate__form input.input-text,
.hog-gate__form input[type="text"],
.hog-gate__form input[type="password"] {
	width: 100%; background: var(--hog-ink-3); color: #fff;
	border: 1px solid var(--hog-line); border-radius: 0; padding: 12px 14px; font-size: .95rem;
}
.hog-gate__form input:focus { outline: 2px solid var(--hog-pink); outline-offset: 1px; }
.hog-gate__form button[type="submit"], .hog-gate__form .woocommerce-form-login__submit {
	background: var(--hog-pink-solid); color: #fff; border: 2px solid var(--hog-pink-solid);
	border-radius: 0; padding: 12px 22px; cursor: pointer;
	font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
}
.hog-gate__form button[type="submit"]:hover { background: #D1006D; border-color: #D1006D; }
.hog-gate__form .woocommerce-form-login__rememberme { color: var(--hog-mute); font-size: .84rem; margin: 4px 0 14px; }
.hog-gate__form .woocommerce-LostPassword a { color: var(--hog-pink); font-size: .88rem; }
.hog-gate__alt {
	margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hog-line);
}
.hog-gate__alt .hog-eyebrow { margin-bottom: 8px; }
.hog-gate__alt p { font-size: .92rem; }
.hog-gate__alt .hog-empty__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---------- listing fees + photo guide heroes ---------- */
.page-id-39 .hog-fees-hero,
.page-id-40 .hog-photo-hero {
	display: flex; align-items: center;
	min-height: clamp(320px, 40vh, 440px);
	border-bottom: 3px solid var(--hog-pink);
}
.page-id-39 .hog-fees-hero {
	background: linear-gradient(100deg, rgba(8, 8, 10, .84) 32%, rgba(8, 8, 10, .5)),
		url(https://dev.hogmatch.com/wp-content/uploads/2026/08/01-sunrise-show-farm.webp) center 55% / cover no-repeat;
}
/* the guide tells breeders to shoot in even light, so the hero is overcast */
.page-id-40 .hog-photo-hero {
	background: linear-gradient(100deg, rgba(8, 8, 10, .84) 32%, rgba(8, 8, 10, .54)),
		url(https://dev.hogmatch.com/wp-content/uploads/2026/08/02-overcast-rolling-hills-farm.webp) center 50% / cover no-repeat;
}
.hog-fees-hero__lead, .hog-photo-hero__lead { max-width: 56ch; }

/* ---------- multi-step forms ----------
   The seller application and the pig listing form are long. Gravity Forms
   pages break them into steps; this makes the step indicator look like
   HogMatch instead of default grey. */
.gform_wrapper .gf_page_steps {
	display: flex; flex-wrap: wrap; gap: 10px 26px;
	margin: 0 0 30px; padding: 0 0 20px;
	border-bottom: 1px solid var(--hog-line);
}
.gform_wrapper .gf_step {
	display: flex; align-items: center; gap: 10px; margin: 0; opacity: 1;
	font-size: .78rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--hog-mute);
}
.gform_wrapper .gf_step_number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; flex: 0 0 28px;
	border: 2px solid var(--hog-line); border-radius: 50%;
	font-size: .8rem; letter-spacing: 0; color: var(--hog-mute); background: transparent;
}
.gform_wrapper .gf_step_active { color: #fff; }
.gform_wrapper .gf_step_active .gf_step_number {
	border-color: var(--hog-pink); background: var(--hog-pink-solid); color: #fff;
}
.gform_wrapper .gf_step_completed .gf_step_number {
	border-color: var(--hog-pink); color: var(--hog-pink);
}
/* Back sits quiet next to Continue */
.gform_wrapper .gform_previous_button {
	background: transparent !important; border: 2px solid var(--hog-line) !important;
	color: #DEDEE6 !important;
}
.gform_wrapper .gform_previous_button:hover {
	border-color: var(--hog-pink) !important; color: var(--hog-pink) !important;
}
.gform_wrapper .gform_page_footer { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* GF marks visibility-hidden fields with a class and relies on its own
   stylesheet to hide them; that stylesheet is off in this theme, so the
   class did nothing and "hidden" fields rendered. */
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gfield_visibility_administrative { display: none !important; }

/* Codex mobile pass: the SOLD badge wrapped onto multiple lines in narrow
   status cells. Badges never wrap. */
.hog-status, .hog-badge { white-space: nowrap; min-width: 3.5em; text-align: center; }

/* Woo notices in the account area: the confirm-email banner ran its button
   into the text. Flex with a gap, button never shrinks or wraps its label. */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	background: var(--hog-ink-2); border-left: 4px solid var(--hog-pink);
	color: #DEDEE6; padding: 16px 20px; margin: 0 0 22px;
}
.woocommerce-account .woocommerce-info a.button,
.woocommerce-account .woocommerce-message a.button {
	flex: 0 0 auto; white-space: nowrap; margin: 0;
}

/* role-aware dashboard summary cards */
.hog-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 24px; }
.hog-dash-card {
	border: 1px solid var(--hog-line); background: var(--hog-ink-2);
	padding: 18px 20px; text-decoration: none; display: block; color: #DEDEE6;
}
a.hog-dash-card:hover { border-color: var(--hog-pink); }
.hog-dash-card b { display: block; font-family: var(--hog-display); font-size: 1.7rem; color: #fff; white-space: nowrap; }
.hog-dash-card b .woocommerce-Price-amount, .hog-dash-card b .woocommerce-Price-currencySymbol { display: inline; }
.hog-dash-card span { display: block; margin-top: 6px; color: var(--hog-mute); font-size: .8rem;
	letter-spacing: .08em; text-transform: uppercase; }
.hog-dash-card em { display: block; margin-top: 4px; font-style: normal; color: var(--hog-pink); font-size: .8rem; }
@media (max-width: 700px) { .hog-dash-grid { grid-template-columns: 1fr; } }

/* ---- mobile UX pass (2026-09-01) ---- */

/* sticky money bar on pig pages: phones only, thumbs only */
.hog-mobilebar { display: none; }
@media (max-width: 767px) {
	.hog-mobilebar {
		display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0;
		z-index: 1200; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(14,14,17,.96); border-top: 1px solid var(--hog-line);
		backdrop-filter: blur(6px);
	}
	.hog-mobilebar .hog-btn { flex: 1; text-align: center; margin: 0; white-space: nowrap; }
	.hog-mobilebar .hog-btn--ghost { flex: 0 0 30%; }
	.single-product .site-footer { padding-bottom: 70px; }

	/* iOS zooms the whole page when a focused field is under 16px.
	   Mobile audit 2026-09-08: the shop search box sat at 15.2px and was
	   missed by the selectors below, so tapping search zoomed the catalog.
	   Every focusable control on the site, no exceptions. */
	input, select, textarea,
	.gform_wrapper input, .gform_wrapper select, .gform_wrapper textarea,
	.woocommerce input.input-text, .woocommerce select, .woocommerce textarea,
	.hog-gate__form input { font-size: 16px !important; }

	/* the sign-in form was 211px wide on a 375px phone - not shrink-wrap,
	   but three nested paddings (24+24+32 a side) stacking up. On phones the
	   gate sheds its desktop chrome and claws back the wrap gutter. */
	.hog-gate { padding: 26px 16px; margin-inline: -16px; }

	/* Mobile audit 2026-09-08: the same double gutter cost every account
	   page 96px of a 375px screen - a quarter of the phone - because
	   .hog-wrap adds 24px inside a block group that already added 24px. The
	   parent keeps the gutter; the inner one stands down. Breeder listings
	   go 279px -> 327px. */
	.wp-block-group__inner-container > .hog-wrap {
		padding-left: 0; padding-right: 0;
	}

	/* bigger thumb target for the menu toggle */
	#masthead .mobile-toggle-open, #masthead [aria-label="Open menu"] { padding: 12px; margin: -6px; }

	/* results count and the sort control were touching */
	.woocommerce-result-count { margin-bottom: 12px; display: block; }
}

/* Order-pay page (the deposit checkout): Woo's payment box shipped light
   grey with white text, and its description dark grey on black - neither
   readable. Dark panel, light text, pink accent, same as the rest. */
.woocommerce-checkout-payment, #payment {
	background: var(--hog-ink-2) !important; border: 1px solid var(--hog-line);
	border-left: 4px solid var(--hog-pink); border-radius: 0 !important; padding: 8px 0 0;
}
#payment ul.wc_payment_methods { border: 0 !important; padding: 12px 18px !important; }
#payment ul.wc_payment_methods li, #payment ul.wc_payment_methods li label {
	color: #fff !important; font-weight: 700; }
/* the label itself carried a light grey background (Kadence checkout
   styling) under white text - the actual unreadable bar */
#payment ul.wc_payment_methods li label {
	background: transparent !important; padding: 4px 0 !important; display: inline-block; }
#payment ul.wc_payment_methods li input[type=radio] { accent-color: var(--hog-pink); margin-right: 8px; }
#payment .payment_box, #payment div.payment_box {
	background: transparent !important; color: #DEDEE6 !important; padding: 0 !important; margin: 6px 0 0 !important; }
#payment .payment_box::before { display: none !important; }
#payment .payment_box p { color: #DEDEE6 !important; margin: 0 0 6px; }
#payment .place-order { padding: 14px 18px 18px !important; }
#payment .woocommerce-privacy-policy-text p, .woocommerce-privacy-policy-text { color: var(--hog-mute); }
/* a fee-only order has no product rows: the empty Product / Qty header
   was just noise above the totals */
.woocommerce-order-pay .shop_table thead { display: none; }

/* ===== Premium deposit checkout, 2026-09-09 =====
   Shaun: "this checkout does not look premium." It was three bare radio
   labels stacked on a flat panel with no hierarchy and no selected state.
   Each method is now a card you can click anywhere on, with a real chosen
   state, and the total is treated as the important number on the page. */

#payment ul.wc_payment_methods {
	padding: 18px !important; display: grid; gap: 10px; list-style: none; margin: 0;
}
#payment ul.wc_payment_methods li.wc_payment_method {
	background: var(--hog-ink-3); border: 1px solid var(--hog-line);
	padding: 15px 18px; margin: 0; list-style: none;
	transition: border-color .18s ease, background-color .18s ease;
}
#payment ul.wc_payment_methods li.wc_payment_method:hover { border-color: #4A4A55; }
/* the chosen method should be obvious at a glance, not a small dot */
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--hog-pink);
	box-shadow: inset 3px 0 0 0 var(--hog-pink), 0 0 0 1px var(--hog-pink);
}
#payment ul.wc_payment_methods li label {
	font-family: var(--hog-display); font-size: .95rem; letter-spacing: .04em;
	display: flex !important; align-items: center; gap: 11px;
	cursor: pointer; width: 100%; padding: 0 !important; margin: 0;
}
/* Something upstream squashes these to 4px slivers. Pin every axis. */
#payment ul.wc_payment_methods li input[type=radio] {
	-webkit-appearance: radio !important; appearance: auto !important;
	width: 17px !important; height: 17px !important;
	min-width: 17px !important; max-width: 17px !important;
	flex: 0 0 17px !important;
	margin: 0 !important; padding: 0 !important;
	border: 0 !important; background: none !important; box-shadow: none !important;
}
/* the button PayPal draws needs room to breathe, not to sit on the text */
#payment .payment_box { margin: 12px 0 2px !important; }
#payment .payment_box p { font-family: var(--hog-body); font-size: .86rem;
	letter-spacing: 0; color: var(--hog-mute) !important; }
#payment .place-order, #payment > .form-row { padding: 4px 18px 20px !important; }
/* say the quiet part: the card never touches HogMatch */
#payment .place-order::after, #payment > .form-row::after {
	content: "Payments are processed by PayPal. HogMatch never sees or stores your card details.";
	display: block; margin-top: 14px; padding-top: 12px;
	border-top: 1px solid var(--hog-line);
	font-family: var(--hog-body); font-size: .78rem; line-height: 1.5; color: var(--hog-mute);
}

/* Shaun 2026-09-09: the privacy line belongs UNDER the pay buttons, not
   above them. Woo prints it first, so the row becomes a flex column and the
   legal text is ordered to the bottom. */
#payment > .form-row { display: flex; flex-direction: column; }
#payment > .form-row > .ppc-button-wrapper,
#payment > .form-row > button.button { order: 10; }
#payment > .form-row > .woocommerce-terms-and-conditions-wrapper { order: 90; margin-top: 16px; }
#payment > .form-row::after { order: 99; }
#payment .woocommerce-privacy-policy-text p { font-size: .78rem; line-height: 1.55; margin: 0; }

/* The totals were two grey rows of the same weight. The amount being paid
   is the thing a buyer checks, so it gets the display face and the size. */
.woocommerce-order-pay .shop_table {
	background: var(--hog-ink-2); border: 1px solid var(--hog-line);
	border-collapse: collapse; width: 100%; margin-bottom: 22px;
}
.woocommerce-order-pay .shop_table td,
.woocommerce-order-pay .shop_table th {
	padding: 15px 18px !important; border-bottom: 1px solid var(--hog-line);
	color: #DEDEE6;
}
.woocommerce-order-pay .shop_table tfoot tr:last-child td,
.woocommerce-order-pay .shop_table tfoot tr:last-child th {
	font-family: var(--hog-display); font-size: 1.2rem; color: #FFFFFF;
	border-bottom: 0; letter-spacing: .02em;
}
.woocommerce-order-pay .shop_table tfoot tr:last-child td { color: var(--hog-pink); }

/* ===== The deposit checkout, finished (2026-09-09, second pass) =====
   Two columns on a desk: the buyer's details and the payment on the left,
   the animal and the money on the right, pinned while they scroll. One
   column on a phone, summary first so they can see what they are paying
   for before they are asked for anything. Shaun's second pass: a progress
   rail, live ticks on the fields, a lock that visibly opens, the deposit
   counting up, a split bar for today-versus-pickup, and a thank-you page
   that draws a check instead of saying "order received". */
/* both are BODY classes, so they chain, they do not nest */
body.hog-deposit-pay .shop_table { display: none; }
body.hog-deposit-done .woocommerce-thankyou-order-received,
body.hog-deposit-done ul.woocommerce-thankyou-order-details { display: none; }
.hog-pay__lead { max-width: 62ch; }

/* a quiet glow behind the heading so the page is not a flat black sheet.
   Sized in px and never wider than the page, so nothing needs clipping
   (an overflow:hidden ancestor would kill the sticky summary). */
.hog-pay__head { position: relative; }
.hog-pay__head::before {
	content: ""; position: absolute; left: -120px; top: -160px; width: min(620px, 100%); height: 520px;
	pointer-events: none; z-index: -1;
	background: radial-gradient(closest-side, rgba(255,0,130,.16), rgba(255,0,130,0) 72%);
}
.hog-pay__head::after {
	content: ""; position: absolute; inset: -60px 0 0 0; pointer-events: none; z-index: -1;
	background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hog-shophead.hog-pay__head { z-index: 0; }

/* the three-step rail under the heading */
.hog-pay__steps {
	list-style: none; margin: 26px 0 0; padding: 0; display: flex; align-items: center; gap: 0;
	counter-reset: hogstep; max-width: 680px;
	animation: hm-rise .7s var(--hm-ease) .3s both;
}
.hog-pay__step {
	counter-increment: hogstep; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
	font-family: var(--hog-display); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hog-mute);
}
.hog-pay__step:not(:first-child) { flex: 1 1 auto; }
.hog-pay__step:not(:first-child)::before { content: ""; flex: 1; height: 1px; background: var(--hog-line); margin: 0 14px; transition: background .5s var(--hm-ease); }
.hog-pay__step.is-done + .hog-pay__step::before { background: linear-gradient(90deg, var(--hog-pink), var(--hog-line)); }
.hog-pay__stepn {
	width: 28px; height: 28px; flex: 0 0 28px; border: 2px solid var(--hog-line); display: grid; place-items: center;
	position: relative; color: #DEDEE6; transition: border-color .3s, background .3s, box-shadow .3s;
}
.hog-pay__stepn::before { content: counter(hogstep); font-size: .7rem; }
.hog-pay__step.is-now .hog-pay__stepn { border-color: var(--hog-pink); animation: hm-stepring 2.4s ease-in-out infinite; }
.hog-pay__step.is-now .hog-pay__stepl, .hog-pay__step.is-done .hog-pay__stepl { color: #fff; }
.hog-pay__step.is-done .hog-pay__stepn { background: var(--hog-pink); border-color: var(--hog-pink); }
.hog-pay__step.is-done .hog-pay__stepn::before {
	content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes hm-stepring {
	0%, 100% { box-shadow: 0 0 0 3px var(--hog-pink-glow); }
	50% { box-shadow: 0 0 0 8px rgba(255,0,130,.08); }
}
@media (max-width: 560px) {
	.hog-pay__step .hog-pay__stepl { display: none; }
	.hog-pay__step.is-now .hog-pay__stepl { display: inline; }
	.hog-pay__step:not(:first-child)::before { margin: 0 10px; }
}

/* the grid */
.hog-deposit-pay form#order_review {
	display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 26px; row-gap: 0; align-items: start;
}
.hog-deposit-pay form#order_review > .hog-pay__details { grid-column: 1; grid-row: 1; margin-bottom: 26px; }
.hog-deposit-pay form#order_review > .hog-pay__payhead { grid-column: 1; grid-row: 2; }
.hog-deposit-pay form#order_review > #payment { grid-column: 1; grid-row: 3; margin: 0; }
.hog-deposit-pay form#order_review > .hog-pay__summary { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 24px; }
.hog-deposit-pay form#order_review > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
@media (max-width: 900px) {
	.hog-deposit-pay form#order_review { grid-template-columns: minmax(0, 1fr); }
	.hog-deposit-pay form#order_review > .hog-pay__summary { grid-column: 1; grid-row: 1; position: static; margin-bottom: 26px; }
	.hog-deposit-pay form#order_review > .hog-pay__details { grid-row: 2; }
	.hog-deposit-pay form#order_review > .hog-pay__payhead { grid-row: 3; }
	.hog-deposit-pay form#order_review > #payment { grid-row: 4; }
}

/* arrival: the cards rise in one after another, no JS involved */
.hog-deposit-pay .hog-pay__details { animation: hm-rise .7s var(--hm-ease) .12s both; }
.hog-deposit-pay .hog-pay__summary { animation: hm-rise .7s var(--hm-ease) .22s both; }
.hog-deposit-pay .hog-pay__payhead { animation: hm-rise .7s var(--hm-ease) .30s both; }
.hog-deposit-pay #payment { animation: hm-rise .7s var(--hm-ease) .36s both; }

/* the details card */
.hog-pay__card { background: var(--hog-ink-2); border: 1px solid var(--hog-line); padding: 22px 22px 10px; position: relative; }
.hog-pay__details { border-left: 4px solid var(--hog-pink); }
.hog-pay__num {
	position: absolute; right: 16px; top: 6px; font-family: var(--hog-display); font-size: 3.4rem; line-height: 1;
	color: rgba(255,255,255,.045); letter-spacing: .02em; pointer-events: none; user-select: none;
}
.hog-pay__cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 4px; position: relative; }
.hog-pay__h { font-family: var(--hog-display); font-size: .82rem; letter-spacing: .12em;
	text-transform: uppercase; color: var(--hog-pink); margin: 0 0 6px; }
.hog-pay__sub { color: var(--hog-mute); font-size: .9rem; line-height: 1.5; margin: 0 0 18px; }
.hog-pay__meter { flex: 0 0 128px; text-align: right; padding-top: 3px; }
.hog-pay__meter b { display: block; font-family: var(--hog-display); font-size: .68rem; letter-spacing: .1em;
	text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.hog-pay__meter-b { display: block; height: 5px; background: var(--hog-ink); border: 1px solid var(--hog-line); overflow: hidden; }
.hog-pay__meter-b i { display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--hog-pink-dim), var(--hog-pink)); box-shadow: 0 0 10px var(--hog-pink-glow);
	transition: width .5s var(--hm-ease); }
.hog-pay__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.hog-pay__grid--one { grid-template-columns: 1fr; }
@media (max-width: 560px) { .hog-pay__grid { grid-template-columns: 1fr; } .hog-pay__meter { flex-basis: 96px; } }
.hog-pay__details .form-row { float: none !important; width: 100% !important; margin: 0 0 14px !important; padding: 0; position: relative; }
.hog-pay__details label { display: block; font-family: var(--hog-display); font-size: .72rem;
	letter-spacing: .1em; text-transform: uppercase; color: #DEDEE6; margin: 0 0 6px; }
.hog-pay__details label .required { color: var(--hog-pink); text-decoration: none; }
.hog-pay__details label .optional { color: var(--hog-mute); font-family: var(--hog-body);
	text-transform: none; letter-spacing: 0; font-size: .8rem; }
.hog-pay__details .woocommerce-input-wrapper { display: block; position: relative; }
.hog-pay__details input[type=text], .hog-pay__details input[type=tel],
.hog-pay__details input[type=email], .hog-pay__details select {
	width: 100%; box-sizing: border-box; background: var(--hog-ink); color: #fff;
	border: 2px solid var(--hog-line); border-radius: 0; padding: 12px 14px;
	font-family: var(--hog-body); font-size: 16px; line-height: 1.3; color-scheme: dark;
	box-shadow: inset 0 2px 0 rgba(0,0,0,.35);
	transition: border-color .22s var(--hm-ease), box-shadow .22s var(--hm-ease);
}
.hog-pay__details select { height: auto; }
.hog-pay__details input:focus, .hog-pay__details select:focus {
	border-color: var(--hog-pink); outline: 0; box-shadow: 0 0 0 4px var(--hog-pink-glow), inset 0 2px 0 rgba(0,0,0,.35); }
.hog-pay__details .description { display: block; color: var(--hog-mute); font-size: .8rem; margin: 6px 0 0; }
/* a filled field earns a tick; a required one you left empty shows it, gently */
.hog-pay__details .form-row.is-ok:not(.hog-pay__field--select) input { border-color: #3A3A46; padding-right: 42px; }
.hog-pay__details .form-row.is-ok:not(.hog-pay__field--select) .woocommerce-input-wrapper::after {
	content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 13px;
	border: solid var(--hog-pink); border-width: 0 2px 2px 0; transform: translateY(-62%) rotate(45deg) scale(0);
	animation: hm-tick .38s var(--hm-ease) forwards;
}
@keyframes hm-tick { to { transform: translateY(-62%) rotate(45deg) scale(1); } }
.hog-pay__details .hog-pay__field--req.is-touched:not(.is-ok) input,
.hog-pay__details .hog-pay__field--req.is-touched:not(.is-ok) select { border-color: var(--hog-pink-dim); }
/* Woo's select2 wrapper, if it wraps the state field */
.hog-pay__details .select2-container .select2-selection--single {
	height: auto; background: var(--hog-ink); border: 2px solid var(--hog-line); border-radius: 0; padding: 8px 10px; }
.hog-pay__details .select2-container .select2-selection__rendered { color: #fff; line-height: 1.5; padding: 0; }
.hog-pay__details .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

/* the payment heading sits on top of Woo's #payment box as one card */
.hog-pay__payhead {
	background: var(--hog-ink-2); border: 1px solid var(--hog-line); border-bottom: 0; border-left: 4px solid var(--hog-pink);
	padding: 22px 22px 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; position: relative;
}
.hog-deposit-pay #payment { border-top: 0 !important; padding-top: 0 !important; }
.hog-pay__lockbadge {
	display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-top: 2px;
	font-family: var(--hog-display); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hog-mute);
	border: 1px solid var(--hog-line); padding: 8px 12px; transition: color .3s, border-color .3s, box-shadow .3s;
}
.hog-pay__lockbadge svg, .hog-pay__lockico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hog-pay__lockbadge.is-open { color: #fff; border-color: var(--hog-pink); box-shadow: 0 0 14px var(--hog-pink-glow); }
.hog-pay__shackle { transform-origin: 17px 10px; transition: transform .5s var(--hm-ease); }
.is-open .hog-pay__shackle { transform: translateY(-1px) rotate(26deg); }

/* method cards: a check circle on the right, the native radio out of sight */
/* Kadence paints its own fake radio as label::before (10px, blue). Inside
   our flex label it stretched into a blue sliver beside every method name. */
#payment ul.wc_payment_methods li label::before { content: none !important; display: none !important; }
/* ...and a 5px blue left border on the chosen label. Neither belongs here. */
#payment ul.wc_payment_methods li label { border: 0 !important; background: transparent !important; }
#payment ul.wc_payment_methods li.wc_payment_method { position: relative; padding: 16px 56px 16px 18px; }
#payment ul.wc_payment_methods li input[type=radio] {
	position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important;
	min-width: 0 !important; max-width: none !important; left: 0; top: 0; }
#payment ul.wc_payment_methods li.wc_payment_method::after {
	content: ""; position: absolute; right: 18px; top: 18px; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--hog-line); transition: border-color .25s, background .25s, box-shadow .25s;
}
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked)::after {
	border-color: var(--hog-pink); background: radial-gradient(circle, #fff 0 3.5px, var(--hog-pink) 4px);
	box-shadow: 0 0 12px var(--hog-pink-glow);
}
#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) { animation: hm-pick .7s var(--hm-ease); }
#payment ul.wc_payment_methods li.wc_payment_method:has(input:focus-visible) { outline: 2px solid var(--hog-pink); outline-offset: 2px; }
@keyframes hm-pick {
	0%   { box-shadow: inset 3px 0 0 0 var(--hog-pink), 0 0 0 1px var(--hog-pink), 0 0 0 0 rgba(255,0,130,.45); }
	100% { box-shadow: inset 3px 0 0 0 var(--hog-pink), 0 0 0 1px var(--hog-pink), 0 0 0 12px rgba(255,0,130,0); }
}
#payment ul.wc_payment_methods li label { flex-wrap: wrap; row-gap: 4px; }
#payment ul.wc_payment_methods li label::after {
	flex-basis: 100%; display: block; font-family: var(--hog-body); font-weight: 400; font-size: .8rem;
	letter-spacing: 0; line-height: 1.45; color: var(--hog-mute);
}
#payment li.payment_method_ppcp-card-button-gateway label::after {
	content: "Visa, Mastercard, American Express, Discover. PayPal's secure card form opens right here on the page."; }
#payment li.payment_method_ppcp-gateway label::after {
	content: "Log in to PayPal in a small window and come straight back. Pay with your balance, bank or a saved card."; }

/* the lock, and the buttons behind it */
#payment .hog-pay__lock {
	display: none; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; order: 5;
	margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--hog-pink-dim);
	background: linear-gradient(90deg, rgba(255,0,130,.10), rgba(255,0,130,0));
}
#payment.hog-pay-locked .hog-pay__lock { display: grid; }
.hog-pay__lockico { width: 44px; height: 44px; border: 1px solid var(--hog-pink-dim); display: grid; place-items: center; color: var(--hog-pink); }
.hog-pay__lockico svg { width: 22px; height: 22px; }
#payment .hog-pay__lock b { display: block; color: #fff; font-size: .9rem; margin-bottom: 3px; font-family: var(--hog-body); letter-spacing: 0; }
#payment .hog-pay__lock span { color: #FF7BBE; font-size: .82rem; line-height: 1.45; }
/* 2.75.0 (2026-09-10): buttons are never dimmed. While the gate is shut the
   wrapper takes the click (its children ignore pointer events) and the script
   answers with a message instead. */
#payment.hog-pay-locked .ppc-button-wrapper > *,
#payment.hog-pay-locked #ppc-button-ppcp-googlepay > *,
#payment.hog-pay-locked #ppc-button-ppcp-applepay > *,
#payment.hog-pay-locked #ppc-button-ppcp-gateway > * { pointer-events: none; }
#payment.hog-pay-locked .ppc-button-wrapper, #payment.hog-pay-locked #ppc-button-ppcp-googlepay,
#payment.hog-pay-locked #ppc-button-ppcp-applepay, #payment.hog-pay-locked #ppc-button-ppcp-gateway { cursor: pointer; }
.hog-pay__err { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #ff3b7a; background: rgba(255, 59, 122, .12); color: #fff; font-size: .9rem; line-height: 1.45; }
.hog-pay__err.is-shake { animation: hm-shake .4s ease both; }
@keyframes hm-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hog-pay__lockbadge, #payment .hog-pay__lock { display: none !important; }
#payment .ppc-button-wrapper, #payment #place_order { transition: opacity .5s var(--hm-ease), filter .5s var(--hm-ease); }
#payment.is-unlocked .ppc-button-wrapper, #payment.is-unlocked #place_order { animation: hm-unlock .9s var(--hm-ease) both; }
@keyframes hm-unlock {
	0%   { opacity: .22; filter: grayscale(1); transform: translateY(6px); }
	100% { opacity: 1; filter: none; transform: none; }
}
/* the three trust lines replace the generic footnote on this page */
body.hog-deposit-pay #payment > .form-row::after { content: none; }
.hog-pay__trust {
	list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hog-line);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; order: 95;
}
.hog-pay__trust li { display: flex; gap: 10px; align-items: flex-start; color: var(--hog-mute); font-size: .78rem; line-height: 1.45; margin: 0; }
.hog-pay__trust svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; fill: none; stroke: var(--hog-pink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .hog-pay__trust { grid-template-columns: 1fr; } }

/* the summary card */
.hog-pay__summary { background: var(--hog-ink-2); border: 1px solid var(--hog-line); position: relative; overflow: hidden; }
.hog-pay__summary::before {
	content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; pointer-events: none;
	background: radial-gradient(closest-side, rgba(255,0,130,.20), rgba(255,0,130,0)); }
.hog-pay__live {
	display: flex; align-items: center; gap: 9px; margin: 0; padding: 14px 18px 0; position: relative;
	font-family: var(--hog-display); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.hog-pay__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--hog-pink); animation: hm-ping 1.8s ease-out infinite; }
@keyframes hm-ping { 0% { box-shadow: 0 0 0 0 rgba(255,0,130,.6); } 100% { box-shadow: 0 0 0 11px rgba(255,0,130,0); } }
.hog-pay__pig { display: flex; gap: 14px; padding: 14px 18px 18px; border-bottom: 1px solid var(--hog-line); position: relative; }
.hog-pay__img { width: 104px; height: 104px; object-fit: cover; flex: 0 0 104px; background: #000;
	box-shadow: 0 0 0 1px var(--hog-line), 0 14px 30px rgba(0,0,0,.55); transition: transform .5s var(--hm-ease); }
.hog-pay__summary:hover .hog-pay__img { transform: scale(1.03); }
.hog-pay__name { font-family: var(--hog-display); font-size: 1rem; line-height: 1.25; margin: 2px 0 8px; color: #fff; }
.hog-pay__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; }
.hog-pay__chips li { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
	color: #DEDEE6; border: 1px solid var(--hog-line); padding: 3px 7px; }
.hog-pay__by { color: var(--hog-mute); font-size: .84rem; margin: 0; }
.hog-pay__rows { padding: 4px 18px 6px; }
.hog-pay__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
	padding: 11px 0; border-bottom: 1px solid var(--hog-line); color: #DEDEE6; font-size: .95rem; }
.hog-pay__row b { font-weight: 700; color: #fff; }
.hog-pay__row--now { border-bottom: 0; padding: 16px 0 8px; }
.hog-pay__row--now span { font-family: var(--hog-display); color: #fff; letter-spacing: .02em; }
.hog-pay__row--now b { font-family: var(--hog-display); font-size: 1.85rem; color: var(--hog-pink);
	text-shadow: 0 0 24px var(--hog-pink-glow); font-variant-numeric: tabular-nums;
	animation: hm-pricepulse 1.9s var(--hm-ease) 1.2s 1 both; display: inline-block; }
.hog-pay__split { margin: 4px 18px 0; }
.hog-pay__split-bar { display: block; height: 8px; background: var(--hog-ink-3); border: 1px solid var(--hog-line); overflow: hidden; }
.hog-pay__split-bar i { display: block; height: 100%; width: var(--pct, 20%); transform-origin: left center;
	background: linear-gradient(90deg, var(--hog-pink-dim), var(--hog-pink)); box-shadow: 0 0 12px var(--hog-pink-glow);
	animation: hm-fill 1.1s var(--hm-ease) .6s both; }
@keyframes hm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hog-pay__split-l { display: flex; justify-content: space-between; margin-top: 7px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hog-mute); }
.hog-pay__split-l b { color: var(--hog-pink); }
.hog-pay__next { list-style: none; margin: 16px 18px 0; padding: 14px 0 2px; border-top: 1px solid var(--hog-line); counter-reset: hognext; }
.hog-pay__next li { counter-increment: hognext; position: relative; padding: 0 0 14px 34px; margin: 0; }
.hog-pay__next li::before {
	content: counter(hognext); position: absolute; left: 0; top: 0; width: 22px; height: 22px; box-sizing: border-box;
	border: 1px solid var(--hog-line); display: grid; place-items: center;
	font-family: var(--hog-display); font-size: .62rem; color: #DEDEE6; background: var(--hog-ink-2); z-index: 1; }
.hog-pay__next li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 1px; background: var(--hog-line); }
.hog-pay__next b { display: block; color: #fff; font-size: .86rem; margin-bottom: 2px; }
.hog-pay__next span { display: block; color: var(--hog-mute); font-size: .78rem; line-height: 1.45; }
.hog-pay__next li.is-done::before { background: var(--hog-pink); border-color: var(--hog-pink); color: #fff; }
.hog-pay__next li.is-done::after { background: var(--hog-pink); }
.hog-pay__next li.is-now::before { border-color: var(--hog-pink); color: var(--hog-pink); box-shadow: 0 0 0 3px var(--hog-pink-glow); }
.hog-pay__note { margin: 0; padding: 12px 18px 18px; color: var(--hog-mute);
	font-size: .8rem; line-height: 1.55; border-top: 1px solid var(--hog-line); }

/* the thank-you card */
.hog-pay__done {
	position: relative; overflow: hidden; background: var(--hog-ink-2); border: 1px solid var(--hog-line);
	border-left: 4px solid var(--hog-pink); padding: 30px 28px; margin: 0 0 28px;
	display: grid; grid-template-columns: 96px 1fr; gap: 20px 26px; align-items: center;
	animation: hm-rise .7s var(--hm-ease) .1s both;
}
.hog-pay__done::before {
	content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; pointer-events: none;
	background: radial-gradient(closest-side, rgba(255,0,130,.18), rgba(255,0,130,0)); }
.hog-pay__seal { width: 96px; height: 96px; position: relative; }
.hog-pay__seal svg { width: 100%; height: 100%; fill: none; stroke: var(--hog-pink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hog-pay__seal circle { stroke-dasharray: 183; stroke-dashoffset: 183; animation: hm-draw 1s var(--hm-ease) .35s forwards; }
.hog-pay__seal path { stroke: #fff; stroke-dasharray: 40; stroke-dashoffset: 40; animation: hm-draw .55s var(--hm-ease) 1.15s forwards; }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }
.hog-pay__done:not(.is-paid) .hog-pay__seal svg { stroke: var(--hog-mute); }
.hog-pay__doneamt { font-family: var(--hog-display); font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; margin: 0; line-height: 1.1; }
.hog-pay__doneamt .amount, .hog-pay__doneamt .amount * { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; }
.hog-pay__doneamt .hog-pay__donestate {
	display: inline-block; margin-left: 12px; vertical-align: middle; padding: 5px 9px;
	font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hog-pink); border: 1px solid var(--hog-pink-dim); }
.hog-pay__done:not(.is-paid) .hog-pay__donestate { color: var(--hog-mute); border-color: var(--hog-line); }
/* the gateway's own one-line description repeats the subline; the box that
   PayPal draws its buttons into is not inside it, so nothing is lost */
body.hog-deposit-pay #payment li.payment_method_ppcp-gateway .payment_box p,
body.hog-deposit-pay #payment li.payment_method_ppcp-card-button-gateway .payment_box p { display: none; }
.hog-pay__donemeta { color: var(--hog-mute); font-size: .86rem; margin: 8px 0 0; }
.hog-pay__donepig { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; padding-top: 18px; border-top: 1px solid var(--hog-line); }
.hog-pay__doneimg { width: 64px; height: 64px; object-fit: cover; flex: 0 0 64px; box-shadow: 0 0 0 1px var(--hog-line); }
.hog-pay__donepig b { display: block; font-family: var(--hog-display); font-size: .95rem; color: #fff; margin-bottom: 3px; }
.hog-pay__donepig span { color: var(--hog-mute); font-size: .84rem; }
.hog-pay__done .hog-pay__next { grid-column: 1 / -1; margin: 0; }
.hog-pay__doneacts { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.hog-pay__btn {
	display: inline-block; font-family: var(--hog-display); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
	padding: 15px 24px; background: var(--hog-pink); color: #fff !important; text-decoration: none !important;
	transition: transform .25s var(--hm-ease), box-shadow .25s var(--hm-ease), background .25s; }
.hog-pay__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px var(--hog-pink-glow); }
.hog-pay__btn--ghost { background: transparent; border: 1px solid var(--hog-line); }
.hog-pay__btn--ghost:hover { border-color: var(--hog-pink); box-shadow: none; }
@media (max-width: 640px) {
	.hog-pay__done { grid-template-columns: 1fr; padding: 24px 20px; }
	.hog-pay__seal { width: 72px; height: 72px; }
}

/* the terms checkbox Woo prints once a terms page is configured */
.hog-deposit-pay .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { margin: 14px 0 0; }
.hog-deposit-pay .woocommerce-terms-and-conditions-wrapper label.checkbox {
	display: flex; gap: 10px; align-items: flex-start; font-family: var(--hog-body); font-size: .84rem; line-height: 1.5; color: #DEDEE6; cursor: pointer; }
.hog-deposit-pay .woocommerce-terms-and-conditions-wrapper input[type=checkbox] {
	-webkit-appearance: checkbox !important; appearance: auto !important; width: 18px !important; height: 18px !important; min-width: 18px;
	margin: 2px 0 0 !important; accent-color: var(--hog-pink); flex: 0 0 18px; }
.hog-deposit-pay .woocommerce-terms-and-conditions-wrapper a { color: var(--hog-pink); }
.hog-deposit-pay .woocommerce-terms-and-conditions-wrapper .required { color: var(--hog-pink); text-decoration: none; }
/* while a save is in flight the lock reads as waiting, not as a refusal */
#payment.is-saving .hog-pay__lock { border-color: var(--hog-line); background: transparent; }
#payment.is-saving .hog-pay__lock span { color: var(--hog-mute); }
/* a pig with money on it cannot be relisted by the breeder */
.hog-manage__note { display: block; color: var(--hog-mute); font-size: .8rem; line-height: 1.4; max-width: 22ch; }

/* nothing above moves for people who asked it not to */
@media (prefers-reduced-motion: reduce) {
	.hog-pay__steps, .hog-deposit-pay .hog-pay__details, .hog-deposit-pay .hog-pay__summary,
	.hog-deposit-pay .hog-pay__payhead, .hog-deposit-pay #payment, .hog-pay__done,
	.hog-pay__step.is-now .hog-pay__stepn, .hog-pay__live i, .hog-pay__row--now b, .hog-pay__split-bar i,
	#payment ul.wc_payment_methods li.wc_payment_method:has(input:checked), #payment.is-unlocked .ppc-button-wrapper,
	.hog-pay__details .form-row.is-ok .woocommerce-input-wrapper::after { animation: none !important; }
	.hog-pay__details .form-row.is-ok:not(.hog-pay__field--select) .woocommerce-input-wrapper::after { transform: translateY(-62%) rotate(45deg) scale(1); }
	.hog-pay__seal circle, .hog-pay__seal path { stroke-dashoffset: 0; animation: none; }
	.hog-pay__meter-b i, .hog-pay__shackle, .hog-pay__img, .hog-pay__btn { transition: none; }
}

/* AUDIT H1: the breeder's own words, shown properly on the pig page. */
.hog-disclose { margin: 26px 0 0; padding: 20px 22px; background: var(--hog-ink-2);
	border: 1px solid var(--hog-line); border-left: 4px solid var(--hog-line); }
.hog-disclose__h { font-family: var(--hog-display); font-size: .82rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--hog-mute); margin: 0 0 10px; }
.hog-disclose p { margin: 0 0 10px; color: #DEDEE6; }
.hog-disclose p:last-child { margin-bottom: 0; }
/* a disclosure is not decoration: it gets the brand rule */
.hog-disclose--health { border-left-color: var(--hog-pink); }
.hog-disclose--health .hog-disclose__h { color: var(--hog-pink); }

/* bloodline links: sire and dam search for their own offspring */
a.hog-bloodline { color: var(--hog-pink); text-decoration: none;
	border-bottom: 1px solid rgba(255,0,130,.4); }
a.hog-bloodline:hover { border-bottom-color: var(--hog-pink); }

/* ---- soft-launch bug reporter ---- */
.hog-bugtab {
	position: fixed; left: 0; top: 50%; transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl; z-index: 1400; cursor: pointer;
	background: var(--hog-pink-solid); color: #fff; border: 0;
	font-family: var(--hog-display); font-size: .68rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; padding: 16px 9px;
	box-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hog-bugtab:hover { background: var(--hog-pink); }
.hog-bugbox {
	position: fixed; left: 46px; top: 50%; transform: translateY(-50%);
	z-index: 1401; width: min(340px, calc(100vw - 62px));
	background: var(--hog-ink-2); border: 1px solid var(--hog-line);
	border-left: 4px solid var(--hog-pink); padding: 20px; color: #DEDEE6;
	box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.hog-bugbox__h { font-family: var(--hog-display); font-size: 1rem; color: #fff; margin: 0 0 4px; }
.hog-bugbox__sub { font-size: .86rem; color: var(--hog-mute); margin: 0 0 14px; }
.hog-bugbox__kind { display: flex; gap: 7px; margin: 0 0 14px; }
.hog-bugbox__kind .hog-kind {
	flex: 1; cursor: pointer; padding: 9px 6px; font: inherit; font-size: .78rem;
	background: var(--hog-ink); color: var(--hog-mute);
	border: 1px solid var(--hog-line); border-radius: 0;
}
.hog-bugbox__kind .hog-kind:hover { color: #fff; border-color: var(--hog-mute); }
.hog-bugbox__kind .hog-kind.is-on {
	background: var(--hog-pink-solid); border-color: var(--hog-pink-solid);
	color: #fff; font-weight: 700;
}
.hog-bugbox__l { display: block; font-size: .74rem; letter-spacing: .08em;
	text-transform: uppercase; color: var(--hog-mute); margin: 0 0 5px; }
.hog-bugbox textarea, .hog-bugbox input {
	width: 100%; background: var(--hog-ink); border: 1px solid var(--hog-line);
	color: #fff; padding: 9px 11px; margin-bottom: 12px; font: inherit; border-radius: 0;
}
.hog-bugbox textarea:focus, .hog-bugbox input:focus {
	outline: 2px solid var(--hog-pink); outline-offset: 1px; }
.hog-bugbox__row { display: flex; gap: 9px; margin-bottom: 10px; }
.hog-bugbox__row .hog-btn { flex: 1; text-align: center; margin: 0; font-size: .78rem; padding: 10px 8px; }
.hog-bugbox__note { font-size: .74rem; color: var(--hog-mute); margin: 0; line-height: 1.45; }

@media (max-width: 767px) {
	/* on a phone the tab sits low-left, clear of the sticky money bar */
	/* Retest 2026-09-09: the tab overlapped footer buttons and filter text on
	   the left. A small pill bottom-right, above the sticky money bar. */
	/* 2.76.0 (frontend audit #5): still covered card images and the ZIP helper.
	   Smaller, tucked at the very bottom right above the sticky bar, and it
	   collapses to a dot after the first tap-away (see hog-bugtab--min). */
	.hog-bugtab { top: auto; bottom: 88px; left: auto; right: 0; transform: none; writing-mode: horizontal-tb;
		padding: 6px 9px; font-size: .56rem; border-radius: 4px 0 0 4px; opacity: .85; }
	.hog-bugtab.hog-bugtab--min { width: 14px; height: 14px; padding: 0; font-size: 0; border-radius: 7px 0 0 7px; }
	.hog-bugbox { left: 12px; right: 12px; width: auto; top: auto; bottom: 96px; transform: none; }
}

/* Kyle's notes 2026-09-08: "Selection not showing" / "Text must be black.
   Cannot see my response" on Breed, State and listing duration. The select
   itself was white-on-dark correctly, but its OPTIONS had a transparent
   background, so the operating system drew its own white dropdown panel and
   painted white text onto it. color-scheme tells the OS to draw the native
   popup dark; the explicit option colours cover the browsers that ignore it. */
select,
.gform_wrapper select,
.woocommerce select,
.hog-filters select {
	color-scheme: dark;
}

/* Second half of the same fault, and the one that actually emptied the box.
   Gravity Forms sizes a control by setting its line height to the FULL control
   height (38px), on the assumption that there is no vertical padding. Our own
   13px of padding then pushes that 38px line box past the bottom edge, so the
   chosen text is drawn outside the control and the field reads as blank. A
   text input survives this because the browser centres its own value; a select
   does not. Give the select a real line height, scoped to selects only so the
   text inputs keep the sizing they already have. */
.gform_wrapper select,
.woocommerce select,
.hog-filters select {
	--gf-ctrl-line-height: 1.2;
	line-height: 1.2 !important;
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	/* Shaun 2026-09-09: the fixed 38px was 3px short of text + padding +
	   borders, so descenders ("Kentucky", "First year") were clipped. The box
	   now grows to its content and never drops below a comfortable height. */
	height: auto !important;
	min-height: 46px;
	box-sizing: border-box;
}
select option,
.gform_wrapper select option,
.woocommerce select option,
.hog-filters select option {
	background-color: #17171D;
	color: #FFFFFF;
}

/* Kyle's filter mockup, built in the site's own style rather than raw
   browser controls: weight, born between, target show, breeder. */
.hog-facet--form { border-top: 1px solid var(--hog-line); padding-top: 16px; margin-top: 4px; }
.hog-facet--form h3 { margin: 14px 0 7px; }
.hog-facet--form h3:first-of-type { margin-top: 0; }
.hog-facet--form input[type="number"],
.hog-facet--form input[type="text"],
.hog-facet--form input[type="month"] {
	width: 100%; background: var(--hog-ink); color: #fff;
	border: 1px solid var(--hog-line); border-radius: 0;
	padding: 9px 10px; font: inherit; font-size: 15px;
	color-scheme: dark;
	/* the rail is only ~224px wide. Without these the padding is added ON TOP
	   of the 100% width and the paired boxes refuse to shrink below their own
	   content, so both rows ran out past the edge of the rail. */
	box-sizing: border-box; min-width: 0;
}
.hog-facet--form input::placeholder { color: #6E6E78; }
.hog-facet--form input:focus { outline: 2px solid var(--hog-pink); outline-offset: 1px; }
.hog-facet__pair { display: flex; gap: 8px; }
.hog-facet__pair label { flex: 1 1 0; min-width: 0; position: relative; display: block; }
.hog-facet__pair label span {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	font-size: .78rem; color: var(--hog-mute); pointer-events: none;
}
.hog-facet__pair input[type="number"] { padding-right: 30px; }

/* Kyle 2026-09-09: the month boxes were cutting "January" down to "ary" and
   "December" to "ber". A month control needs the width of its longest month
   name plus its calendar button, which does not fit at half the rail, so the
   born-between pair stacks and each box takes the full width. The captions
   keep it obvious which one is which now that they are one above the other. */
.hog-facet__pair--stack { display: block; }
.hog-facet__pair--stack label { display: block; margin-bottom: 9px; }
.hog-facet__pair--stack label:last-child { margin-bottom: 0; }
.hog-facet__pair--stack .hog-facet__cap {
	position: static; transform: none; display: block;
	margin: 0 0 4px; font-size: .74rem; letter-spacing: .06em;
	text-transform: uppercase; color: var(--hog-mute); pointer-events: auto;
}
.hog-facet__go {
	width: 100%; box-sizing: border-box; margin-top: 14px; cursor: pointer;
	background: var(--hog-pink-solid); color: #fff; border: 0; border-radius: 0;
	font-family: var(--hog-display); font-size: .78rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; padding: 12px;
}
.hog-facet__go:hover { background: var(--hog-pink); }
@media (max-width: 767px) { .hog-facet--form input { font-size: 16px; } }

/* ===== Breeder listing editor + email verification card (2026-09-09) ===== */
.hog-edit { max-width: 860px; }
.hog-edit h2 { margin: 0 0 8px; }
.hog-edit__lead { color: #C9C9D3; max-width: 62ch; margin: 0 0 22px; }
.hog-edit h3 { font-family: var(--hog-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hog-pink); margin: 26px 0 10px; }
.hog-edit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .hog-edit__grid { grid-template-columns: 1fr; } }
.hog-edit__f { margin: 0 0 14px; }
.hog-edit__f label { display: block; font-family: var(--hog-display); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #DEDEE6; margin: 0 0 6px; }
.hog-edit__f label .required { color: var(--hog-pink); }
.hog-edit__f label .optional { color: var(--hog-mute); font-family: var(--hog-body); text-transform: none; letter-spacing: 0; font-size: .8rem; }
.hog-edit__f input:not([type=file]), .hog-edit__f select, .hog-edit__f textarea {
	width: 100%; box-sizing: border-box; background: var(--hog-ink); color: #fff; border: 2px solid var(--hog-line); border-radius: 0;
	padding: 12px 14px; font-family: var(--hog-body); font-size: 16px; line-height: 1.3; color-scheme: dark; }
.hog-edit__f select { height: auto; --gf-ctrl-line-height: 1.2; }
.hog-edit__f input:focus, .hog-edit__f select:focus, .hog-edit__f textarea:focus { border-color: var(--hog-pink); outline: 0; box-shadow: 0 0 0 4px var(--hog-pink-glow); }
.hog-edit__f .description { display: block; color: var(--hog-mute); font-size: .8rem; margin: 6px 0 0; }
.hog-edit__f input[type=file] { color: #DEDEE6; font-size: .9rem; }
.hog-edit__photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.hog-edit__photo { width: 120px; cursor: pointer; }
.hog-edit__photo img { display: block; width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--hog-line); }
.hog-edit__photo span { display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--hog-mute); padding: 6px 0 0; }
.hog-edit__photo input { accent-color: var(--hog-pink); width: 16px; height: 16px; }
.hog-edit__photo:has(input:checked) img { opacity: .35; outline: 2px solid var(--hog-pink); }
.hog-edit__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hog-notice { padding: 12px 16px; margin: 0 0 18px; border: 1px solid var(--hog-line); background: var(--hog-ink-2); color: #DEDEE6; }
.hog-notice--ok { border-left: 4px solid #1E9E5A; }
.hog-notice--warn { border-left: 4px solid var(--hog-pink); }
.hog-verify { background: var(--hog-ink-2); border: 1px solid var(--hog-line); border-left: 4px solid var(--hog-pink); padding: 20px 22px; margin: 0 0 24px; }
.hog-verify h3 { margin: 4px 0 8px; font-size: 1.05rem; }
.hog-verify p { color: #C9C9D3; margin: 0 0 12px; }
.hog-bugbox .cf-turnstile { margin: 0 0 10px; }

/* ===== account tables: the pig is a picture and three facts, not a line of text (2026-09-09) ===== */
.hog-pigcell { display: flex; gap: 12px; align-items: flex-start; min-width: 220px; }
.hog-pigcell__img { width: 64px; height: 64px; object-fit: cover; flex: 0 0 64px; background: #000; box-shadow: 0 0 0 1px var(--hog-line); }
.hog-pigcell__img--none { display: block; background: var(--hog-ink-3); }
.hog-pigcell__name { display: block; color: #fff; font-weight: 700; line-height: 1.25; }
.hog-pigcell__chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.hog-pigcell__chips i { font-style: normal; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #DEDEE6; border: 1px solid var(--hog-line); padding: 2px 6px; }
.hog-pigcell small { margin-top: 6px; }
.hog-mylistings td[data-l="Pig"] { min-width: 250px; }
.hog-mylistings td[data-l="Deposit paid"] .hog-status { margin-bottom: 2px; }
.hog-mylistings td[data-l="Breeder"] strong { color: #fff; }
@media (max-width: 767px) { .hog-pigcell { min-width: 0; } }

/* buyer reply in the thread (Retest P1-A) */
.hog-inquiries td[data-l="Conversation"] { min-width: 300px; }
.hog-breply { margin-top: 10px; display: grid; gap: 8px; }
.hog-breply textarea { width: 100%; box-sizing: border-box; background: var(--hog-ink); color: #fff; border: 2px solid var(--hog-line); padding: 10px 12px; font-family: var(--hog-body); font-size: 15px; }
.hog-breply textarea:focus { border-color: var(--hog-pink); outline: 0; }
.hog-breply .hog-btn { justify-self: start; }


/* 2.73.0 (2026-09-10, Shaun): the logo sat high in the header. The brand link
   is inline-flex, so the branding wrapper carried an 8px baseline gap under
   the image and centred 5px above / 15px below. Block-level link removes
   the gap; the logo now centres with equal space above and below. */
.site-header-item .site-branding a.brand { display: flex; }

/* 2.77.0 (Shaun, 2026-09-10 night): (1) Kadence gives every top-level block
   a 32px bottom margin, which showed as a black strip of page background
   between the full-bleed home bands. Bands and the hero now sit flush.
   (2) The "See all pigs" button was touching the last pig card. */
.single-content > .hog-band, .single-content > .hog-hero-cover, .single-content > .hog-ticker,
.entry-content > .hog-band, .entry-content > .hog-hero-cover, .entry-content > .hog-ticker { margin-bottom: 0; }
.hog-wrap .woocommerce.columns-3 + .wp-block-buttons,
.hog-wrap .products + .wp-block-buttons { margin-top: 36px; }


/* 2.78.0 (Kyle on iPhone, 2026-09-10): PayPal copies the computed style of
   these placeholder inputs into its hosted card fields, which it draws on a
   white box. Our dark-theme white text became white-on-white. Dark text on
   a white box for the three card fields, and the wrapper the iframe sits in
   is white too so there is never a dark gap around it. */
#payment input[id^="ppcp-credit-card-gateway-card-"],
#payment input[id^="ppcp-credit-card-gateway-card-"]:focus {
	color: #111 !important; background: #fff !important; -webkit-text-fill-color: #111 !important;
	caret-color: #111; border: 1px solid #ccc;
}
#payment [id^="ppcp-credit-card-gateway-card-"] iframe, #payment .card_container, #payment .ppcp-hosted-field { background: #fff; }
a.hog-card-cta { display: inline-block; }


/* 2.79.0 (Kyle on iPhone, 2026-09-10): the card form was unstyled Woo defaults:
   wrapping labels, a stray asterisk, boxes of different sizes. Now it matches
   the details form above it: display-font labels on one line, three white
   fields of one height, expiry and CVV side by side on every width. */
#wc-ppcp-credit-card-gateway-cc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
#wc-ppcp-credit-card-gateway-cc-form .form-row { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
#wc-ppcp-credit-card-gateway-cc-form .form-row-wide { grid-column: 1 / -1; }
#wc-ppcp-credit-card-gateway-cc-form .form-row > label {
	display: flex; align-items: center; gap: 4px; white-space: nowrap; margin: 0 0 6px; padding: 0; line-height: 1.2;
	font-family: var(--hog-display); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
#wc-ppcp-credit-card-gateway-cc-form .form-row > label .required { color: var(--hog-pink); text-decoration: none; }
#wc-ppcp-credit-card-gateway-cc-form div[id^="zoid-paypal-card"] {
	background: #fff; border: 2px solid #2a2a31; border-radius: 0; height: 48px; overflow: hidden; box-sizing: border-box;
}
#wc-ppcp-credit-card-gateway-cc-form div[id^="zoid-paypal-card"] iframe { height: 44px !important; display: block; }
#wc-ppcp-credit-card-gateway-cc-form .form-row.woocommerce-invalid div[id^="zoid-paypal-card"] { border-color: #ff3b7a; }
@media (max-width: 400px) {
	#wc-ppcp-credit-card-gateway-cc-form .form-row > label { font-size: .66rem; letter-spacing: .06em; }
}


/* 2.80.0: on phones the payment option kept 56px of right padding (room for the
   radio dot) for its whole body, so the card form was squeezed to 216px and the
   labels wrapped. The dot's clearance now belongs to the header label only. */
@media (max-width: 640px) {
	#payment ul.wc_payment_methods { padding-left: 12px; padding-right: 12px; }
	#payment ul.wc_payment_methods li.wc_payment_method { padding-left: 14px; padding-right: 14px; }
	#payment ul.wc_payment_methods li.wc_payment_method > label { padding-right: 40px; }
	#payment .payment_box { width: 100%; }
}

/* 2.81.0: equal columns for expiry and CVV (the nowrap label was forcing the
   grid), and PayPal's wrapper div gets a fixed height it cannot inflate. */
#wc-ppcp-credit-card-gateway-cc-form .form-row { min-width: 0; }
#wc-ppcp-credit-card-gateway-cc-form div[id^="zoid-paypal-card"] { height: 48px !important; }


/* 2.82.0 (mobile sweep, 2026-09-10 night, measured at 375px as a visitor):
   1. breeder profile stat tiles were 221px + 118px in a 279px box, so the
      second tile ran 14px off the right edge;
   2. chips, badges, filter headings and stat captions sat at 10.2 to 11.5px;
   3. footer links were 19px tall, a poor thumb target. */
@media (max-width: 640px) {
	.hog-stats--breeder { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.hog-stats--breeder > div { min-width: 0; }
	.hog-card li, .hog-chip-loc, .hog-badge, .hog-facet h3, .hog-stat small, .hog-statband small,
	.hog-breederlink, .hog-card-farm, .hog-chips li, .hog-pigchips li { font-size: 12px !important; }
	.site-footer a, footer a, .footer-widget-area a { display: inline-block; padding: 6px 0; }
}


/* 2.83.0 (mobile audit): M02 the Conversation cell on My purchases kept a
   300px minimum and a side-by-side label, crushing the reply box and wrapping
   SEND REPLY letter by letter; M06 the Feedback panel in landscape was taller
   than the screen with no internal scroll. */
@media (max-width: 782px) {
	.hog-inquiries td[data-l="Conversation"], .hog-mylistings td[data-l="Conversation"] { display: block; min-width: 0 !important; text-align: left; }
	.hog-inquiries td[data-l="Conversation"]::before, .hog-mylistings td[data-l="Conversation"]::before { display: block; margin-bottom: 6px; }
	.hog-thread, .hog-reply, .hog-inquiries form, .hog-mylistings form { width: 100%; min-width: 0; }
	.hog-inquiries textarea, .hog-mylistings textarea { width: 100% !important; min-height: 96px; font-size: 16px; box-sizing: border-box; }
	.hog-inquiries button, .hog-mylistings button, .hog-inquiries .hog-btn, .hog-mylistings .hog-btn { white-space: nowrap; width: auto; min-width: 9em; }
}
.hog-bugbox { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
@media (max-height: 500px) { .hog-bugbox { top: 12px; bottom: 12px; transform: none; } .hog-bugtab.hog-bugtab--min { width: 24px; height: 24px; } }

/* ===== 3.7.0 radius search: "Near you" in the rail, distance chips, [hogmatch_near] (2026-09-11) ===== */
.hog-facet--form select {
	width: 100%; background: var(--hog-ink); color: #fff;
	border: 1px solid var(--hog-line); border-radius: 0;
	padding: 9px 30px 9px 10px !important; font: inherit; font-size: 15px;
	/* the .woocommerce select rule above forces a 1.2 line height and a 46px
	   minimum; the rail's text inputs are 44px, so the menu is sized to match */
	line-height: 1.6 !important; min-height: 0 !important; height: auto !important;
	color-scheme: dark; box-sizing: border-box; min-width: 0; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239A9AA5' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px;
}
.hog-facet--form select:focus { outline: 2px solid var(--hog-pink); outline-offset: 1px; }
/* the near pair carries captions above each box, like the born-between pair */
.hog-facet__near label { position: static; }
.hog-facet__near .hog-facet__cap {
	position: static; transform: none; display: block;
	margin: 0 0 4px; font-size: .74rem; letter-spacing: .06em;
	text-transform: uppercase; color: var(--hog-mute); pointer-events: auto;
}
.hog-facet__geo {
	display: block; width: 100%; box-sizing: border-box; margin-top: 8px; cursor: pointer;
	background: none; border: 1px dashed var(--hog-line); border-radius: 0; color: var(--hog-mute);
	font: inherit; font-size: .84rem; padding: 8px 10px; text-align: left;
}
.hog-facet__geo::before { content: "\25CE"; margin-right: 6px; color: var(--hog-pink); }
.hog-facet__geo:hover { color: #fff; border-color: var(--hog-pink); }
.hog-facet__geo[disabled] { cursor: wait; opacity: .7; }
.hog-chips li.hog-chip-dist { border-color: var(--hog-pink); color: #fff; background: rgba(255,0,130,.14); }
.hog-near-note {
	margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--hog-pink);
	background: var(--hog-ink-2); color: #fff;
}
/* [hogmatch_near] on a content page: same controls, room to breathe */
.hog-near { max-width: 520px; margin: 0 auto; border-top: 0; padding-top: 0; }
.hog-near h3 { margin: 0 0 10px; }
.hog-near .hog-facet__pair { display: flex; gap: 10px; }
.hog-near .hog-facet__pair label { flex: 1 1 0; min-width: 0; display: block; }
.hog-near input[type="text"], .hog-near select { padding-top: 12px; padding-bottom: 12px; font-size: 16px; }
.hog-near .hog-btn { display: block; margin-top: 12px; width: 100%; box-sizing: border-box; text-align: center; }
@media (max-width: 767px) { .hog-facet--form select { font-size: 16px; } }

/* ===== 3.7.1 live launch audit, mobile and clarity items (2026-09-11) ===== */
/* radius rail: the miles menu must show its longest label on a 320px phone */
@media (max-width: 380px) {
	.hog-facet__near { display: block; }
	.hog-facet__near label { display: block; margin-bottom: 8px; }
	.hog-facet__near label:last-child { margin-bottom: 0; }
}
.hog-facet__help { margin: 8px 0 0; font-size: .8rem; line-height: 1.45; color: var(--hog-mute); }
/* breeder draft actions: real tap targets, spaced apart */
@media (max-width: 782px) {
	.hog-mylistings td.hog-manage .hog-manage__link { display: inline-block; padding: 9px 12px; margin: 3px 8px 3px 0; min-height: 40px; box-sizing: border-box; border: 1px solid var(--hog-line); }
}
/* 2.90.2: the phone rule above already lays the tab flat on the right with no
   rotation; the earlier rotate(180deg) here turned it upside down (Shaun's iPhone). */
@media (max-width: 480px) {
	.hog-bugtab { transform: none; }
}