/* Pickering single product
   Navy #23408F, blue #0066B3, tint #F8FBFE, tint border #C9DBF2.
   Colour pairs checked against WCAG 2.1 AA. */

.pk-product {
	--pk-navy: #23408F;
	--pk-navy-dk: #1C306C;
	--pk-blue: #0066B3;
	--pk-tint: #F8FBFE;
	--pk-tint-br: #C9DBF2;
	--pk-line: #E7EAF0;
	--pk-text: #4E535F;
	--pk-muted: #64707F;
	max-width: 1520px;
	margin: 0 auto;
	padding: 20px 40px 72px;
	font-family: Roboto, Arial, sans-serif;
	color: var(--pk-text);
}

.pk-product :focus-visible {
	outline: 2px solid var(--pk-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- basket notices ----------------------------------------------------- */
.single-product .woocommerce-notices-wrapper .woocommerce-message,
.single-product .woocommerce-notices-wrapper .woocommerce-info,
.single-product .woocommerce-notices-wrapper .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 20px;
	padding: 14px 20px 14px 52px;
	background: #F8FBFE;
	border: 1px solid #C9DBF2;
	border-radius: 8px;
	color: #2D2D2D;
	font-size: 15px;
	line-height: 1.5;
	list-style: none;
}
.single-product .woocommerce-notices-wrapper .woocommerce-message::before,
.single-product .woocommerce-notices-wrapper .woocommerce-info::before,
.single-product .woocommerce-notices-wrapper .woocommerce-error::before {
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
	color: #23408F;
}
.single-product .woocommerce-notices-wrapper .woocommerce-error { background: #FDF6F6; border-color: #E8B4B4; }
.single-product .woocommerce-notices-wrapper .woocommerce-error::before { color: #B42318; }
/* Woo's clearfix wraps onto its own row in flex and pushes the content up. */
.single-product .woocommerce-notices-wrapper .woocommerce-message::after,
.single-product .woocommerce-notices-wrapper .woocommerce-info::after,
.single-product .woocommerce-notices-wrapper .woocommerce-error::after { display: none; content: none; }
/* Errors are a ul, one li per message. */
.single-product .woocommerce-notices-wrapper .woocommerce-error li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	width: 100%;
	margin: 0;
}
/* Woo focuses the notice on load for screen readers. It isn't clickable, so no ring. */
.single-product .woocommerce-notices-wrapper [tabindex="-1"]:focus,
.single-product .woocommerce-notices-wrapper [tabindex="-1"]:focus-visible { outline: none; }
.single-product .woocommerce-notices-wrapper .button {
	order: 2;
	float: none;
	margin: 0 0 0 auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 22px;
	border-radius: 6px;
	background: #0066B3;
	color: #fff;
	font-weight: 600;
}
.single-product .woocommerce-notices-wrapper .button:hover { background: #005494; color: #fff; }
.single-product .woocommerce-notices-wrapper .button:focus-visible {
	outline: 3px solid #1C306C;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* --- breadcrumb ---------------------------------------------------------- */
.pk-breadcrumb { font-size: 14px; color: var(--pk-muted); margin-bottom: 28px; }
.pk-breadcrumb a { color: var(--pk-muted); text-decoration: none; }
.pk-breadcrumb a:hover { color: var(--pk-blue); text-decoration: underline; }

/* --- grid ---------------------------------------------------------------- */
.pk-grid {
	display: grid;
	grid-template-columns: minmax(320px, 440px) minmax(0, 1fr) 340px;
	gap: 44px;
	align-items: start;
}
.pk-tabs-wrap { grid-column: 1 / 3; }

@media (max-width: 1200px) {
	.pk-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
	.pk-col-aside { grid-column: 1 / -1; }
	.pk-tabs-wrap { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.pk-product { padding: 24px 20px 56px; }
	.pk-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --- floats -------------------------------------------------------------- */
/* Woo floats the gallery and summary at 48%, which breaks the grid. */
.pk-col-gallery,
.pk-col-summary { float: none !important; width: auto !important; clear: both; }

.pk-col-summary { container: pk-summary / inline-size; }
.pk-col-gallery::after,
.pk-col-summary::after { content: ""; display: table; clear: both; }

/* --- gallery ------------------------------------------------------------- */
.pk-col-gallery { display: flex; flex-direction: column; }

.pk-col-gallery .woocommerce-product-gallery {
	float: none !important;
	clear: both;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border: 1px solid var(--pk-line);
	border-radius: 8px;
	overflow: hidden;
}
.pk-col-gallery .woocommerce-product-gallery__wrapper { margin: 0; width: 100%; }
.pk-col-gallery .woocommerce-product-gallery img { display: block; width: 100%; height: auto; }
.pk-col-gallery .flex-viewport { width: 100%; }

.pk-col-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.pk-col-gallery .flex-control-thumbs li { float: none !important; width: auto !important; margin: 0 !important; }
.pk-col-gallery .flex-control-thumbs img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border: 1px solid var(--pk-line);
	border-radius: 6px;
	opacity: 1;
}

/* --- technical link tiles ------------------------------------------------ */
.pk-tiles { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; clear: both; width: 100%; }

.pk-tile {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 16px 18px;
	background: var(--pk-tint);
	border: 1px solid var(--pk-tint-br);
	border-radius: 8px;
	color: var(--pk-navy);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}
.pk-tile:hover { background: #EEF5FC; border-color: #A9C8EA; color: var(--pk-navy-dk); }
.pk-tile__label { flex: 1; min-width: 0; }
.pk-tile__icon { width: 21px; height: 21px; flex: none; color: var(--pk-blue); }
.pk-tile__img { width: 21px; height: 21px; object-fit: contain; flex: none; }
.pk-tile__chev { width: 18px; height: 18px; flex: none; color: #6A7385; stroke-width: 2; }

/* --- summary ------------------------------------------------------------- */
.pk-rule { border: none; border-top: 1px solid #E4E8EF; margin: 20px 0; height: 0; background: none; }

.pk-title {
	margin: 0 0 10px;
	font-size: 31px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--pk-navy);
	text-wrap: pretty;
}

/* "Reed Relay" in the h1, smaller than the part number. */
.pk-title__type {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--pk-muted);
	white-space: nowrap;
}

.pk-shortdesc { font-size: 16px; line-height: 1.6; color: var(--pk-muted); }
.pk-shortdesc p { margin: 0 0 8px; }

.pk-price {
	margin-top: 0;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--pk-navy);
}
.pk-price .woocommerce-Price-currencySymbol { font-weight: 700; }
.pk-price del { font-size: 22px; color: var(--pk-muted); font-weight: 400; }

/* "Excl. Vat, Tax and Duties" sits inside .pk-price. */
.pk-price small,
.pk-price .woocommerce-price-suffix {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pk-muted);
}

/* --- stock --------------------------------------------------------------- */
.pk-stock {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 24px;
	padding: 18px 20px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.55;
}
.pk-stock strong { display: block; color: #2D2D2D; font-weight: 700; }
.pk-stock span { display: block; color: #5A6472; margin-top: 3px; }
.pk-stock a { color: var(--pk-blue); }
.pk-stock a:hover { color: #005494; }
.pk-stock__icon { width: 24px; height: 24px; flex: none; margin-top: 1px; stroke-width: 2; }
.pk-stock--in { background: #F1F8EE; border: 1px solid #D3E7C7; }
.pk-stock--in .pk-stock__icon { color: #4C8226; }
.pk-stock--out { background: var(--pk-tint); border: 1px solid var(--pk-tint-br); }
.pk-stock--out .pk-stock__icon { color: var(--pk-navy-dk); }

/* --- need more ----------------------------------------------------------- */
.pk-more {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 56px;
	margin-top: 10px;
	padding: 18px 20px;
	background: var(--pk-tint);
	border: 1px solid var(--pk-tint-br);
	border-radius: 8px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.pk-more:hover { background: #EEF5FC; border-color: #A9C8EA; }
.pk-more__icon { width: 24px; height: 24px; flex: none; color: var(--pk-navy-dk); stroke-width: 2; }
.pk-more__label { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--pk-navy-dk); }
.pk-more__sub { display: block; margin-top: 2px; font-weight: 400; color: #4E535F; }
.pk-more__cta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--pk-blue);
}
.pk-more__arrow { width: 16px; height: 16px; stroke-width: 2.2; }

/* --- key specs ----------------------------------------------------------- */
.pk-eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pk-navy);
	text-transform: uppercase;
	letter-spacing: .7px;
}
/* Astra's heading sizes win otherwise. */
.pk-product .pk-eyebrow { font-size: 17px !important; line-height: 1.3 !important; }
.pk-product .pk-h2 { font-size: 19px !important; line-height: 1.3 !important; }
.pk-product .pk-panel .pk-eyebrow { font-size: 13px !important; }

.pk-keyspecs { margin-top: 26px; }
.pk-keyspecs__grid {
	display: grid;
	grid-template-columns: repeat(var(--pk-cols, 4), minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.pk-keyspec { border: 1px solid var(--pk-line); border-radius: 8px; padding: 12px 14px; background: #fff; }
.pk-keyspec dt {
	font-size: 12px;
	color: var(--pk-muted);
	text-transform: uppercase;
	letter-spacing: .4px;
	line-height: 1.25;
	text-wrap: balance;
}
.pk-keyspec dd {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--pk-navy);
	line-height: 1.3;
	text-wrap: balance;
}

/* --- order options ------------------------------------------------------- */
.pk-order { margin-top: 28px; }
.pk-h2 { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--pk-navy); }
.pk-order__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pk-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #E1E6EF;
	border-radius: 10px;
	padding: 24px 22px;
	scroll-margin-top: 24px;
}
.pk-card h3 { margin: 0; font-size: 17px; font-weight: 700; color: #2D2D2D; }
.pk-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--pk-muted); }

.pk-cart { margin-top: auto; padding-top: 18px; }

.pk-qty { display: flex; align-items: center; border: 1px solid #CDD4E0; border-radius: 6px; overflow: hidden; height: 50px; width: max-content; }
.pk-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 44px;
	height: 100%;
	border: 0;
	background: #F7F9FC;
	color: var(--pk-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
/* The theme's button hover turns the text white. */
.pk-product .pk-qty__btn,
.pk-product .pk-qty__btn:hover,
.pk-product .pk-qty__btn:focus,
.pk-product .pk-qty__btn:active { color: var(--pk-text) !important; }
.pk-qty__btn:hover { background: #EDF1F7 !important; }
.pk-qty__btn:focus-visible { outline-offset: -3px; }
/* Rounded ends so the focus ring follows the stepper. */
.pk-product .pk-qty__btn[data-step="down"] { border-radius: 5px 0 0 5px; }
.pk-product .pk-qty__btn[data-step="up"] { border-radius: 0 5px 5px 0; }
.pk-qty__input {
	width: 56px;
	height: 100%;
	border: 0;
	text-align: center;
	font-size: 17px;
	color: #2D2D2D;
	-moz-appearance: textfield;
}
.pk-qty__input::-webkit-outer-spin-button,
.pk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Always in the page so role="status" reads it out when shown. */
.pk-qty__max { margin: 0 !important; }
.pk-product.is-max .pk-qty__max { margin: 10px 0 0 !important; }
.pk-qty__max [hidden] { display: none !important; }
.pk-qty__max-text { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--pk-text); }
/* Stops quick clicks on -/+ selecting text. */
.pk-qty, .pk-qty__max { -webkit-user-select: none; user-select: none; }
.pk-product.is-max .pk-qty__btn[data-step="up"],
.pk-product.is-max .pk-qty__btn[data-step="up"]:hover {
	background: #DDE2EA !important;
	color: #4E535F !important;
	cursor: not-allowed;
}
/* Unavailable card. Disabled controls are exempt from WCAG 1.4.3 and the
   reason line under the button explains it. */
.pk-product .pk-qty__btn:disabled,
.pk-product .pk-qty__btn:disabled:hover,
.pk-product .pk-qty__input:disabled {
	background: #F7F9FC !important;
	color: #B3BCC8 !important;
	-webkit-text-fill-color: #B3BCC8;
	opacity: 1;
	cursor: not-allowed;
}
.pk-product .pk-card--disabled .pk-qty { border-color: #E1E6EF; }

/* --- buttons ------------------------------------------------------------- */
.pk-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	margin-top: 12px;
	/* Theme padding and line-height push the label onto two lines. */
	padding: 12px 18px !important;
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2 !important;
	text-wrap: balance;
	text-decoration: none;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}
.pk-btn__icon { width: 19px; height: 19px; flex: none; }
.pk-btn--primary { border: 0; background: var(--pk-blue); color: #fff; }
.pk-btn--primary:hover { background: #005494; color: #fff; }
/* A blue ring wouldn't show on the blue button, so white gap and navy ring. */
.pk-product .pk-btn--primary:focus-visible {
	outline: 3px solid var(--pk-navy-dk);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}
/* Disabled. !important so the theme hover can't turn it blue again. */
.pk-product .pk-btn--primary:disabled,
.pk-product .pk-btn--primary:disabled:hover {
	background: #98A3B3 !important;
	color: #fff !important;
	border: 0;
	cursor: not-allowed;
}
.pk-card__reason {
	margin: 10px 0 0 !important;
	font-size: 14px !important;
	color: #2D2D2D !important;
}
.pk-btn--secondary { border: 1.5px solid var(--pk-navy); background: #fff; color: var(--pk-navy); }
.pk-btn--secondary:hover { background: var(--pk-tint); color: var(--pk-navy-dk); }
.pk-btn--ghost {
	min-height: 44px;
	margin-top: 18px;
	border: 1px solid #D4DAE6;
	background: #fff;
	color: var(--pk-navy);
	font-size: 14px;
	font-weight: 600;
}
.pk-btn--ghost:hover { background: var(--pk-tint); border-color: var(--pk-tint-br); }
.pk-btn--ghost + .pk-btn--ghost { margin-top: 10px; }

.pk-ticks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-ticks li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.4; color: #5A6472; }
.pk-tick { width: 15px; height: 15px; flex: none; color: #4C8226; stroke-width: 2.2; }

/* --- YITH Request a Quote ------------------------------------------------ */
.pk-yith-quote { margin-top: auto; padding-top: 14px; }
.pk-yith-quote .yith-ywraq-add-to-quote,
.pk-yith-quote .yith_ywraq_add_item_product_message,
.pk-yith-quote .yith-ywraq-add-button { margin: 0; }
.pk-yith-quote a.add-request-quote-button,
.pk-yith-quote button.add-request-quote-button,
.pk-yith-quote .yith-ywraq-add-to-quote a,
.pk-yith-quote .yith-ywraq-add-to-quote button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	margin: 12px 0 0;
	padding: 0 18px;
	border: 1.5px solid var(--pk-navy);
	border-radius: 6px;
	background: #fff;
	color: var(--pk-navy);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.pk-yith-quote a.add-request-quote-button:hover,
.pk-yith-quote button.add-request-quote-button:hover {
	background: var(--pk-tint);
	color: var(--pk-navy-dk);
	border-color: var(--pk-navy-dk);
}
.pk-yith-quote .yith-ywraq-add-to-quote .yith-ywraq-add-button.hide { display: none; }
.pk-yith-quote .yith_ywraq_add_item_response_message,
.pk-yith-quote .yith-ywraq-added-message {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--pk-blue);
}
/* Hide YITH's own icon. */
.pk-yith-quote a.add-request-quote-button img { display: none; }

/* --- secondary pills ----------------------------------------------------- */
.pk-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; align-items: stretch; }
.pk-secondary > * { min-width: 0; }

.pk-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	justify-self: stretch;
	box-sizing: border-box;
	height: auto;
	min-height: 52px;
	padding: 10px 16px !important;
	line-height: 1.35 !important;
	text-wrap: balance;
	background: var(--pk-tint);
	border: 1px solid var(--pk-tint-br);
	border-radius: 6px;
	color: var(--pk-blue);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.pk-pill:hover { background: #EEF5FC; border-color: #A9C8EA; color: #005494; }
.pk-pill__icon { width: 16px; height: 16px; flex: none; }
/* style.css sets 15px on .jump-to-distributor-tab. */
.pk-product .pk-secondary .pk-pill { font-size: 14px !important; }

.pk-secondary .jump-to-distributor-tab { margin-top: 0; }

/* --- compare tile ---------------------------------------------------------
   The link is 44px tall for the target size, so the tile padding is trimmed
   to keep it level with the other tiles. */
.pk-tile--compare { cursor: default; padding-top: 5px; padding-bottom: 5px; }
.pk-tile--compare .pk-tile__label a.pr-compare,
.pk-tile--compare .pk-tile__label a.compare {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0 !important;
	padding: 0;
	background: none;
	border: 0;
	color: var(--pk-navy);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.pk-tile--compare .pk-tile__label a:hover { color: var(--pk-navy-dk); text-decoration: underline; }
.pk-tile--compare input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--pk-blue); }
.pk-tile--compare .pr_yith_woocompare_clear { margin-left: 12px; font-size: 13px; color: var(--pk-muted); }

/* --- quality panel ------------------------------------------------------- */
.pk-panel { background: #fff; border: 1px solid var(--pk-line); border-radius: 10px; padding: 24px 22px; }
.pk-panel .pk-eyebrow { margin-bottom: 6px; }
.pk-quality { list-style: none; margin: 0; padding: 0; }
.pk-quality li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid #F1F3F7;
	font-size: 14px;
	line-height: 1.4;
}
.pk-quality__icon { width: 19px; height: 19px; flex: none; color: #6E80A3; stroke-width: 1.5; }

/* --- tabs ---------------------------------------------------------------- */
.pk-tabs-wrap { margin-top: 56px; background: #fff; border: 1px solid var(--pk-line); border-radius: 10px; padding: 0 30px; }
.pk-tabs-wrap .woocommerce-tabs { margin: 0; }
.pk-tabs-wrap .wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #EEF1F6;
}
/* Woo's own tab divider doubled up with ours. */
.woocommerce div.product .pk-tabs-wrap .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .pk-tabs-wrap .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .pk-tabs-wrap .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .pk-tabs-wrap .woocommerce-tabs ul.tabs li::after,
.pk-tabs-wrap .wc-tabs::before,
.pk-tabs-wrap .wc-tabs::after,
.pk-tabs-wrap .wc-tabs li::before,
.pk-tabs-wrap .wc-tabs li::after { display: none !important; border: 0 !important; }
.pk-tabs-wrap .wc-tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.pk-tabs-wrap .wc-tabs li a {
	display: block;
	padding: 18px 0;
	margin-bottom: -1px;
	font-size: 15px;
	font-weight: 400;
	color: var(--pk-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.pk-tabs-wrap .wc-tabs li a:hover { color: var(--pk-navy); }
.pk-tabs-wrap .wc-tabs li.active a { font-weight: 700; color: var(--pk-navy); border-bottom-color: var(--pk-navy); }
.pk-tabs-wrap .woocommerce-Tabs-panel { padding: 30px 0; max-width: 900px; font-size: 16px; line-height: 1.75; }
.pk-tabs-wrap .woocommerce-Tabs-panel > h2 { display: none; }

.pk-spectable { width: 100%; border-collapse: collapse; font-size: 15px; }
.pk-spectable th,
.pk-spectable td { padding: 12px 0; border-bottom: 1px solid #EEF1F6; text-align: left; vertical-align: top; }
.pk-spectable th { width: 42%; font-weight: 500; color: var(--pk-muted); }
.pk-spectable td { color: #2D2D2D; font-weight: 500; }

.pk-cart .pk-btn--primary { border-radius: 5px !important; }

/* =========================================================
   YITH — ADD TO QUOTE REQUEST BUTTON
   ========================================================= */

.pk-product .pk-yith-quote {
	width: 100%;
	margin-top: 16px;
}


/* YITH may render an <a> or <button>, so support both */
.pk-product .pk-yith-quote a,
.pk-product .pk-yith-quote button,
.pk-product .pk-yith-quote .button {
	width: 100% !important;
	min-height: 50px;

	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 12px 18px !important;

	background: #ffffff !important;
	background-color: #ffffff !important;

	border: 1px solid rgb(0, 102, 179) !important;
	border-radius: 5px !important;

	color: rgb(0, 102, 179) !important;

	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;

	text-align: center;
	text-decoration: none !important;

	box-shadow: none !important;
	text-transform: none !important;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}


/* Remove theme/YITH pseudo backgrounds */
.pk-product .pk-yith-quote a::before,
.pk-product .pk-yith-quote a::after,
.pk-product .pk-yith-quote button::before,
.pk-product .pk-yith-quote button::after,
.pk-product .pk-yith-quote .button::before,
.pk-product .pk-yith-quote .button::after {
	box-shadow: none !important;
}


/* Hover */
.pk-product .pk-yith-quote a:hover,
.pk-product .pk-yith-quote button:hover,
.pk-product .pk-yith-quote .button:hover {
	background: rgb(0, 102, 179) !important;
	background-color: rgb(0, 102, 179) !important;

	border-color: rgb(0, 102, 179) !important;

	color: #ffffff !important;

	text-decoration: none !important;
}


/* Keyboard focus */
.pk-product .pk-yith-quote a:focus-visible,
.pk-product .pk-yith-quote button:focus-visible,
.pk-product .pk-yith-quote .button:focus-visible {
	outline: 2px solid rgb(0, 102, 179);
	outline-offset: 3px;
}


/* Keep any YITH icon aligned correctly */
.pk-product .pk-yith-quote svg,
.pk-product .pk-yith-quote i {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	color: currentColor;
	fill: none;
}

.pk-yith-quote .yith_ywraq_add_item_response_message{
	line-height: 1.5;
}

/* --- summary column width -------------------------------------------- */
@container pk-summary (max-width: 480px) {
	.pk-keyspecs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pk-product .pk-secondary .pk-pill { font-size: 13px !important; padding: 10px 12px !important; }
}
@container pk-summary (max-width: 460px) {
	.pk-order__grid { grid-template-columns: 1fr; }
}
@container pk-summary (max-width: 400px) {
	.pk-secondary { grid-template-columns: 1fr; }
}
@container pk-summary (max-width: 260px) {
	.pk-keyspecs__grid { grid-template-columns: minmax(0, 1fr); }
}


/* --- out of stock: quote button becomes the main button ----------------
   !important is only there to beat the quote button rules above.
   White on #0066B3 is 4.9:1. */
.pk-product.outofstock .pk-yith-quote a,
.pk-product.outofstock .pk-yith-quote button,
.pk-product.outofstock .pk-yith-quote .button {
	background: rgb(0, 102, 179) !important;
	background-color: rgb(0, 102, 179) !important;
	border-color: rgb(0, 102, 179) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.pk-product.outofstock .pk-yith-quote a svg,
.pk-product.outofstock .pk-yith-quote button svg,
.pk-product.outofstock .pk-yith-quote .button svg {
	color: #ffffff !important;
	stroke: currentColor;
}

.pk-product.outofstock .pk-yith-quote a:hover,
.pk-product.outofstock .pk-yith-quote button:hover,
.pk-product.outofstock .pk-yith-quote .button:hover {
	background: #005494 !important;
	background-color: #005494 !important;
	border-color: #005494 !important;
	color: #ffffff !important;
}

/* Same focus ring as .pk-btn--primary. */
.pk-product.outofstock .pk-yith-quote a:focus-visible,
.pk-product.outofstock .pk-yith-quote button:focus-visible,
.pk-product.outofstock .pk-yith-quote .button:focus-visible {
	outline: 3px solid var(--pk-navy-dk) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff !important;
}


/* --- plugin output slot (only shown when a plugin prints something) --- */
.pk-plugin-slot {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.5;
	color: #2D2D2D;
}
.pk-plugin-slot > * + * {
	margin-top: 10px;
}
.pk-plugin-slot p:last-child {
	margin-bottom: 0;
}

/* YITH's standard Compare button: hidden, but kept on the page because the
   Compare tile clicks it to add the product. Do not remove it from the page. */
.single-product a.compare[data-product_id]:not(.pr-compare),
.single-product button.compare[data-product_id]:not(.pr-compare) { display: none !important; }
