.page-product:not(.page-product--quickview) .product__middle,
.page-product:not(.page-product--quickview) .product__right {
	min-width: 0;
}

.page-product:not(.page-product--quickview) .product__right .card {
	background-color: unset;
}

.page-product:not(.page-product--quickview) .product__right .product__prices {
	margin: 0;
}

#cart #ps_checkout-payment-method-logo-block-container .paypal-mark,
.page-product:not(.page-product--quickview) .paypal-mark {
	border: unset !important;
	background-color: unset !important;
	padding: 0 !important;
	margin: 3px 5px 0 0 !important;
}

/* Payment marks (kingkong_paypal / kingkong_square) side by side.
   .product__additional-info is a flex COLUMN, which stacks every block on its
   own row. When a marks block is present the container becomes a wrapping ROW
   instead: the heading and the other items each take a full row, and the two
   payment modules' logo blocks share the row below the heading (inline-block
   style). Items are centred vertically on that row, so a logo block with two
   rows of badges is centred on the single PayPal logo beside it.
   The gap values must track theme.css:
     .page-product .product__additional-info { gap: 1.25rem }
     @media (min-width: 1200px) { ... { gap: 2rem } }
   The row gap separates the items, so the heading's bottom margin is pulled up
   by that gap to keep it tight against the logos. */
.product__additional-info:has(> :is(.kkp-marks, .kks-marks)) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	/* Centre the marks row. Every other item in this container is given a
	   full-width basis below, so this only affects the payment logo blocks.
	   The column gap is tightened so the two modules' logos read as one group;
	   the row gap (which separates the heading from the logos) is untouched. */
	justify-content: center;
	column-gap: 0.5rem;
}

.product__additional-info:has(> :is(.kkp-marks, .kks-marks)) > :not(:is(.kkp-marks, .kks-marks)) {
	flex: 0 0 100%;
}

/* Basis = min-content, not the default max-content. A max-content basis (the
   four card badges in one line) is wider than the column, which breaks the
   line before the block. With min-content both blocks fit on the row. */
.product__additional-info > :is(.kkp-marks, .kks-marks) {
	margin-top: 0;
	flex: 0 1 min-content;
}

/* kingkong_square shows four card brands, laid out as a fixed 2x2 grid so the
   block's min-content width is exactly two badges. As a wrapping flex row the
   block either grew to fill the row (which pushed the other module's mark to
   the left edge and left a gap on the right) or shrank to one badge per line. */
.product__additional-info > .kks-marks .kks-marks__list {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: center;
}

/* kingkong_paypal shows PayPal/Venmo plus the same four card brands. Five
   badges do not divide into a 2x2 grid - Discover would sit alone on a third
   row - so this block keeps the module's wrapping flex row instead. It is
   allowed to fill the column (`auto` basis rather than `min-content`, which
   for a wrapping list is the width of ONE badge and collapsed the list to a
   single column), so the badges break 3+2 with each line centred. */
.product__additional-info > .kkp-marks {
	flex: 0 1 auto;
}

.product__additional-info > .kkp-marks .kkp-marks__list {
	justify-content: center;
}

/* Below 768px the product layout stops being a grid (see the
   `.product__container` rules further down this file), so .product__right goes
   full width and all four card badges fit on one row. Drop the 2x2 grid there
   and match the footer's single row - the grid only exists to cope with the
   165px-wide desktop column.

   The block also needs an `auto` flex basis here. Its desktop basis is
   `min-content`, which for a wrapping list is the width of ONE badge, so the
   list would wrap to a single column instead of a single row. */
