/**
 * Product Category archive (WooCommerce product_cat)
 *
 * STANDALONE, HAND-AUTHORED PLAIN CSS — DO NOT ADD TO css/tailwind.css.
 * This file is enqueued directly by blocks_product_category_styles() in functions.php
 * and is intentionally kept outside the PostCSS/Tailwind pipeline so the page can be
 * edited without running `npm run build`. No @apply / @screen / Tailwind classes here.
 *
 * Markup: woocommerce/taxonomy-product_cat.php
 * Design: Figma "Ichinen_premium-forks_redesign" (4505:426) + mobile v2 (4611:1507)
 */

.ich-pc {
	/* Design tokens lifted from the Figma file */
	--ich-pc-red: #f70000;
	--ich-pc-red-deep: #c8102e;
	--ich-pc-red-btn: #d6002c;
	--ich-pc-hero-bg: #141414;
	--ich-pc-surface: #f4f4f5;
	--ich-pc-white: #ffffff;
	--ich-pc-black: #000000;
	--ich-pc-text: #222222;
	--ich-pc-text-soft: #6b6b6b;
	--ich-pc-muted: #9a9a9a;
	--ich-pc-label: #8a8a8a;
	--ich-pc-hero-body: #cfcfcf;
	--ich-pc-border: #ededed;
	--ich-pc-border-soft: #ececec;
	--ich-pc-border-card: #e8e8e8;
	--ich-pc-border-control: #e3e3e3;

	--ich-pc-font: "Open Sans", sans-serif;

	--ich-pc-max: 1312px;   /* 272 sidebar + 32 gap + 1008 main */
	--ich-pc-gutter: 64px;

	font-family: var(--ich-pc-font);
	background: var(--ich-pc-surface);
}

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

/* The theme's base typography sets `section { font-size: 1.125rem; line-height: 1.75 }`.
   Neutralise it inside this page so the design's "leading: normal" metrics hold. */
.ich-pc section {
	font-family: var(--ich-pc-font);
	font-size: 16px;
	line-height: normal;
}

.ich-pc p {
	margin: 0;
}

/* Reset only this page's own lists. A blanket `.ich-pc ul` reset would both strip
   list styling from WYSIWYG hero copy and out-specify the component rules below. */
.ich-pc-badges,
.ich-pc-nav,
.ich-pc-nav__children,
.ich-pc-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ich-pc a {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.ich-pc-hero {
	background: var(--ich-pc-hero-bg);
	overflow: hidden;
	/* The theme header is position:fixed, so the hero has to clear it. The custom
	   property is set from the header's real height by the inline script in
	   woocommerce/taxonomy-product_cat.php; the literals are the no-JS fallback. */
	padding-top: var(--ich-pc-header-h, 115px);
}

@media (min-width: 768px) {
	.ich-pc-hero {
		padding-top: var(--ich-pc-header-h, 130px);
	}
}

@media (min-width: 1280px) {
	.ich-pc-hero {
		padding-top: var(--ich-pc-header-h, 150px);
	}
}

.ich-pc-hero__inner {
	display: flex;
	align-items: stretch;
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
}

.ich-pc-hero__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 22px;
	min-width: 0;
	padding: 60px 48px 60px var(--ich-pc-gutter);
	position: relative;
	z-index: 2;
}

.ich-pc-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: normal;
}

.ich-pc-hero__breadcrumb a,
.ich-pc-hero__breadcrumb span {
	color: var(--ich-pc-muted);
	font-weight: 400;
}

.ich-pc-hero__breadcrumb a:hover {
	color: var(--ich-pc-white);
}

.ich-pc-hero__breadcrumb .ich-pc-hero__breadcrumb-current {
	color: var(--ich-pc-red);
	font-weight: 600;
}

.ich-pc-hero__title {
	margin: 0;
	padding: 0;
	color: var(--ich-pc-white);
	font-family: var(--ich-pc-font);
	font-size: 48px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
}

.ich-pc-hero__rule {
	display: block;
	width: 64px;
	height: 4px;
	background: var(--ich-pc-red);
}

