/* =========================================================================
   Product list page (WooCommerce product_cat archive)
   Spec: docs/superpowers/specs/2026-07-20-product-list-page-design.md

   HOW THIS PAGE RELATES TO THE REST OF THE SITE
   ---------------------------------------------------------------------
   Consistent — inherited straight from the design system in style.css:
     brand blue --yk-brand / --yk-brand-hover / --yk-brand-wash
     Poppins via --yk-font
     card shell: #fff, 1px solid var(--yk-border), 12px radius,
                 flat at rest + blue-tinted hover lift (--yk-shadow-hover)
     --yk-radius-sm on tags and the Apply button; the 900/600 breakpoint pair

   TYPE — aligned to the site's scale on 2026-07-21. See
   docs/superpowers/specs/2026-07-21-typography-scale.md for the derivation
   and the evidence behind each step:
     page title  clamp(30px,3vw,36px)/700   panel heading 18/600
     lead copy   16/1.6                      group heading 16/600
     body        15/1.4                      meta          13-14/400-500
     pill        12/500/1.2                  CTA           14/600
   Every heading here declares its own line-height on purpose: the parent sets
   body { line-height: 24px } (elect4u/style.css:34) and the child never
   overrides it, so an undeclared heading gets a fixed 24px line box.

   Form controls: the search field uses --yk-radius-md (8px, as drawn — not a
   pill); the custom checkbox is 3px. The child theme has no base input styling
   to inherit from, so every control is styled here.

   Deliberately DIFFERENT — scoped to this page only. If these are ever
   adopted site-wide, these three are the complete list to promote out:
     1. Card titles are --yk-brand (navy); the system puts charcoal
        --yk-heading on h3-h6 and on the PDP's related-product cards.
        (Precedent does exist: .feature-box-title style.css:4994 is a navy
        card title.)
     2. Filter group headings are also --yk-brand — approved 2026-07-21 as an
        extension of #1, because the sidebar is otherwise entirely uncoloured.
     3. .yk-plp-card-cta is Title Case, no arrow, 6px radius. The site's
        .yk-btn is UPPERCASE, .08em tracking, FontAwesome arrow, 4px.
        .yk-btn is untouched — this is an additional variant, not a change.

   New components with no precedent: .yk-plp-chip, .yk-plp-filters,
   .yk-plp-tag, .yk-plp-toolbar.

   One page-local colour is declared below (--yk-plp-chip-bg) because the
   mockup's inactive chip is a neutral grey and every system tint is
   blue. Everything else resolves to a --yk-* token.
   ========================================================================= */

.yk-plp {
	/* 1600, not the PDP's 1400: at 1400 the seven chips are only ~184px wide, so
	   "Chemical Resistant Gloves" breaks onto three lines while "Dispensers"
	   takes one, and the card spec line wraps mid-value ("8 mil & / above").
	   1600 is still narrower than the mockup's ~1720 canvas but restores the
	   drawn rhythm. See the spec's Container width note. */
	--yk-plp-max: 1600px;
	--yk-plp-gutter: 20px;
	--yk-plp-chip-bg: #f1f2f4;

	font-family: var(--yk-font);
	color: var(--yk-text);
}

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

/* The parent theme's reset sets `outline: 0` on `a`, so every link-shaped
   control here needs its focus ring restored explicitly. A colour swap alone is
   not a focus indicator: chip hover moves #f1f2f4 -> #eef4fb (1.01:1) and the
   CTA moves #223e95 -> #1a2f70 (1.31:1), both far below the 3:1 WCAG 2.4.11
   wants. Applied to :focus-visible so mouse users see nothing. */
.yk-plp a:focus-visible,
.yk-plp button:focus-visible,
.yk-plp input:focus-visible,
.yk-plp [tabindex]:focus-visible {
	outline: 2px solid var(--yk-brand);
	outline-offset: 2px;
}

.yk-plp .yk-plp-chip.is-active:focus-visible,
.yk-plp .yk-plp-card-cta:focus-visible {
	outline-color: var(--yk-heading);
}