@media (max-width: 767.98px) {
	.product__additional-info > :is(.kkp-marks, .kks-marks) {
		flex: 0 1 auto;
	}

	.product__additional-info > .kks-marks .kks-marks__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* The heading is emitted outside the logo blocks (see payment_marks.tpl) so it
   spans the column and centres over both modules' logos. Either module can be
   the one that prints it, hence both class names. */
.product__additional-info > :is(.kkp-marks__label--standalone, .kks-marks__label--standalone) {
	margin-bottom: calc(0.35rem - 1.25rem);
	text-align: center;
}

@media (min-width: 1200px) {
	.product__additional-info > :is(.kkp-marks__label--standalone, .kks-marks__label--standalone) {
		margin-bottom: calc(0.35rem - 2rem);
	}
}

/* Cart: payment marks centred below the Checkout button.
   The summary column (.cart-grid__aside-wrapper) is a block with text-align:
   start, so the two modules' blocks hugged the left edge under the centred
   heading. Making the column a centred, wrapping row fixes that. The summary
   itself (heading, totals, Checkout) keeps full width via the flex-basis rule. */
#cart .cart-grid__aside-wrapper:has(> :is(.kkp-marks, .kks-marks)) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: .375rem;
}

#cart .cart-grid__aside-wrapper:has(> :is(.kkp-marks, .kks-marks)) > :not(:is(.kkp-marks, .kks-marks)) {
	flex: 0 0 100%;
}

#cart .cart-grid__aside-wrapper:has(> :is(.kkp-marks, .kks-marks)) :is(.kkp-marks, .kks-marks) {
	margin-top: 0;
}

#cart .cart-grid__aside-wrapper:has(> :is(.kkp-marks, .kks-marks)) .kkp-marks__label--standalone {
	margin: 1rem 0 1rem;
}

/* Cart page only: hide the payment marks in the page footer.
   The cart summary already shows the same logos directly under the Checkout
   button, so repeating them a few hundred pixels lower is redundant. Scoped by
   the body class PrestaShop puts on the cart controller (`page-cart`), so the
   footer marks stay on every other page. The heading is emitted as a sibling
   of the logo blocks (see payment_marks.tpl), so it has to be hidden too. */
.page-cart .footer__main-bottom > :is(.kkp-marks, .kks-marks, .kkp-marks__label--standalone, .kks-marks__label--standalone) {
	display: none;
}

/* Hard-coded 90-day return policy panel in the product__right column.
   Sits above the blockreassurance "Return policy" entry, whose description
   field is too short for the full wording. The column is only 165px wide on
   desktop, so the text is small and left-aligned (centred text in a narrow
   column is hard to scan) while the title stays centred to match the
   reassurance block below it. */
.product__return-policy {
	margin-block-end: 1.5rem;
	padding: .6rem .2rem;
	border: 1px solid #bfaa8a;
	border-radius: .4rem;
	background-color: #fdf6e8;
	font-size: .73rem;
	line-height: 1.35;
	text-align: start;
}

.product__return-policy i.material-icons {
	font-size: 1.3rem;
	margin-right: .2rem;
	vertical-align: bottom;
	color: #87460c;
}

.product__return-policy-title {
	margin: 0 0 .4rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

/* The theme resets list-style on all lists, so the bullets are restored here. */
.product__return-policy-list {
	margin: 0;
	padding-inline-start: 1rem;
	list-style: disc outside;
}

.product__return-policy-list li + li {
	margin-block-start: .35rem;
}

.product__return-policy-more {
	margin: .5rem 0 0;
	font-size: .7rem;
	color: #5a6670;
	text-align: center;
}

/* Grid note under the product photos: 1" grid diagram + caption. */
.product__grid-note {
	margin: 1rem 0 0;
	font-size: .7rem;
	line-height: 1.3;
	color: #5a6670;
	text-align: center;
}

.product__grid-note-diagram {
	display: block;
	width: 100px;
	height: auto;
	margin: 0 auto .4rem;
}

/* Grid note inside the enlarged-image modal (top-left corner).
   Uses the same .75rem inset as the zoom controls in the opposite corner.
   The carousel's prev arrow is a full-height 3rem strip pinned to the left
   edge, so the panel does overlap the upper part of its hit area - but the
   arrow's icon is vertically centred and stays clear, and the panel is
   pointer-events:auto only over its own box, so the arrow still works. */
.product-images-modal__grid-note {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	/* Stop short of the close button on the right so the two never collide. */
	max-width: min(18rem, calc(100% - 7rem));
	/* The container is only a positioning box: let clicks through to the image
	   so it never blocks panning. The panel and ruler button re-enable them. */
	pointer-events: none;
}

.product-images-modal__grid-note-panel,
.product-images-modal__grid-note-toggle {
	pointer-events: auto;
}

/* Hidden while the customer is zoomed in: at that point the note covers the
   part of the photo they are trying to inspect. The flag is set by
   product-image-zoom.js from applyZoom(). */
.product-images-modal__grid-note[data-zoomed="true"] {
	display: none;
}

/* Hidden until the full-size image has loaded, exactly like the zoom controls
   in the opposite corner: while the modal is still thumbnail-sized the note
   would cover most of the photo. The flag is set by loadFullSizeImage() in
   product-image-zoom.js. */
.product-images-modal__grid-note.is-loading {
	display: none;
}

.product-images-modal__grid-note-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	padding: .6rem .75rem .5rem;
	background-color: rgba(0, 0, 0, .78);
	border: 2px solid var(--bs-white);
	border-radius: var(--bs-border-radius-sm);
	color: var(--bs-white);
}