.ich-pc-hero__text {
	color: var(--ich-pc-hero-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

/* The design measures body copy at 440px. Capping the children rather than the
   wrapper lets a hand-authored badge row (below) use the full hero width. */
.ich-pc-hero__text > * {
	max-width: 440px;
}

.ich-pc-hero__text > .ich-pc-badges {
	max-width: none;
}

.ich-pc-hero__text p {
	margin: 0 0 0.75em;
}

.ich-pc-hero__text p:last-child {
	margin-bottom: 0;
}

.ich-pc-hero__text a {
	color: var(--ich-pc-white);
	text-decoration: underline;
}

/* Feature badges.
 *
 * No longer emitted by the template — these are authored per category in the
 * "Hero Text" WYSIWYG field. The styles and the 24x24 icons in
 * css/img/product-category/ are kept so that markup can reproduce the design:
 *
 *   <ul class="ich-pc-badges">
 *     <li class="ich-pc-badge">
 *       <img class="ich-pc-badge__icon skip-lazy" src="/wp-content/themes/base-blocks-theme-master/css/img/product-category/badge-heat-treated.svg" width="24" height="24" alt="">
 *       <span class="ich-pc-badge__label">100% Heat Treated Steel</span>
 *     </li>
 *     ...
 *   </ul>
 */

.ich-pc-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 30px;
	padding-top: 12px;
}

.ich-pc-badge {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ich-pc-badge__icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}

.ich-pc-badge__label {
	max-width: 120px;
	color: var(--ich-pc-white);
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
}

/* Hero image + gradient scrim */

.ich-pc-hero__media {
	position: relative;
	flex: 0 0 425px;
	width: 425px;
	align-self: stretch;
	min-height: 383px;
	overflow: hidden;
	pointer-events: none;
}

.ich-pc-hero__media img {
	position: absolute;
	top: 5.91%;
	left: 3.6%;
	width: 79.98%;
	height: 87.85%;
	max-width: none;
	object-fit: contain;
	object-position: center;
}

.ich-pc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--ich-pc-hero-bg) 0%,
		rgba(20, 20, 20, 0.15) 45%,
		rgba(20, 20, 20, 0) 100%
	);
}

/* ---------------------------------------------------------------------------
 * Catalog shell
 * ------------------------------------------------------------------------ */

.ich-pc-catalog {
	position: relative;
	background: var(--ich-pc-surface);
	padding: 48px var(--ich-pc-gutter) 64px;
	overflow: hidden;
}

.ich-pc-catalog__lines {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 480px;
	height: 423px;
	background-image: url("../img/product-category/catalog-lines.svg");
	background-repeat: no-repeat;
	background-size: 480px 423px;
	background-position: right bottom;
	pointer-events: none;
}

.ich-pc-catalog__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 32px;
	max-width: var(--ich-pc-max);
	margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * Category sidebar
 * ------------------------------------------------------------------------ */

.ich-pc-sidebar {
	flex: 0 0 272px;
	width: 272px;
	background: var(--ich-pc-white);
	border: 1.5px solid var(--ich-pc-border);
	border-radius: 14px;
	padding: 22px 18px 24px;
}

.ich-pc-sidebar__heading {
	display: block;
	padding: 0 0 4px 6px;
	color: var(--ich-pc-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.04px;
	text-transform: uppercase;
}

.ich-pc-sidebar__heading::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 14px;
	background: var(--ich-pc-border-soft);
}

.ich-pc-nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 6px;
}

.ich-pc-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 13px 11px 14px;
	border-radius: 9px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ich-pc-nav__label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	color: var(--ich-pc-text);
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
}

.ich-pc-nav__count {
	flex: 0 0 auto;
	color: var(--ich-pc-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
}

.ich-pc-nav__icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	object-fit: contain;
}

.ich-pc-nav__icon--empty {
	background: none;
}

.ich-pc-nav__link:hover {
	background: #f7f7f8;
}

/* Active top-level branch */
.ich-pc-nav__item--current > .ich-pc-nav__link,
.ich-pc-nav__item--ancestor > .ich-pc-nav__link,
.ich-pc-nav__item--current > .ich-pc-nav__link:hover,
.ich-pc-nav__item--ancestor > .ich-pc-nav__link:hover {
	background: var(--ich-pc-red);
}

.ich-pc-nav__item--current > .ich-pc-nav__link .ich-pc-nav__label,
.ich-pc-nav__item--ancestor > .ich-pc-nav__link .ich-pc-nav__label {
	color: var(--ich-pc-white);
	font-weight: 700;
}

.ich-pc-nav__item--current > .ich-pc-nav__link .ich-pc-nav__count,
.ich-pc-nav__item--ancestor > .ich-pc-nav__link .ich-pc-nav__count {
	color: var(--ich-pc-white);
}