.yk-plp-count:focus {
	outline: none;
}

.yk-plp-count:focus-visible {
	outline: 2px solid var(--yk-brand);
	outline-offset: 4px;
}

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

.yk-plp-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(100deg, #fff 0%, #fff 38%, var(--yk-brand-wash) 100%);
}

.yk-plp-hero-art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
	background-size: cover;
	background-position: center;
	opacity: 0.22;
	filter: saturate(0.4) brightness(1.2);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
	pointer-events: none;
}

.yk-plp-hero-inner {
	position: relative;
	z-index: 1;
	max-width: var(--yk-plp-max);
	margin: 0 auto;
	padding: 30px var(--yk-plp-gutter) 44px;
}

/* A category with no description would otherwise leave the title floating in a
   tall empty band. */
.yk-plp-hero.has-no-desc .yk-plp-hero-inner {
	padding-bottom: 30px;
}

/* Breadcrumb — Yoast's markup, restyled. Suppressed in header.php on these
   pages so it renders here, inside the hero, as the mockup shows. */
.yk-plp-breadcrumb .breadcrumbs {
	margin: 0 0 18px;
}

.yk-plp-breadcrumb #breadcrumbs {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--yk-text-faint);
}

.yk-plp-breadcrumb #breadcrumbs a {
	color: var(--yk-text-label);
	text-decoration: none;
}

.yk-plp-breadcrumb #breadcrumbs a:hover,
.yk-plp-breadcrumb #breadcrumbs a:focus {
	color: var(--yk-brand);
}

.yk-plp-breadcrumb #breadcrumbs .breadcrumb_last {
	color: var(--yk-heading);
	font-weight: 600;
}

/* clamp(30px, 3vw, 36px) — aligned to the site rather than to the mockup's
   ~52px. 36px matches the compliance page h1, the largest real page title on
   the site; 30px is the base h1 token (style.css:147). 700 + --yk-brand are
   already canonical for this role.
   letter-spacing is declared, not inherited: the parent sets
   body { letter-spacing: 1px } (elect4u/style.css:36) which the child never
   overrides, and +1px on a 36px heading is very visible. */
.yk-plp-title {
	margin: 0 0 14px;
	font-family: var(--yk-font);
	font-size: clamp(30px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--yk-brand);
}

/* 16/1.6 — the site's lead-paragraph pattern (.info-cell p style.css:5230,
   .cleanshield-desc style.css:4663). 1.6 is the uncontested body line-height
   across every redesigned surface; 1.75 had no precedent. */
.yk-plp-hero-desc {
	max-width: 640px;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--yk-text);
}

.yk-plp-hero-desc p {
	margin: 0 0 8px;
}

.yk-plp-hero-desc p:last-child {
	margin-bottom: 0;
}

/* ---------- Subcategory chips ------------------------------------------ */

.yk-plp-chips {
	max-width: var(--yk-plp-max);
	margin: 0 auto;
	padding: 26px var(--yk-plp-gutter) 0;
}

.yk-plp-chips-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-plp-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 88px;
	height: 100%;
	padding: 16px 15px;
	border-radius: var(--yk-radius-md);
	background: var(--yk-plp-chip-bg);
	color: var(--yk-brand);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.yk-plp-chip:hover,
.yk-plp-chip:focus {
	background: var(--yk-brand-wash);
	color: var(--yk-brand);
}

.yk-plp-chip-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.yk-plp-chip-icon svg {
	display: block;
	width: 32px;
	height: 32px;
}

/* 13px is the site's dominant meta step (18 declarations) and is already what
   this file uses for the breadcrumb and the card spec line. */
.yk-plp-chip-label {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--yk-heading);
}

.yk-plp-chip.is-active,
.yk-plp-chip.is-active:hover,
.yk-plp-chip.is-active:focus {
	background: var(--yk-brand);
	color: #fff;
}

.yk-plp-chip.is-active .yk-plp-chip-label {
	color: #fff;
}

/* ---------- Layout ----------------------------------------------------- */