.product-images-modal__grid-note[data-collapsed="true"] .product-images-modal__grid-note-panel {
	display: none;
}

.product-images-modal__grid-note-figure {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
}

/* Wrapper exists only to anchor the tooltip and to be focusable, so the
   sentence is reachable by keyboard as well as by hover. */
.product-images-modal__grid-note-diagram-wrap {
	position: relative;
	display: block;
	flex: 0 0 auto;
}

.product-images-modal__grid-note-diagram-wrap:focus-visible {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

/* Tooltip: the caption is visually hidden, so this is how sighted customers
   read the sentence. Opens to the RIGHT of the diagram: the note is anchored
   to the top of the modal, so a tooltip above would be clipped by the
   carousel's overflow:hidden, and one below would land on the "Got it"
   button. There is plenty of room to the right inside the modal. */
.product-images-modal__grid-note-tooltip {
	position: absolute;
	top: -12px;
	left: calc(100% + 1rem);
	z-index: 3;
	width: max-content;
	max-width: 15rem;
	padding: .35rem .5rem;
	background-color: var(--bs-white);
	border-radius: var(--bs-border-radius-sm);
	color: var(--bs-black);
	font-size: .7rem;
	line-height: 1.25;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
	pointer-events: none;
	border: 1px solid black;
}

.product-images-modal__grid-note-diagram-wrap:hover .product-images-modal__grid-note-tooltip,
.product-images-modal__grid-note-diagram-wrap:focus-visible .product-images-modal__grid-note-tooltip {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.product-images-modal__grid-note-tooltip {
		transition: none;
	}
}

/* The diagram carries the whole message, so it is drawn as large as the panel
   allows and the sentence is kept only for screen readers (see the caption
   rule below). The SVG's "1"" label is font-size 11 in a 100-unit-wide
   viewBox, so at 140px it renders at ~15px - comfortably legible. */
.product-images-modal__grid-note-diagram {
	display: block;
	flex: 0 0 auto;
	width: 140px;
	height: auto;
	/* The diagram is drawn for a light background (light grey fine lines, navy
	   bold lines), so it gets its own white chip rather than being inverted -
	   inverting turns the navy lines pale and the fine lines vanish. */
	background-color: var(--bs-white);
	border-radius: 2px;
	padding: 2px;
}

/* Visually hidden, still announced: the diagram is aria-hidden, so this is the
   only accessible description of the note. */
.product-images-modal__grid-note-caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.product-images-modal__grid-note-dismiss,
.product-images-modal__grid-note-toggle {
	align-items: center;
	background-color: var(--bs-black);
	border: 2px solid var(--bs-white);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--bs-white);
	display: flex;
	justify-content: center;
	padding: 0;
}

.product-images-modal__grid-note-dismiss {
	align-self: stretch;
	background-color: var(--bs-white);
	border-radius: var(--bs-border-radius-sm);
	color: var(--bs-black);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
	padding: .35rem .75rem;
}

/* The ruler button only exists once the note has been collapsed. It is hidden
   by default so the expanded panel does not flash both states before the
   script sets data-collapsed. */
.product-images-modal__grid-note-toggle {
	display: none;
	flex: 0 0 auto;
	height: 2.25rem;
	width: 2.25rem;
}