/* Knock the uploaded category icon out to white on the active red row.
   brightness(0) flattens any source colour to black while preserving the alpha
   channel; invert(1) then takes that black to white. Works for both flat and
   multi-colour SVG/PNG icons without needing a second white asset. */
.ich-pc-nav__item--current > .ich-pc-nav__link .ich-pc-nav__icon,
.ich-pc-nav__item--ancestor > .ich-pc-nav__link .ich-pc-nav__icon {
	filter: brightness(0) invert(1);
}

/* Sub-categories — always expanded, no toggle */

.ich-pc-nav__children {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 3px;
	padding-left: 32px;
}

.ich-pc-nav__child {
	position: relative;
}

/* Bullet marker in the 32px indent gutter — red on the active sub-category.
   The design draws these as r=3 circles at cx=16 inside that gutter, which lines
   the dot up with the parent rows' icon column rather than left of it:
   32px indent - 16px centre - 3px radius = -19px. */
.ich-pc-nav__child::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -19px;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: var(--ich-pc-muted);
}

.ich-pc-nav__child.ich-pc-nav__item--current::before {
	background: var(--ich-pc-red);
}

.ich-pc-nav__child .ich-pc-nav__label,
.ich-pc-nav__child .ich-pc-nav__count {
	color: var(--ich-pc-muted);
}

.ich-pc-nav__child.ich-pc-nav__item--current .ich-pc-nav__label,
.ich-pc-nav__child.ich-pc-nav__item--current .ich-pc-nav__count {
	color: var(--ich-pc-red);
}

.ich-pc-nav__child.ich-pc-nav__item--current > .ich-pc-nav__link,
.ich-pc-nav__child.ich-pc-nav__item--current > .ich-pc-nav__link:hover {
	background: transparent;
}

/* ---------------------------------------------------------------------------
 * Catalog main column
 * ------------------------------------------------------------------------ */