.yk-plp-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
	max-width: var(--yk-plp-max);
	margin: 0 auto;
	padding: 34px var(--yk-plp-gutter) 80px;
}

.yk-plp-main {
	min-width: 0;
}

/* ---------- Filter sidebar --------------------------------------------- */

/* The parent theme's Customizer prints `button:hover, button:focus { … }`
   inline AFTER every enqueued sheet. That is (0,1,1), so a bare
   `.yk-plp-filters-toggle` (0,1,0) loses and the button sticks in the old
   #0260C5 after a tap. `.yk-plp` prefix + explicit states outrank it. */
.yk-plp .yk-plp-filters-toggle {
	display: none;
	width: 100%;
	padding: 12px 18px;
	border: 1px solid var(--yk-border);
	border-radius: var(--yk-radius-md);
	background: #fff;
	font-family: var(--yk-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--yk-brand);
	cursor: pointer;
}

.yk-plp .yk-plp-filters-toggle:hover,
.yk-plp .yk-plp-filters-toggle:focus {
	background: var(--yk-brand-wash);
	border-color: var(--yk-brand);
	color: var(--yk-brand);
}

.yk-plp-filters {
	background: #fff;
	border: 1px solid var(--yk-border);
	border-radius: 12px;
	padding: 22px 24px 26px;
}

.yk-plp-filters-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--yk-border);
}

/* 18/600 — the site's panel-heading step, matching .footer-widget h3
   (style.css:5841), which is the same shape: a panel title above a list. */
.yk-plp-filters-title {
	margin: 0;
	font-family: var(--yk-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--yk-brand);
}

.yk-plp-clear {
	font-size: 14px;
	color: var(--yk-text-label);
	text-decoration: none;
	white-space: nowrap;
}

.yk-plp-clear:hover,
.yk-plp-clear:focus {
	color: var(--yk-brand);
	text-decoration: underline;
}

.yk-plp-facet {
	margin: 0;
	padding: 18px 0;
	border: 0;
	border-bottom: 1px solid var(--yk-border);
}

.yk-plp-facet:last-of-type {
	padding-bottom: 0;
	border-bottom: 0;
}

/* 600, matching the base heading weight (style.css:140) and every card/section
   title on the redesigned surfaces. line-height declared explicitly: the parent
   sets body { line-height: 24px } (elect4u/style.css:34) and the child never
   overrides it, so any heading without one gets a 24px line box — 1.5 on a 16px
   heading, looser than anything else on the site. */
.yk-plp-facet-title {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 13px;
	padding: 0;
	font-family: var(--yk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--yk-brand);
}

.yk-plp-facet-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-plp-facet-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yk-plp-facet-empty {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--yk-text-label);
}

.yk-plp-check {
	/* Positioned so the visually-hidden input stays inside the label instead of
	   escaping to the nearest positioned ancestor. */
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--yk-text);
	cursor: pointer;
}