/* The ruler is drawn nearly edge-to-edge in its 24-unit viewBox, so the icon
   box is sized close to the button's inner diameter (2.25rem minus the 2px
   border) to make the ruler read as large as possible. */
.product-images-modal__grid-note-toggle-icon {
	display: block;
	height: 1.75rem;
	width: 1.75rem;
}

.product-images-modal__grid-note[data-collapsed="true"] .product-images-modal__grid-note-toggle {
	display: flex;
}

.product-images-modal__grid-note-dismiss:focus-visible,
.product-images-modal__grid-note-toggle:focus-visible {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

/* On narrow screens the panel would cover most of the photo, so the diagram
   shrinks to fit the available width. */
@media (max-width: 767.98px) {
	.product-images-modal__grid-note {
		left: .75rem;
		max-width: calc(100% - 7rem);
	}

	.product-images-modal__grid-note-panel {
		gap: .35rem;
		padding: .4rem .5rem;
	}

	.product-images-modal__grid-note-diagram {
		width: 96px;
	}

	/* The panel is narrow on phones, so the tooltip has to be capped to the
	   space between the diagram and the right edge of the carousel (which
	   clips its overflow). 11rem covers the note's left inset, the diagram and
	   the gap. */
	.product-images-modal__grid-note-tooltip {
		max-width: min(15rem, calc(100vw - 11rem));
	}

	.product-images-modal__grid-note-dismiss {
		font-size: .7rem;
		padding: .3rem .6rem;
	}
}

/* Multipack description appended to the "In stock" line, e.g. "2 packs (4 diodes in a pack)".
   Blue matches the old site's product page. */
.details__multipack {
	color: #007fc5;
}

.product-add-to-cart__indicator {
	display: inline-flex;
	width: 1.25rem;
	justify-content: center;
	align-items: center;
}

.product-add-to-cart__indicator .js-product-update-spinner {
	margin: 0;
}

.cart-checkout__indicator {
	display: inline-flex;
	width: 1.25rem;
	justify-content: center;
	align-items: center;
	margin-inline-end: .25rem;
}

.cart-checkout__indicator .spinner-border {
	margin: 0;
}

.js-cart-detailed-actions [data-ps-ref="cart-checkout"].is-cart-updating {
	background-color: #a1c0a1 !important;
	border-color: #a1c0a1 !important;
	color: #fff !important;
	cursor: wait;
	opacity: .65 !important;
	pointer-events: none;
}

body.cart-empty #cart-subtotal-shipping {
	display: none;
}

.page-product:not(.page-product--quickview) .product__right {
	--bs-border-color: #a4a09f !important;
	text-align: center;
}

@media (min-width: 768px) {
	.page-product:not(.page-product--quickview) .product__container {
		border-bottom: 1px solid silver;
		margin-bottom: 1rem;
	}

	.page-product:not(.page-product--quickview) .product__actions {
		border: 1px solid #C7C7C7;
		background-color: #F7F7F7;
		border-radius: .4rem;
		padding: .8rem .5rem .5rem .5rem;
		margin-block-end: 1rem;
	}
	/*
	.page-product:not(.page-product--quickview) .js-product-details {
		outline: 1px solid #d8d8d8;
	}
	*/
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.page-product:not(.page-product--quickview) .product__container {
		display: grid;
		gap: 1.5rem;
		grid-template-columns: minmax(0, 1fr) 165px;
		align-items: start;
	}

	.page-product:not(.page-product--quickview) .product__left {
		grid-column: 1;
		grid-row: 1;
	}

	.page-product:not(.page-product--quickview) .product__middle {
		grid-column: 1;
		grid-row: 2;
	}

	.page-product:not(.page-product--quickview) .product__right {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (min-width: 992px) {
	.page-product:not(.page-product--quickview) .product__container {
		display: grid;
		gap: 1.5rem;
		grid-template-columns: 176px minmax(0, 1fr) 165px;
		align-items: start;
	}
}

@media (min-width: 1200px) {
	.page-product:not(.page-product--quickview) .product__container {
		gap: 2rem;
		grid-template-columns: 176px minmax(0, 1fr) 165px;
	}
}