.ich-pc-main {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.ich-pc-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ich-pc-toolbar__title {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ich-pc-toolbar__title h2 {
	margin: 0;
	padding: 0;
	color: var(--ich-pc-text);
	font-family: var(--ich-pc-font);
	font-size: 24px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
}

.ich-pc-toolbar__path {
	color: var(--ich-pc-text-soft);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}

.ich-pc-toolbar__path a {
	color: var(--ich-pc-text-soft);
	text-decoration: underline;
	text-underline-position: from-font;
}

.ich-pc-toolbar__path a:hover {
	color: var(--ich-pc-red);
}

/* Sort control (wraps WooCommerce's own ordering form) */

.ich-pc-toolbar__sort {
	flex: 0 0 auto;
}

.ich-pc-sort {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	padding: 11px 14px 11px 16px;
	background: var(--ich-pc-white);
	border: 1.5px solid var(--ich-pc-border-control);
	border-radius: 8px;
}

.ich-pc-sort__label {
	color: var(--ich-pc-text);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
}

.ich-pc-sort__go {
	padding: 0 8px;
	border: 0;
	background: var(--ich-pc-red);
	color: var(--ich-pc-white);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.ich-pc-sort select {
	margin: 0;
	padding: 0 21px 0 0;
	height: auto;
	min-height: 0;
	max-width: none;
	width: auto;
	background-color: transparent;
	background-image: url("../img/product-category/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 13px 13px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--ich-pc-text);
	font-family: var(--ich-pc-font);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ich-pc-sort select:focus {
	outline: 2px solid var(--ich-pc-red);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Product grid
 * ------------------------------------------------------------------------ */

.ich-pc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.ich-pc-card {
	display: flex;
	background: var(--ich-pc-white);
	border: 1px solid var(--ich-pc-border-card);
	border-radius: 12px;
	overflow: hidden;
}

.ich-pc-card__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-height: 442px;
	/* Floor for the gap above the image, for titles that still run long */
	padding-top: 16px;
	transition: box-shadow 0.2s ease;
}

.ich-pc-card:hover {
	border-color: var(--ich-pc-muted);
}

.ich-pc-card:hover .ich-pc-card__link {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ich-pc-card__media {
	position: relative;
	width: 100%;
	max-width: 273px;
	height: 255px;
	flex: 0 0 255px;
	background: var(--ich-pc-white);
}

.ich-pc-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center;
	box-shadow: none;
}

/* Must not grow: the card is bottom-justified, so any slack belongs above the
   image (as in the design) rather than pooling under "View details". */
.ich-pc-card__body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 18px 18px 20px;
}

.ich-pc-card__title {
	margin: 0;
	padding: 0;
	/* Two lines, as every title is in the design. Keeps every body the same
	   height so the images line up across a row. */
	min-height: 44px;
	color: var(--ich-pc-black);
	font-family: var(--ich-pc-font);
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	overflow-wrap: anywhere;
}

.ich-pc-card__price {
	color: var(--ich-pc-red);
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
}

.ich-pc-card__price .woocommerce-Price-amount,
.ich-pc-card__price .amount,
.ich-pc-card__price bdi,
.ich-pc-card__price del,
.ich-pc-card__price ins {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	background: none;
}

.ich-pc-card__price del {
	opacity: 0.55;
	margin-right: 6px;
}

.ich-pc-card__more {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 2px;
	color: var(--ich-pc-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
}

.ich-pc-card__more svg {
	display: block;
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.ich-pc-card:hover .ich-pc-card__more {
	color: var(--ich-pc-red);
}

.ich-pc-card:hover .ich-pc-card__more svg {
	transform: translateX(3px);
}

.ich-pc-empty {
	padding: 32px 0;
	color: var(--ich-pc-text-soft);
	font-size: 16px;
}

/* Pagination */

.ich-pc-main .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.ich-pc-main .woocommerce-pagination li {
	margin: 0;
	border: 0;
}

.ich-pc-main .woocommerce-pagination .page-numbers {
	display: block;
	min-width: 40px;
	padding: 9px 12px;
	background: var(--ich-pc-white);
	border: 1.5px solid var(--ich-pc-border-control);
	border-radius: 8px;
	color: var(--ich-pc-text);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.ich-pc-main .woocommerce-pagination .page-numbers.current,
.ich-pc-main .woocommerce-pagination a.page-numbers:hover {
	background: var(--ich-pc-red);
	border-color: var(--ich-pc-red);
	color: var(--ich-pc-white);
}

/* ---------------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------------ */

.ich-pc-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 96px 32px;
	background: var(--ich-pc-black);
	text-align: center;
}

.ich-pc-cta__title {
	margin: 0;
	padding: 0;
	color: var(--ich-pc-white);
	font-family: var(--ich-pc-font);
	font-size: 36px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
}

.ich-pc-cta__text {
	max-width: 720px;
	color: var(--ich-pc-white);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
}

.ich-pc-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	background: var(--ich-pc-red-btn);
	color: var(--ich-pc-white);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	transition: background-color 0.15s ease;
}

.ich-pc-cta__button:hover {
	background: var(--ich-pc-red);
	color: var(--ich-pc-white);
}

/* ---------------------------------------------------------------------------
 * Tablet — sidebar stacks, grid drops to 2 columns
 * ------------------------------------------------------------------------ */

@media (max-width: 1279px) {
	.ich-pc {
		--ich-pc-gutter: 40px;
	}

	.ich-pc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.ich-pc-hero__inner {
		align-items: stretch;
	}

	.ich-pc-hero__media {
		flex-basis: 320px;
		width: 320px;
		min-height: 0;
	}

	.ich-pc-hero__title {
		font-size: 40px;
	}

	.ich-pc-catalog__inner {
		flex-direction: column;
	}

	.ich-pc-sidebar {
		flex: 0 0 auto;
		width: 100%;
	}

	.ich-pc-main {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile — matches "Mobile - Ichinen_premium-forks_redesign v2" (390px)
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ich-pc {
		--ich-pc-gutter: 20px;
	}

	/* Hero: image sits behind the copy at low opacity */
	.ich-pc-hero__inner {
		display: block;
		position: relative;
	}

	.ich-pc-hero__content {
		gap: 13px;
		padding: 32px 20px 15px;
	}

	.ich-pc-hero__breadcrumb {
		font-size: 13px;
	}

	.ich-pc-hero__breadcrumb .ich-pc-hero__breadcrumb-current {
		color: var(--ich-pc-muted);
		font-weight: 400;
	}

	.ich-pc-hero__title {
		font-size: 36px;
	}

	.ich-pc-hero__text {
		max-width: none;
		font-size: 13px;
	}

	.ich-pc-hero__media {
		position: absolute;
		top: 98px;
		left: 39%;
		right: 0;
		bottom: auto;
		z-index: 1;
		width: 251px;
		max-width: 64%;
		height: 226px;
		min-height: 0;
		flex: none;
		opacity: 0.51;
	}

	.ich-pc-badges {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 0;
		width: 100%;
	}

	.ich-pc-badge {
		padding: 10px 12px;
		border-radius: 10px;
	}

	.ich-pc-badge__label {
		max-width: none;
	}

	/* Catalog: title first, then the category list, then sort, then the cards */
	.ich-pc-catalog {
		padding: 24px 20px 32px;
	}

	.ich-pc-catalog__lines {
		display: none;
	}

	.ich-pc-catalog__inner {
		flex-direction: column;
		gap: 24px;
	}

	.ich-pc-sidebar {
		order: 2;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}

	/* Flatten the wrappers so the whole catalog re-orders per the mobile design:
	   title -> categories -> sort -> cards -> pagination */
	.ich-pc-main,
	.ich-pc-toolbar {
		display: contents;
	}

	.ich-pc-toolbar__title {
		order: 1;
		gap: 8px;
		width: 100%;
	}

	.ich-pc-toolbar__sort {
		order: 3;
		width: 100%;
	}

	.ich-pc-grid {
		order: 4;
	}

	.ich-pc-main .woocommerce-pagination {
		order: 5;
		width: 100%;
	}

	.ich-pc-sidebar__heading {
		padding: 0;
		margin-bottom: 12px;
		color: var(--ich-pc-text);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0;
	}

	.ich-pc-sidebar__heading::after {
		display: none;
	}

	.ich-pc-nav {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-top: 0;
	}

	.ich-pc-nav__link {
		padding: 12px 14px;
		background: var(--ich-pc-white);
		border: 1.5px solid var(--ich-pc-border);
		border-radius: 10px;
	}

	.ich-pc-nav__children {
		gap: 8px;
		margin-top: 8px;
		padding-left: 0;
	}

	/* No bullet on mobile — sub-categories are indented pills */
	.ich-pc-nav__child::before {
		display: none;
	}

	.ich-pc-nav__child .ich-pc-nav__link {
		padding-left: 32px;
	}

	.ich-pc-nav__child.ich-pc-nav__item--current > .ich-pc-nav__link,
	.ich-pc-nav__child.ich-pc-nav__item--current > .ich-pc-nav__link:hover {
		background: var(--ich-pc-white);
	}

	.ich-pc-nav__child.ich-pc-nav__item--current .ich-pc-nav__label {
		font-weight: 700;
	}

	.ich-pc-sort {
		display: inline-flex;
		max-width: 100%;
	}

	.ich-pc-toolbar__title h2 {
		font-size: 24px;
	}

	/* Cards become horizontal rows */
	.ich-pc-grid {
		display: flex;
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}

	.ich-pc-card {
		border: 0;
		border-radius: 8px;
	}

	.ich-pc-card__link {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		min-height: 0;
		width: 100%;
		padding: 12px 10px;
	}

	.ich-pc-card:hover .ich-pc-card__link {
		box-shadow: none;
	}

	.ich-pc-card__media {
		flex: 0 0 100px;
		width: 100px;
		max-width: 100px;
		height: 100px;
		border-radius: 8px;
		overflow: hidden;
	}

	.ich-pc-card__body {
		gap: 6px;
		width: auto;
		min-width: 0;
		flex: 1 1 auto;
		padding: 0;
	}

	.ich-pc-card__title {
		min-height: 0;
		color: var(--ich-pc-text);
		font-size: 14px;
		line-height: 18px;
	}

	.ich-pc-card__price {
		color: var(--ich-pc-text);
		font-size: 14px;
	}

	.ich-pc-card__more {
		padding-top: 0;
		gap: 6px;
		color: var(--ich-pc-red-deep);
		font-size: 13px;
	}

	.ich-pc-card:hover .ich-pc-card__more {
		color: var(--ich-pc-red-deep);
	}

	.ich-pc-card__more svg {
		width: 13px;
		height: 13px;
		flex: 0 0 13px;
	}

	/* CTA */
	.ich-pc-cta {
		gap: 24px;
		padding: 48px 20px;
	}

	.ich-pc-cta__title {
		font-size: 24px;
	}

	.ich-pc-cta__text {
		font-size: 14px;
	}

	.ich-pc-cta__button {
		font-size: 16px;
		padding: 12px 24px;
	}
}

@media (max-width: 380px) {
	.ich-pc-badges {
		grid-template-columns: minmax(0, 1fr);
	}
}