.yk-plp-check input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.yk-plp-check-box {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: 1px solid var(--yk-table-head-border);
	border-radius: 3px;
	background: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.yk-plp-check input[type="checkbox"]:checked + .yk-plp-check-box {
	background: var(--yk-brand);
	border-color: var(--yk-brand);
}

.yk-plp-check input[type="checkbox"]:checked + .yk-plp-check-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.yk-plp-check input[type="checkbox"]:focus-visible + .yk-plp-check-box {
	outline: 2px solid var(--yk-brand);
	outline-offset: 2px;
}

.yk-plp-check:hover .yk-plp-check-box {
	border-color: var(--yk-brand);
}

/* A value the category offers but does not stock yet: kept visible so the list
   matches the agreed specification, but greyed and unclickable. */
.yk-plp-check.is-empty {
	color: var(--yk-text-faint);
	cursor: not-allowed;
}

.yk-plp-check.is-empty .yk-plp-check-box {
	background: var(--yk-border-faint);
	border-color: var(--yk-border);
}

.yk-plp-check.is-empty:hover .yk-plp-check-box {
	border-color: var(--yk-border);
}

.yk-plp .yk-plp-apply {
	width: 100%;
	margin-top: 18px;
	padding: 12px 18px;
	border: 0;
	border-radius: var(--yk-radius-sm);
	background: var(--yk-brand);
	color: #fff;
	font-family: var(--yk-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.yk-plp .yk-plp-apply:hover,
.yk-plp .yk-plp-apply:focus {
	background: var(--yk-brand-hover);
	color: #fff;
}

/* ---------- Toolbar ---------------------------------------------------- */

.yk-plp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
}

.yk-plp-count {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--yk-brand);
}

.yk-plp-search {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.yk-plp-search-label {
	font-size: 15px;
	color: var(--yk-text);
}

/* 8px, not a pill: the mockup's field has clearly straight sides with softly
   rounded corners. --yk-radius-md is the system's card/row radius. */
.yk-plp-search-field input[type="search"] {
	width: 230px;
	max-width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--yk-border);
	border-radius: var(--yk-radius-md);
	background: #fff;
	font-family: var(--yk-font);
	font-size: 14px;
	color: var(--yk-text);
	-webkit-appearance: none;
	appearance: none;
}

/* --yk-text-label, not --yk-text-faint: #9aa1a8 on white is 2.6:1, below the
   4.5:1 WCAG 1.4.3 minimum for 14px text. #6b7178 is 4.9:1. */
.yk-plp-search-field input[type="search"]::placeholder {
	color: var(--yk-text-label);
	opacity: 1;
}

.yk-plp-search-field input[type="search"]:focus {
	border-color: var(--yk-brand);
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 62, 149, 0.12);
}

/* ---------- Grid + cards ----------------------------------------------- */

.yk-plp-results {
	transition: opacity 0.15s ease;
}

.yk-plp-results.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

.yk-plp-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* No `padding: 0` here: the card IS this <li>, and `.yk-plp-grid > li` (0,1,1)
   would out-specify `.yk-plp-card` (0,1,0) and flatten its padding. The parent
   theme's reset already zeroes li padding, which .yk-plp-card then overrides. */
.yk-plp-grid > li {
	margin: 0;
	list-style: none;
}

.yk-plp-card {
	display: flex;
	flex-direction: column;
	padding: 18px 18px 22px;
	border: 1px solid var(--yk-border);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.yk-plp-card:hover {
	border-color: var(--yk-brand);
	box-shadow: var(--yk-shadow-hover);
	transform: translateY(-2px);
}

/* White and unpadded, as drawn: the product photo sits directly on the card and
   uses the full inner width. Only a product with no image at all gets a tinted
   well (.is-empty), so an absent image reads as a deliberate frame rather than
   a void — without putting a grey box around every real photo. */
.yk-plp-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: var(--yk-radius-md);
	background: #fff;
	color: var(--yk-text-faint);
	font-size: 12px;
	text-align: center;
}

.yk-plp-card-media.is-empty {
	background: var(--yk-border-faint);
}

.yk-plp-card-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.yk-plp-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 7px;
}

/* line-height declared so this 14px line does not inherit the parent's 24px
   body line box (1.71 — far looser than the 1.4-1.5 the site uses at this size). */
.yk-plp-card-sku {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--yk-text-label);
}

/* Two lines reserved so the spec line, tags and CTA start at the same height on
   every card in a row, whether the title runs to one line or two. */
/* 16/600/1.35 — inside the site's card-title band (.product-card-title and
   .feature-box-title 15/600, .yukco-pdp-card-title 17/600, .yk-doc-row-title
   clamp(15,1.6vw,18)/600). Weight 600 is unanimous across those.
   NOTE: the weight must be repeated on the anchor. The parent theme's Meyer
   reset (elect4u/style.css:37-97) lists `a` and sets font-weight: 400, which
   matches the anchor directly and beats inheritance from this h3 — so the
   weight declared here alone renders on an empty line box.
   Do not change 16px or 1.35 without updating min-height below: it hard-codes
   both to reserve two lines (see spec bug #18). */
.yk-plp-card-title {
	margin: 0;
	min-height: calc(2 * 1.35 * 16px);
	font-family: var(--yk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.yk-plp-card-title a {
	font-weight: 600;
	color: var(--yk-brand);
	text-decoration: none;
}

.yk-plp-card-title a:hover,
.yk-plp-card-title a:focus {
	color: var(--yk-brand-hover);
	text-decoration: none;
}

.yk-plp-card-spec {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--yk-text-label);
}

/* margin-top:auto pins the pills to the bottom of the card body, so the pill
   row and the CTA line up across a row regardless of how the text above wraps. */
.yk-plp-card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	margin-top: auto;
	padding: 0;
	padding-top: 12px;
	list-style: none;
}

.yk-plp-tag {
	margin: 0;
	padding: 5px 10px;
	border-radius: var(--yk-radius-sm);
	background: var(--yk-brand-wash);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--yk-brand);
	list-style: none;
}

/* Card CTA — page-local variant of the button system, see the banner above. */
.yk-plp-card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	min-width: 62%;
	margin-top: 18px;
	padding: 11px 26px;
	border-radius: 6px;
	background: var(--yk-brand);
	color: #fff;
	font-family: var(--yk-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.yk-plp-card-cta::after {
	content: none;
}

.yk-plp-card-cta:hover,
.yk-plp-card-cta:focus {
	background: var(--yk-brand-hover);
	color: #fff;
	text-decoration: none;
}

/* ---------- Empty state ------------------------------------------------ */

.yk-plp-empty {
	padding: 56px 24px;
	border: 1px solid var(--yk-border);
	border-radius: 12px;
	background: var(--yk-surface);
	text-align: center;
}

.yk-plp-empty-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--yk-brand);
}

.yk-plp-empty-text {
	margin: 0;
	font-size: 15px;
	color: var(--yk-text-label);
}

/* ---------- Pagination -------------------------------------------------
   Kept as rectangles: pagination is explicitly excluded from the button
   system by 2026-07-10-button-restyle-design.md.
   --------------------------------------------------------------------- */

.yk-plp-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.yk-plp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--yk-border);
	border-radius: var(--yk-radius-sm);
	background: #fff;
	font-size: 14px;
	color: var(--yk-text);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.yk-plp-pagination a.page-numbers:hover,
.yk-plp-pagination a.page-numbers:focus {
	border-color: var(--yk-brand);
	color: var(--yk-brand);
}

.yk-plp-pagination .page-numbers.current {
	background: var(--yk-brand);
	border-color: var(--yk-brand);
	color: #fff;
}

/* ---------- Responsive ------------------------------------------------- */

@media (max-width: 1199px) {
	.yk-plp-layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 28px;
	}

	.yk-plp-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.yk-plp-chips-track {
		grid-auto-columns: minmax(190px, 1fr);
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}

	.yk-plp-chips {
		overflow: hidden;
	}
}

@media (max-width: 900px) {
	.yk-plp-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-top: 26px;
	}

	/* Collapse only when JS is present to reopen it — .yk-plp--js is added by
	   js/yukco-product-list.js. Without JS the sidebar stays open at every
	   width, so the <noscript> Apply button remains reachable. */
	.yk-plp--js .yk-plp-filters-toggle {
		display: block;
	}

	.yk-plp--js .yk-plp-filters {
		display: none;
	}

	.yk-plp--js .yk-plp-filters.is-open {
		display: block;
	}

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

	.yk-plp-hero-art {
		width: 70%;
		opacity: 0.22;
	}
}

@media (max-width: 600px) {
	.yk-plp-hero-inner {
		padding-bottom: 32px;
	}

	.yk-plp-hero-desc {
		font-size: 15px;
	}

	.yk-plp-toolbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.yk-plp-search {
		width: 100%;
	}

	.yk-plp-search-field {
		flex: 1 1 auto;
	}

	.yk-plp-search-field input[type="search"] {
		width: 100%;
	}

	.yk-plp-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.yk-plp-card-cta {
		min-width: 100%;
	}
}