/*
 * Pendim: the shop's own styles on top of So-eMarket (desktop). Linked last from
 * extension/so_theme/catalog/view/template/common/header.twig, so plain selectors win over the theme's.
 * Q-numbers refer to the theme modernise round agreed with the owner (client-docs/pendim/theme-modernise.md).
 */

/* Colours and shapes: pendim-tokens.css */

/* Overall look (Q13): softer corners, no shouting buttons, one border grey */

.btn,
button.btn-button,
.form-control,
select.form-control {
	border-radius: var(--pendim-radius);
}

.btn {
	text-transform: none;
	letter-spacing: 0;
}

.form-control {
	border-color: var(--pendim-line);
}

/* Header */

/* The theme hides the phone block's first item (the demo's "track your order") between 1366 and 1649 px */
@media (min-width: 1200px) {
	.typeheader-1 .telephone ul li:first-child {
		display: inline-block;
	}
}

/* No top strip above the logo (its text is off in tools/theme-settings.php). Below 992 px it stays: it holds
   the "My Account" link there. */
@media (min-width: 992px) {
	.typeheader-1 .header-top {
		display: none;
	}

	/* The theme spaces the logo row from the strip with a margin, which now pushed the dark header down */
	.typeheader-1 .header-middle {
		margin-top: 0;
		padding-top: 20px;
	}

	/* "All categories" list: light grey like the promises strip, so it stands apart from the white page */
	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu {
		border: 1px solid var(--pendim-line);
		border-top: 0;
		border-radius: 0 0 var(--pendim-radius-card) var(--pendim-radius-card);
		background: var(--pendim-surface);
		box-shadow: none;
	}

	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li:hover > a {
		color: var(--pendim-blue);
	}

	/* Its fly-out (Mallets, Instruments): compact rows in a box like the list, not 30px of padding around them */
	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > .sub-menu .content {
		padding: 6px 0;
		border: 1px solid var(--pendim-line);
		border-radius: var(--pendim-radius-card);
		box-shadow: var(--pendim-shadow);
	}

	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > .sub-menu .content .row {
		margin: 0;
		padding: 0;
	}

	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > .sub-menu .content [class*="col-"] {
		padding: 0;
	}

	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > .sub-menu .content ul {
		margin: 0;
	}

	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > .sub-menu .content ul li a {
		display: block;
		padding: 7px 20px;
		line-height: 1.4;
	}

	.typeheader-1 .menu-vertical .container-megamenu.vertical .vertical-wrapper ul.megamenu > li > .sub-menu .content ul li a:hover {
		background: var(--pendim-surface);
		color: var(--pendim-blue);
	}

	/* The top menu's dropdowns (Mallets, Instruments) likewise: compact rows, not 30px of padding around them. They
	   open over the "All categories" menu (the theme gives that 999, the dropdowns 998). */
	.typeheader-1 .main-menu .container-megamenu.horizontal ul.megamenu > li > .sub-menu {
		z-index: 1000;
	}

	.typeheader-1 .main-menu .container-megamenu.horizontal ul.megamenu > li > .sub-menu .content {
		padding: 6px 0;
	}

	.typeheader-1 .main-menu .container-megamenu.horizontal ul.megamenu > li > .sub-menu .content .row {
		margin: 0;
		padding: 0;
	}

	.typeheader-1 .main-menu .container-megamenu.horizontal ul.megamenu > li > .sub-menu .content [class*="col-"] {
		padding: 0;
	}

	.typeheader-1 .main-menu .container-megamenu.horizontal ul.megamenu > li > .sub-menu .content ul {
		margin: 0;
	}

	.typeheader-1 .main-menu .container-megamenu.horizontal ul.megamenu > li > .sub-menu .content .menu ul li a {
		display: block;
		padding: 7px 20px;
		line-height: 1.4;
	}

	.typeheader-1 .main-menu .container-megamenu.horizontal ul.megamenu > li > .sub-menu .content .menu ul li a:hover {
		background: var(--pendim-surface);
		color: var(--pendim-blue);
	}
}

.typeheader-1 .header-bottom .bottom2 .search-header-w {
	max-width: 760px;
}

/* Footer */

/* The band that opens the footer (owner, 2026-10-28; common/footer_band.twig): dark, so the white page has an end, as
   the newsletter band had; the line about Pendim on the left, its social pages on the right */
.pendim-footer-band {
	padding: 30px 0; /* on the band: the theme takes the container's padding away on a wide screen */
	background: var(--pendim-ink);
	color: #fff;
}

.pendim-footer-band .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.pendim-footer-band-title {
	margin: 0;
	color: #fff;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
}

.pendim-footer-band-note {
	margin: 4px 0 0;
	color: #b8c2cf;
	font-size: 14px;
}

.pendim-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.pendim-footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--pendim-radius);
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}

.pendim-footer-social a:hover,
.pendim-footer-social a:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* A tablet: the line above its social pages, both centred */
@media (max-width: 767px) {
	.pendim-footer-band .container {
		flex-direction: column;
		text-align: center;
	}
}

.typefooter-1 .infos-footer ul li {
	text-transform: none;
}

/* Each contact icon cut to its own size (tablet footer logo fade audit, 2026-10-26): the theme showed them as one tall
   picture behind the whole line, so where the address wraps onto four lines (992-1199 px, an iPad sideways) the top of
   the phone icon showed under the pin. Centred on its line, as the theme placed them. */
.typefooter-1 .infos-footer ul li {
	position: relative;
	background: none;
}

.typefooter-1 .infos-footer ul li.adres::before,
.typefooter-1 .infos-footer ul li.phone::before,
.typefooter-1 .infos-footer ul li.mail::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 26px;
	height: 26px;
	transform: translateY(-50%);
	background: url("../../../../so_theme/catalog/view/template/images/icon/icon-contact.png") no-repeat 0 0;
}

.typefooter-1 .infos-footer ul li.phone::before {
	background-position: 0 -61px;
}

.typefooter-1 .infos-footer ul li.mail::before {
	height: 22px;
	background-position: 0 -107px;
}

/* Homepage top row (Q3): the open "All categories" menu's space, the slider and the stacked promos.
   Below 992 px the columns stack and the menu's space goes. */

@media (max-width: 991px) {
	.pendim-menu-space {
		display: none;
	}
}

/* Homepage slider: the slide fills its column at every width, and the caption sits over the slide's white left
   part (45% of it, see compose() in tools/theme-content.php). Its sizes follow the slide's width (cqi). */

.sohomepage-slider .item {
	position: relative;
	container-type: inline-size;
}

.pendim-hero .sohomepage-slider .item img {
	width: 100%;
	height: auto;
}

.sohomepage-slider .sohomeslider-description {
	position: absolute;
	left: 4%;
	top: 45%; /* a little above the middle, so the dots fit below it */
	transform: translateY(-50%);
	width: 38%;
}

#content .sohomepage-slider .sohomeslider-description h2 {
	margin-bottom: 0.4em;
	font-size: clamp(18px, 3.2cqi, 32px);
	line-height: 1.15;
	color: var(--pendim-ink);
	text-transform: none;
}

.sohomepage-slider .sohomeslider-description p {
	margin-bottom: 1.3em;
	font-size: clamp(12px, 1.6cqi, 15px);
	line-height: 1.5;
	color: var(--pendim-text);
}

.sohomepage-slider .sohomeslider-description .btn {
	display: inline-block;
	width: auto;
	min-width: 0;
	padding: 0.7em 1.6em;
	border-color: var(--pendim-blue);
	background: var(--pendim-blue);
	color: #fff;
	font-size: clamp(13px, 1.5cqi, 15px);
	font-weight: 500;
	white-space: nowrap;
}

@container (max-width: 520px) {
	.sohomepage-slider .sohomeslider-description p {
		display: none;
	}
}

/* Slider dots: round, the current one a blue bar (the theme draws dark bars, with !important). They sit on the
   slide under the caption, lined up with its text, and switch at once: a growing bar looked like two. */
.module.sohomepage-slider .owl2-controls .owl2-dots {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 7%;
	left: calc(4% - 6px); /* the first dot's click area starts 6px left of the dot itself */
	width: auto;
	height: auto;
	margin: 0;
	text-align: left;
	line-height: 0;
}

/* Each dot is 9px, but its click area is about 24px high, so a click near it changes the slide instead of
   opening the slide's link underneath */
.module.sohomepage-slider .owl2-controls .owl2-dots .owl2-dot {
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 6px;
	background: transparent !important;
	cursor: pointer;
}

/* The theme paints the hovered and current dot's whole box blue (!important), which the click area now shows */
.module.sohomepage-slider .owl2-controls .owl2-dots .owl2-dot:hover,
.module.sohomepage-slider .owl2-controls .owl2-dots .owl2-dot.active {
	background: transparent !important;
}

.module.sohomepage-slider .owl2-controls .owl2-dots .owl2-dot span {
	display: block;
	width: 9px;
	height: 9px;
	margin: 0;
	border: 0;
	border-radius: 5px;
	background: var(--pendim-dot);
}

.module.sohomepage-slider .owl2-controls .owl2-dots .owl2-dot.active span {
	width: 24px;
	background: var(--pendim-blue);
}

/* Homepage promos (Q3): stacked beside the slider and together as tall as the slide, text over the white left part
   of the photo. The photos sit on white, so the image box fits the photo to the right without visible edges.
   Below 1200 px they sit side by side under the slider. */

.pendim-promo {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
	container-type: inline-size;
}

.pendim-promo img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1200px) {
	.pendim-hero-promos .banners1 {
		position: absolute;
		inset: 0 15px 5px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.pendim-hero-promos .banners1 > div {
		flex: 1 1 0;
		min-height: 0;
	}

	.pendim-hero-promos .pendim-promo {
		height: 100%;
	}

	.pendim-hero-promos .pendim-promo img {
		height: 100%;
		object-fit: contain;
		object-position: right center;
	}
}

@media (max-width: 1199px) {
	.pendim-hero-promos .banners1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin-top: 16px;
	}
}

.pendim-promo-text {
	position: absolute;
	left: 7%;
	top: 50%;
	transform: translateY(-50%);
	width: 40%;
	font-size: clamp(12px, 3.6cqi, 14px);
	line-height: 1.4;
	color: var(--pendim-muted);
}

.pendim-promo-text strong {
	display: block;
	margin-bottom: 4px;
	font-size: clamp(14px, 5cqi, 19px);
	line-height: 1.2;
	color: var(--pendim-ink);
}

/* Hover (Q2): a slight zoom of the photo and a soft shadow instead of the theme's dark layer */

.pendim-promo,
.sohomepage-slider .item a,
.product-item-container {
	transition: box-shadow 0.25s, transform 0.25s;
}

.pendim-promo img,
.product-item-container .product-image-container img {
	transition: transform 0.4s ease;
}

.pendim-promo:hover {
	box-shadow: var(--pendim-shadow);
}

.pendim-promo:hover img,
.product-item-container:hover .product-image-container img {
	transform: scale(1.03);
}

.product-item-container .product-image-container {
	overflow: hidden;
}

/* Product photos keep their 4:3 space while they load, so the page doesn't jump (Q21) */
.product-item-container .product-image-container img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/* Promises strip under the slider (Q4): one slim bar, the four promises split by thin lines */

#content .block-infos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 28px 0 8px;
	padding: 0;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
	list-style: none;
}

#content .block-infos li {
	float: none;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 14px 20px;
	border: 0;
	border-left: 1px solid var(--pendim-line);
	background: none;
}

#content .block-infos li:first-child {
	border-left: 0;
}

@media (max-width: 991px) {
	#content .block-infos {
		grid-template-columns: repeat(2, 1fr);
	}

	#content .block-infos li:nth-child(3) {
		border-left: 0;
	}

	#content .block-infos li:nth-child(n+3) {
		border-top: 1px solid var(--pendim-line);
	}
}

#content .block-infos li .inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
}

#content .block-infos li i {
	display: flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	position: static;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0; /* the theme's 8px top padding pushed the glyph below the middle */
	line-height: 1;
	border-radius: 50%;
	background: var(--pendim-blue-tint);
	font-size: 17px;
	color: var(--pendim-blue);
}

#content .block-infos .info-cont {
	padding: 0;
}

#content .block-infos .info-cont a {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--pendim-ink);
	text-transform: none;
}

#content .block-infos .info-cont p {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--pendim-muted);
}

/* Product cards (Q5): white with a thin border, full names on two lines, no empty stars */

body .product-item-container,
body .products-list .product-grid .product-item-container {
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
	overflow: hidden;
}

body .product-item-container:hover {
	box-shadow: var(--pendim-shadow);
	transform: translateY(-2px);
}

body .product-item-container .left-block,
body .product-item-container .right-block,
body .products-list .product-grid .product-item-container .right-block,
body .product-item-container .caption {
	background: #fff;
}

.product-item-container h4 {
	min-height: 2.6em;
}

.product-item-container h4 a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	text-overflow: clip;
	line-height: 1.3;
}

/* A filled star has class fa-star, an empty one only fa-star-o: no filled star means no review yet */
.product-item-container .ratings:not(:has(.fa-star)),
.product-item-container .rating:not(:has(.fa-star)) {
	display: none;
}

/* No compare anywhere (Q9); the templates skip it where they have a switch. The theme's grid buttons rule outranks
   the plain one ("You may also like" on product pages, old pages audit 2026-10-26) */
.products-list .product-grid .product-item-container .left-block .button-group .compare,
.product-item-container .compare,
.wish_comp .compare {
	display: none;
}

/* Category pages (Q8) */

/* Filter values: a long name wraps beside its count instead of pushing the count to the next line */
.so-filter-option .so-option-container {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.so-filter-option .so-option-container label {
	flex: 1;
	float: none;
	width: auto;
	margin: 0;
	white-space: normal;
}

.so-filter-option .so-option-container .option-count {
	flex: 0 0 auto;
	float: none;
	position: static;
}

.category-info:empty,
.products-category .form-group.product-compare {
	display: none;
}

/* Product page (Q10, Q11) */

.product-view .large-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	cursor: zoom-in; /* a click opens it full screen (product photos audit, 2026-10-27) */
}

/* The enlarged photo: on the dark backdrop, without the theme's white box and grey bar over its top; the close cross
   above it */
.mfp-image-holder img.mfp-img {
	margin: 0 auto;
	background: none;
}

.mfp-image-holder .mfp-close {
	top: 0;
	background: none;
}

.product-view .detail-action .cart #button-cart {
	min-width: 200px;
	height: auto;
	padding: 12px 28px;
	border-radius: var(--pendim-radius);
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
}

.product-view .product-box-desc .stock span {
	min-width: 0;
	margin-right: 4px;
}

#tab-description,
#collapse-description {
	font-size: 15px;
	line-height: 1.6;
	color: var(--pendim-text);
}

#collapse-description p,
#collapse-description li {
	font-size: inherit;
	line-height: inherit;
}

.product-property-list .property-item .propery-title {
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-related-title {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pendim-line);
	font-size: 18px;
	font-weight: 500;
	color: var(--pendim-ink);
	text-transform: none;
}

/* Information pages and category texts read at the same size as product descriptions */
.information-information #content,
.category-info {
	font-size: 15px;
	line-height: 1.6;
}

/* Section headings in the page texts sit under the page title, so they are smaller than it */
.information-information #content h2 {
	margin: 24px 0 8px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--pendim-ink);
}

/* Page texts read in lines of a comfortable length, and their lists have bullets */
.information-information #content > p,
.information-information #content > ul,
.information-information #content > ol,
.information-information #content > h2 {
	max-width: 860px;
}

.information-information #content ul:not([class]),
.information-information #content ol:not([class]) {
	margin: 0 0 12px;
	padding-left: 22px;
}

.information-information #content ul:not([class]) {
	list-style: disc;
}

.information-information #content ol:not([class]) {
	list-style: decimal;
}

.information-information #content ul:not([class]) li,
.information-information #content ol:not([class]) li {
	margin-bottom: 4px;
}

/* Long page texts (the terms): the date line and a list of the sections, in two columns */
.pendim-terms-meta {
	font-size: 14px;
	color: var(--pendim-muted);
}

.information-information #content .pendim-toc {
	max-width: 860px;
	margin: 16px 0 8px;
	padding: 16px 20px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: var(--pendim-surface);
}

.information-information #content .pendim-toc ol {
	columns: 2;
	column-gap: 32px;
	margin-bottom: 8px;
}

.information-information #content .pendim-toc p {
	margin: 0;
}

.information-information #content .pendim-toc a {
	color: var(--pendim-blue);
}

/* Sections reached from the list start a little below the window's top */
.information-information #content h2[id] {
	scroll-margin-top: 24px;
}

/* Links in the page texts look like links */
.information-information #content .pendim-about a,
.information-information #content p a,
.information-information #content li a {
	color: var(--pendim-blue);
}

.information-information #content p a:hover {
	text-decoration: underline;
}

/* The checkout's "Already have an account? Log in" (launch checks, 2026-10-27: it was grey like the text around it) */
#form-register > p a {
	color: var(--pendim-blue);
	text-decoration: underline;
}

/* A main heading for search engines and screen readers that is not shown (the homepage's: the slides show it) */
.pendim-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* About page (tools/content/about.html): the text beside a photo, under 992 px the photo below it */
.pendim-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	gap: 48px;
	align-items: start;
}

.pendim-about-text {
	max-width: 70ch;
}

.information-information #content .pendim-lead {
	font-size: 18px;
	line-height: 1.5;
	color: var(--pendim-ink);
}

.pendim-about-photo {
	margin: 8px 0 0;
}

.pendim-about-photo img {
	width: 100%;
	height: auto;
	border-radius: var(--pendim-radius-card);
}

.pendim-about-photo figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--pendim-muted);
}

/* The founder and his father side by side, in frames of one shape, above the xylophone */
.pendim-about-people {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

.pendim-about-people img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

@media (max-width: 991px) {
	.pendim-about {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* Contact page: how to reach Pendim under the map, labelled fields, a blue send button */
.contact-form .pendim-lead {
	margin-bottom: 16px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--pendim-ink);
}

.pendim-contact-list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.pendim-contact-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 14px;
}

.pendim-contact-list i {
	flex: 0 0 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--pendim-blue-tint);
	font-size: 16px;
	color: var(--pendim-blue);
}

.pendim-contact-list a {
	font-size: 16px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-contact-list span {
	display: block;
	font-size: 14px;
	color: var(--pendim-muted);
}

.pendim-contact-list span a {
	font-size: 14px;
	font-weight: 400;
	color: var(--pendim-blue);
}

.pendim-business,
.pendim-map-note {
	font-size: 13px;
	color: var(--pendim-muted);
}

.pendim-map-note {
	margin-top: 10px;
}

.pendim-contact {
	margin-top: 20px;
}

/* A shorter map (the theme's is 480 px), so the map and contact details end level with the form */
.info-contact .mapouter,
.info-contact .gmap_canvas,
.info-contact #gmap_canvas {
	height: 360px;
}

.pendim-contact-form {
	margin-top: 8px;
}

.information-contact #content .pendim-contact-form h2 {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 500;
	text-transform: none;
	color: var(--pendim-ink);
}

.pendim-contact-form .form-label {
	margin-bottom: 4px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-contact-form .form-control {
	background: #fff;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
}

.pendim-contact-form fieldset legend {
	margin-bottom: 4px;
	text-transform: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-contact-form #captcha img {
	border-radius: var(--pendim-radius);
}

.pendim-contact-form .btn-primary {
	padding: 10px 24px;
	border: 0;
	border-radius: var(--pendim-radius);
	background: var(--pendim-blue);
	color: #fff;
}

.pendim-contact-form .btn-primary:hover {
	background: var(--pendim-blue-dark);
}

/* The map placeholder: Google Maps loads only when asked (privacy policy) */
.pendim-map {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: var(--pendim-surface);
	text-align: center;
}

.pendim-map p {
	max-width: 360px;
	margin: 0;
	font-size: 13px;
	color: var(--pendim-muted);
}

.pendim-map .btn-primary {
	padding: 10px 20px;
	border: 0;
	border-radius: var(--pendim-radius);
	background: var(--pendim-blue);
	color: #fff;
}


/* Site map page: the shop with its products on the left, information and account pages on the right */
.pendim-sitemap {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 48px;
	max-width: 1100px;
}

.pendim-sitemap h2 {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pendim-line);
	font-size: 18px;
	font-weight: 500;
	text-transform: none;
	color: var(--pendim-ink);
}

.pendim-sitemap section + section {
	margin-top: 32px;
}

.pendim-sitemap ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pendim-sitemap li {
	margin: 0;
	line-height: 1.5;
}

.pendim-sitemap li > a {
	display: inline-block;
	padding: 3px 0;
	color: var(--pendim-text);
}

.pendim-sitemap li > a:hover {
	color: var(--pendim-blue);
}

/* Categories in the ink colour, their subcategories and products indented under them */
.pendim-sitemap-category > a {
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-sitemap-category ul {
	margin: 2px 0 8px;
	padding-left: 18px;
	border-left: 1px solid var(--pendim-line);
}

/* Desktop: the products of a category in two columns */
.pendim-sitemap-products {
	columns: 2;
	column-gap: 24px;
}

@media (max-width: 991px) {
	.pendim-sitemap {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* Category texts: a quote set off from the text (Peter Sadlo on the P. Sadlo page) */
.category-info blockquote {
	margin: 16px 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--pendim-blue);
	font-style: italic;
}

.category-info blockquote footer {
	margin-top: 6px;
	font-style: normal;
	font-weight: 500;
	color: var(--pendim-ink);
}

.category-info blockquote footer::before {
	content: "– ";
}

.category-info a {
	color: var(--pendim-blue);
}

/* Product page (page review, 2026-10-22) */
.product-view .content-product-right .title-product h1 {
	text-transform: none;
}

/* Options as white buttons with a border; the chosen one is blue (also the preselected usual choice) */
#product .radio-type-button .option-content-box {
	background: #fff;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	color: var(--pendim-text);
}

#product .radio-type-button label:has(input:checked) .option-content-box {
	background: var(--pendim-blue);
	border-color: var(--pendim-blue);
	color: #fff;
}

.pendim-option-help {
	margin-top: 6px;
	font-size: 13px;
	color: var(--pendim-muted);
}

/* Instruments: "Price on request" where the price stands, and the enquiry button in the cart button's place */
.pendim-price-on-request {
	font-size: 18px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.product-view .content-product-right .box-info-product .cart .btn.pendim-ask-price,
.pendim-ask-price.btn-primary {
	padding: 12px 28px;
	text-transform: none;
	border: 0;
	border-radius: var(--pendim-radius);
	background: var(--pendim-blue);
	font-size: 16px;
	color: #fff;
}

.pendim-ask-price.btn-primary:hover {
	background: var(--pendim-blue-dark);
	color: #fff;
}

/* Search results and "page not found" (page review, 2026-10-22): one search box with its button, the result count,
   and category tiles when nothing matches */
.pendim-search-form {
	display: flex;
	max-width: 560px;
	margin: 0 0 20px;
}

.pendim-search-form .form-control {
	height: 44px;
	border: 1px solid var(--pendim-line);
	border-right: 0;
	border-radius: var(--pendim-radius) 0 0 var(--pendim-radius);
	background: #fff;
}

.pendim-search-form .btn-primary {
	padding: 0 22px;
	border: 0;
	border-radius: 0 var(--pendim-radius) var(--pendim-radius) 0;
	background: var(--pendim-blue);
	text-transform: none;
	color: #fff;
}

.pendim-search-count {
	color: var(--pendim-muted);
}

.pendim-search-empty a:not(.btn),
.pendim-not-found a:not(.btn) {
	color: var(--pendim-blue);
}

.pendim-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
	gap: 16px;
	margin: 16px 0 24px;
	padding: 0;
	list-style: none;
}

.pendim-tiles a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
	text-align: center;
}

.pendim-tiles img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pendim-tiles span {
	display: block;
	padding: 10px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-not-found {
	padding: 8px 0 32px;
}

.pendim-not-found .pendim-lead {
	font-size: 18px;
	color: var(--pendim-ink);
}

.pendim-not-found > p > .btn-primary {
	padding: 12px 24px;
	border: 0;
	border-radius: var(--pendim-radius);
	background: var(--pendim-blue);
	text-transform: none;
	color: #fff;
}

/* Account pages (page review, 2026-10-22): headings as on the rest of the shop, blue buttons, the dashboard's cards.
   The "done" template (account/success.twig) also serves the page after the contact form. */
#account-success h1,
[class*="account-"] #content > h1,
[class*="account-"] #content h1:not(.title-category) {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pendim-line);
	font-size: 22px;
	font-weight: 500;
	color: var(--pendim-ink);
}

[class*="account-"] #content h2,
[class*="account-"] #content legend {
	font-size: 18px;
	font-weight: 500;
	color: var(--pendim-ink);
}

#account-success .btn-primary,
[class*="account-"] #content .btn-primary {
	border: 0;
	border-radius: var(--pendim-radius);
	background: var(--pendim-blue);
	color: #fff;
}

#account-success .btn-primary:hover,
[class*="account-"] #content .btn-primary:hover {
	background: var(--pendim-blue-dark);
}

[class*="account-"] #content .form-control {
	border: 1px solid var(--pendim-line);
	background: #fff;
}

.pendim-account-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pendim-account-cards a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 18px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
	color: var(--pendim-text);
}

.pendim-account-cards a:hover {
	border-color: var(--pendim-blue);
	box-shadow: var(--pendim-shadow);
}

.pendim-account-cards i {
	margin-bottom: 6px;
	font-size: 20px;
	color: var(--pendim-blue);
}

.pendim-account-cards strong {
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-account-cards span {
	font-size: 14px;
	color: var(--pendim-muted);
}

/* Cart (page review, 2026-10-22): a blue Checkout, a quiet Continue shopping, small quantity buttons, totals without
   the table grid */
.checkout-cart #content .btn-primary,
.checkout-checkout #content .btn-primary {
	border: 0;
	border-radius: var(--pendim-radius);
	background: var(--pendim-blue);
	color: #fff;
}

.checkout-cart #content .btn-primary:hover,
.checkout-checkout #content .btn-primary:hover {
	background: var(--pendim-blue-dark);
}

.checkout-cart #content .btn-light {
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	background: #fff;
	color: var(--pendim-ink);
}

.checkout-cart #content .btn-light:hover {
	border-color: var(--pendim-blue);
	color: var(--pendim-blue);
}

.checkout-cart #output-cart .input-group {
	flex-wrap: nowrap;
	max-width: 150px;
}

.checkout-cart #output-cart .input-group .form-control {
	min-width: 48px;
	border: 1px solid var(--pendim-line);
	background: #fff;
	text-align: center;
}

.checkout-cart #output-cart .input-group .btn {
	padding: 6px 10px;
	border: 1px solid var(--pendim-line);
	border-radius: 0;
	background: #fff;
	color: var(--pendim-blue);
}

.checkout-cart #output-cart .input-group .btn-danger {
	border-left: 0;
	border-radius: 0 var(--pendim-radius) var(--pendim-radius) 0;
	color: var(--pendim-muted);
}

.checkout-cart #output-cart .input-group .btn:hover {
	background: var(--pendim-blue-tint);
}

.checkout-cart #output-cart .input-group .btn-danger:hover {
	color: #c0392b;
}

.checkout-cart #output-cart tbody small {
	color: var(--pendim-muted);
}

#checkout-total td {
	border-right: 0;
	border-left: 0;
	background: #fff;
}

#checkout-total .pendim-total-total td {
	font-size: 16px;
	color: var(--pendim-ink);
}

#checkout-total .pendim-total-pendim_vat td {
	border-top: 0;
	padding-top: 0;
	font-size: 13px;
	color: var(--pendim-muted);
}

.pendim-cart-note {
	margin: 16px 0;
	color: var(--pendim-muted);
}

.pendim-cart-buttons .btn {
	padding: 10px 22px;
}

/* Checkout (page review, 2026-10-22): headings as on the rest of the shop, the delivery and payment choices as cards,
   the region marked optional in the address book too */
.checkout-checkout #content > h1 {
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pendim-line);
	font-size: 22px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.checkout-checkout #content legend {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.checkout-checkout #content .form-control,
.checkout-checkout #content .form-select {
	border: 1px solid var(--pendim-line);
	background-color: #fff;
}

.pendim-choice {
	margin-bottom: 8px;
	padding: 0;
}

.pendim-choice .form-check-input {
	position: absolute;
	opacity: 0;
}

.pendim-choice .form-check-label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	background: #fff;
	cursor: pointer;
}

.pendim-choice .form-check-input:checked + .form-check-label {
	border-color: var(--pendim-blue);
	background: var(--pendim-blue-tint);
	box-shadow: inset 0 0 0 1px var(--pendim-blue);
}

.pendim-choice .form-check-input:focus-visible + .form-check-label {
	outline: 2px solid var(--pendim-blue);
	outline-offset: 2px;
}

.pendim-choice strong {
	font-weight: 500;
	color: var(--pendim-ink);
	white-space: nowrap;
}

.pendim-checkout-hint {
	color: var(--pendim-muted);
}

#pendim-payment {
	margin-top: 8px;
}

.pendim-comment {
	margin-top: 20px;
}

.pendim-agree {
	margin: 12px 0 20px;
}

.pendim-agree a {
	color: var(--pendim-blue);
	text-decoration: underline;
}

div.required:has(> div > #input-zone) .col-form-label::before {
	content: none;
}

/* Checkout redesign (owner, 2026-10-22): the steps in one column, the order summary beside them, the terms and the
   payment form (Stripe's fields, in the shop's colours) with one Pay button at the end */
.pendim-checkout-step {
	margin-bottom: 28px;
}

.pendim-checkout-summary {
	padding: 20px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: var(--pendim-surface);
}

.pendim-summary-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-summary-items {
	margin: 0;
}

.pendim-summary-items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pendim-line);
}

.pendim-summary-name small {
	display: block;
	font-size: 12px;
	color: var(--pendim-muted);
}

.pendim-summary-price {
	white-space: nowrap;
	color: var(--pendim-ink);
}

.pendim-summary-totals {
	width: 100%;
	margin-top: 6px;
}

.pendim-summary-totals td {
	padding: 5px 0;
}

.pendim-summary-totals .pendim-total-total td {
	padding-top: 10px;
	border-top: 1px solid var(--pendim-line);
	font-size: 18px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-summary-totals .pendim-total-pendim_vat td {
	padding-top: 0;
	font-size: 13px;
	color: var(--pendim-muted);
}

.pendim-summary-note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--pendim-muted);
}

/* Nothing to choose (no delivery yet, or a single way to pay) isn't listed: the payment step says what's missing or has it */
#pendim-payment.pendim-no-choice {
	display: none;
}

.checkout-checkout #content .pendim-comment-toggle {
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	color: var(--pendim-blue);
	text-decoration: underline;
}

#pendim-pay .pendim-agree {
	margin: 0 0 16px;
}

.stripe-checkout-element {
	margin-bottom: 16px;
}

/* A refused payment (payment declined audit, 2026-10-23): the bank's reason and, under it, that nothing was charged and
   what to try; light, not the theme's solid red */
#stripe-checkout-payment .stripe-checkout-error {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid #f3c7c4;
	border-radius: 6px;
	background: #fdf0ef;
	box-shadow: none;
	color: #232f3f;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
}

#stripe-checkout-payment .stripe-checkout-error[hidden] {
	display: none;
}

#stripe-checkout-payment .stripe-checkout-error > i {
	position: static;
	width: auto;
	height: auto;
	margin-top: 2px;
	background: none;
	line-height: inherit;
	font-size: 16px;
	color: #c62828;
}

#stripe-checkout-payment .stripe-checkout-error > i::before {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	transform: none;
}

#stripe-checkout-payment .stripe-checkout-error-reason {
	display: block;
	font-weight: 500;
	color: #b71c1c;
}

#stripe-checkout-payment .stripe-checkout-error-help {
	display: block;
	margin-top: 2px;
}

#stripe-checkout-payment .stripe-checkout-error-help:empty {
	display: none;
}

.checkout-checkout #content .stripe-checkout-pay {
	padding: 12px 20px;
	font-size: 17px;
	font-weight: 500;
}

.stripe-checkout-secure {
	margin: 10px 0 0;
	font-size: 13px;
	text-align: center;
	color: var(--pendim-muted);
}

/* The summary stays in view beside the steps */
.pendim-checkout-summary {
	position: sticky;
	top: 20px;
}

/* A slim header and footer on the checkout: the logo and the phone number, nothing that leads away mid-payment */
.checkout-checkout .header-middle .main-menu,
.checkout-checkout .header-middle .signin-w,
.checkout-checkout .header-bottom,
.checkout-checkout .pendim-footer-band,
.checkout-checkout #collapse-footer {
	display: none;
}

.checkout-checkout .header-middle .row {
	justify-content: space-between;
}

.checkout-checkout .header-middle .middle-right {
	margin-left: auto;
}

/* The line between "My account" and the phone number, with "My account" hidden */
.checkout-checkout .header-middle .telephone li::after {
	display: none;
}

/* Tick boxes and round choices big enough to tap (WCAG 2.2: 24 px target), the label taking the rest */
.checkout-checkout #content .form-check:not(.pendim-choice):not(.form-switch) {
	min-height: 24px;
	padding-left: 32px;
}

.checkout-checkout #content .form-check:not(.pendim-choice):not(.form-switch) .form-check-input {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	margin-left: -32px;
}

.checkout-checkout #content .form-check:not(.pendim-choice):not(.form-switch) .form-check-label {
	padding: 1px 0;
}

/* The theme's top bar ("My account") */
.checkout-checkout .header-top {
	display: none;
}

/* The theme keeps room above the logo for that top bar */
.checkout-checkout .typeheader-1 .header-middle {
	margin-top: 0;
}

/* Account dashboard (account audit, 2026-10-22): the latest order first */
.pendim-account-latest {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: var(--pendim-surface);
}

.pendim-account-latest h2 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 500;
	text-transform: none;
}

.pendim-account-latest h2 a {
	color: var(--pendim-ink);
}

.pendim-account-latest p {
	margin: 0 0 4px;
	color: var(--pendim-text);
}

.pendim-account-latest .pendim-account-latest-note {
	color: var(--pendim-muted);
	font-size: 14px;
}

.pendim-account-latest .pendim-account-latest-links {
	margin: 8px 0 0;
}

.pendim-account-latest .pendim-account-latest-links a {
	color: var(--pendim-blue);
	text-decoration: underline;
}

/* Eight cards: four a row, two on tablets */
.pendim-account-cards {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
	.pendim-account-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Order history (audits, 2026-10-22 and 23): one card per order, the whole card opening it */
.pendim-orders {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.pendim-orders li {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
}

.pendim-orders li:hover {
	border-color: var(--pendim-blue);
	box-shadow: var(--pendim-shadow);
}

.pendim-orders .pendim-order-main {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 2px 16px;
	flex: 1;
	padding: 14px 18px;
	color: var(--pendim-text);
}

.pendim-orders strong {
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-orders .pendim-order-product {
	grid-column: 1;
	min-width: 0;
	color: var(--pendim-ink);
}

.pendim-orders .pendim-order-date {
	grid-column: 1;
	font-size: 13px;
	color: var(--pendim-muted);
}

/* The status as a label: blue while it is made, green once shipped, grey otherwise */
.pendim-orders .pendim-order-status {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--pendim-surface);
	font-size: 13px;
	color: var(--pendim-muted);
	white-space: nowrap;
}

.pendim-orders .pendim-status-making {
	background: var(--pendim-blue-tint);
	color: var(--pendim-blue-dark);
}

.pendim-orders .pendim-status-done {
	background: #e6f4ea;
	color: #1e6b34;
}

.pendim-orders .pendim-order-total {
	grid-column: 2;
	grid-row: 2;
	text-align: right;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-orders .pendim-order-arrow {
	grid-column: 3;
	grid-row: 1 / span 3;
	font-size: 12px;
	color: var(--pendim-dot);
}

.pendim-orders li:hover .pendim-order-arrow {
	color: var(--pendim-blue);
}

.pendim-orders .pendim-order-invoice {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 18px;
	border-left: 1px solid var(--pendim-line);
	color: var(--pendim-blue);
	white-space: nowrap;
}

/* Order page (audit, 2026-10-22) */
.pendim-order-head {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: var(--pendim-surface);
}

.pendim-order-head p {
	margin: 0 0 4px;
}

.pendim-order-head .pendim-order-making {
	font-size: 14px;
	color: var(--pendim-muted);
}

/* The parcel's tracking and the invoice, side by side (audit, 2026-10-23) */
.pendim-order-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.pendim-order-head-actions:empty {
	display: none;
}

.pendim-order-head-actions form {
	margin: 0;
}

.pendim-order-head .pendim-order-tracking {
	margin-top: 8px;
}

.pendim-order-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 0 20px;
}

.pendim-order-facts section {
	padding: 14px 18px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
}

#content .pendim-order-facts h2,
#content h2.pendim-order-section {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	color: var(--pendim-ink);
}

#content h2.pendim-order-section {
	margin: 24px 0 10px;
	font-size: 17px;
}

.pendim-order-facts p {
	margin: 0 0 10px;
}

.pendim-order-facts p:last-child {
	margin: 0;
}

.pendim-order-products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pendim-order-products li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--pendim-line);
}

.pendim-order-products li:first-child {
	border-top: 1px solid var(--pendim-line);
}

/* Each product with its photo (audit, 2026-10-23) */
.pendim-order-thumb {
	flex: 0 0 60px;
	align-self: flex-start;
}

.pendim-order-thumb img {
	display: block;
	width: 60px;
	height: 60px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	object-fit: contain;
	background: #fff;
}

.pendim-order-product {
	flex: 1;
	min-width: 0;
}

.pendim-order-product small {
	display: block;
	font-size: 13px;
	color: var(--pendim-muted);
}

.pendim-order-product-name {
	display: block;
	margin-bottom: 4px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-reorder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin-top: 10px;
}

.pendim-order-return {
	font-size: 14px;
	color: var(--pendim-muted);
	text-decoration: underline;
}

.pendim-order-product-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	white-space: nowrap;
}

.pendim-order-product-price span {
	font-size: 14px;
	color: var(--pendim-muted);
}

.pendim-order-totals {
	width: 100%;
	max-width: 360px;
	margin: 12px 0 0 auto;
}

.pendim-order-totals td {
	padding: 4px 0;
}

.pendim-order-totals .pendim-total-total td {
	font-size: 17px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-order-totals tr:not(.pendim-total-total):not(:first-child) td {
	font-size: 14px;
}

.pendim-order-progress {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pendim-order-progress li {
	padding: 8px 0 8px 16px;
	border-left: 2px solid var(--pendim-line);
}

.pendim-order-progress li:last-child {
	border-left-color: var(--pendim-blue);
}

.pendim-order-progress-date {
	display: inline-block;
	min-width: 96px;
	color: var(--pendim-muted);
}

.pendim-order-progress p {
	margin: 2px 0 0;
	font-size: 14px;
}

/* Wish list (audit, 2026-10-22): one card per product */
.pendim-wishlist {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.pendim-wishlist li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
}

.pendim-wishlist-thumb img {
	display: block;
	width: 80px;
	height: auto;
}

.pendim-wishlist-main {
	flex: 1;
	min-width: 0;
}

.pendim-wishlist-name {
	display: block;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-wishlist-price {
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-wishlist-price s {
	margin-left: 6px;
	font-weight: 400;
	color: var(--pendim-muted);
}

.pendim-wishlist-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pendim-wishlist-actions form {
	margin: 0;
}

.pendim-wishlist-remove {
	font-size: 14px;
	color: var(--pendim-muted);
	text-decoration: underline;
}

/* Address book (audit, 2026-10-23): one card per address, the form's lists as tall as its fields */
.pendim-addresses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.pendim-addresses li {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	background: #fff;
}

.pendim-addresses p {
	margin: 0;
}

.pendim-address-main {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--pendim-blue);
}

.pendim-address-actions {
	display: flex;
	gap: 20px;
}

.pendim-address-actions a {
	color: var(--pendim-blue);
	text-decoration: underline;
}

.pendim-address-actions .pendim-address-delete {
	color: var(--pendim-muted);
}

.pendim-address-actions .pendim-confirm {
	color: #c62828;
	font-weight: 500;
}

#account-address .form-select {
	height: 38px;
	padding: 9px 30px 9px 9px;
	border-color: var(--pendim-line);
	border-radius: 3px;
	font-size: 12px;
	line-height: 18px;
}

.pendim-address-default {
	margin: 0 0 16px;
}

.pendim-address-main-note {
	font-size: 14px;
	color: var(--pendim-muted);
}

.pendim-address-save {
	text-align: right;
}

/* Account details and password (audits, 2026-10-23), and setting a new password from the emailed link (launch checks,
   2026-10-27): labels above the fields, as on the phone */
#form-customer,
#form-password,
#form-reset {
	max-width: 620px;
}

#form-customer .form-label,
#form-password .form-label,
#form-reset .form-label {
	margin-bottom: 4px;
}

#form-customer .form-text,
#form-password .form-text,
#form-reset .form-text {
	font-size: 13px;
	color: var(--pendim-muted);
}

#form-customer .pendim-vat-state {
	color: var(--pendim-ink);
}

/* Header cart (cart dropdown audit, 2026-10-23): white, each product with its choices on one line, the total with VAT,
   a remove button big enough to hit; "My cart" in sentence case */
#cart .shopcart .text-shopping-cart {
	text-transform: none;
}

#cart .pendim-minicart {
	width: 340px;
	max-width: calc(100vw - 32px);
	max-height: min(70vh, 520px);
	overflow-y: auto;
	padding: 6px 0 0;
	background: #fff;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius-card);
	box-shadow: var(--pendim-shadow);
}

#cart .pendim-minicart > li {
	list-style: none;
}

#cart .pendim-minicart-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 10px 16px;
	border-bottom: 1px solid var(--pendim-line);
}

#cart .pendim-minicart-thumb img {
	display: block;
	width: 64px;
	height: 48px;
	object-fit: contain;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
}

#cart .pendim-minicart-info {
	display: grid;
	gap: 2px;
	min-width: 0;
}

#cart .pendim-minicart-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pendim-ink);
}

#cart .pendim-minicart-name:hover {
	color: var(--pendim-blue);
}

#cart .pendim-minicart-choices {
	font-size: 12px;
	line-height: 1.4;
	color: var(--pendim-muted);
}

#cart .pendim-minicart-line {
	font-size: 13px;
	color: var(--pendim-text);
}

#cart .pendim-minicart-remove {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pendim-muted);
	font-size: 15px;
	cursor: pointer;
}

#cart .pendim-minicart-remove:hover,
#cart .pendim-minicart-remove:focus-visible {
	background: var(--pendim-surface);
	color: #c62828;
}

#cart .pendim-minicart-total {
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 12px 16px 4px;
	font-size: 15px;
	color: var(--pendim-ink);
}

#cart .pendim-minicart-total small {
	grid-column: 1 / -1;
	font-size: 12px;
	line-height: 1.45;
	color: var(--pendim-muted);
}

#cart .pendim-minicart-actions {
	display: flex;
	gap: 10px;
	padding: 12px 16px 16px;
}

/* Own classes: the theme styles the dropdown's .btn links its own way (a blue "View cart", a grey "Checkout") */
#cart .pendim-minicart-actions a {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	background: #fff;
	color: var(--pendim-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

#cart .pendim-minicart-actions a.pendim-minicart-checkout {
	border-color: var(--pendim-blue);
	background: var(--pendim-blue);
	color: #fff;
}

#cart .pendim-minicart-actions a:hover {
	border-color: var(--pendim-blue);
	color: var(--pendim-blue);
}

#cart .pendim-minicart-actions a.pendim-minicart-checkout:hover {
	background: var(--pendim-blue-dark);
	color: #fff;
}

#cart .pendim-minicart-empty {
	display: grid;
	gap: 6px;
	padding: 18px 16px 20px;
	text-align: center;
	font-size: 14px;
}

#cart .pendim-minicart-empty p {
	margin: 0;
	color: var(--pendim-text);
}

#cart .pendim-minicart-empty a {
	color: var(--pendim-blue);
	text-decoration: underline;
}

/* The window after "Add to cart" (audit, 2026-10-23): one compact window, the product with its choices, the cart total,
   Checkout first; stacked on narrow screens */
#previewModal .pendim-added-dialog {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

#previewModal .modal-content {
	border: 0;
	border-radius: var(--pendim-radius-card);
	box-shadow: var(--pendim-shadow);
}

#previewModal .modal-body {
	padding: 0;
}

.pendim-added {
	display: grid;
	gap: 16px;
	padding: 18px 20px 20px;
}

.pendim-added-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pendim-added-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	color: var(--pendim-ink);
}

.pendim-added-title i {
	color: #1e7e34;
}

.pendim-added-head .btn-close {
	width: 40px;
	height: 40px;
	padding: 0;
	background-size: 14px;
	border-radius: 50%;
}

.pendim-added-product {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: start;
}

.pendim-added-thumb img {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: contain;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
}

.pendim-added-info {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.pendim-added-name {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--pendim-ink);
}

.pendim-added-choices {
	font-size: 13px;
	line-height: 1.45;
	color: var(--pendim-muted);
}

.pendim-added-line {
	font-size: 14px;
	color: var(--pendim-text);
}

.pendim-added-total {
	display: grid;
	grid-template-columns: 1fr auto;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--pendim-line);
	font-size: 15px;
	color: var(--pendim-ink);
}

.pendim-added-total small {
	grid-column: 1 / -1;
	font-size: 12px;
	color: var(--pendim-muted);
}

.pendim-added-actions {
	display: flex;
	gap: 10px;
}

.pendim-added-actions a {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	background: #fff;
	color: var(--pendim-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}

.pendim-added-actions a.pendim-added-checkout {
	order: 2;
	border-color: var(--pendim-blue);
	background: var(--pendim-blue);
	color: #fff;
}

.pendim-added-actions a:hover {
	border-color: var(--pendim-blue);
	color: var(--pendim-blue);
}

.pendim-added-actions a.pendim-added-checkout:hover {
	background: var(--pendim-blue-dark);
	color: #fff;
}

.pendim-added-continue {
	margin: -4px 0 0;
	text-align: center;
	font-size: 14px;
}

.pendim-added-continue a {
	color: var(--pendim-muted);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.pendim-added-actions {
		flex-direction: column-reverse;
	}

	.pendim-added-product {
		grid-template-columns: 72px 1fr;
	}

	.pendim-added-thumb img {
		width: 72px;
		height: 54px;
	}
}

/* Messages (alerts and messages audit, 2026-10-23): one look for the shop's green, red and blue messages, in the page
   and in the messages' corner (#alert, the theme's js/common.js pendimAlert()): a white card with a coloured edge and
   icon, dark text and underlined links; the theme's were white on solid colour, hard to read */
body .alert {
	position: relative;
	z-index: auto;
	min-height: 0;
	margin: 0 0 16px;
	padding: 12px 44px 12px 42px;
	border: 1px solid #e3e6ea;
	border-left: 4px solid var(--pendim-alert, #1565c0);
	border-radius: 6px;
	background: #fff;
	color: #232f3f;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	box-shadow: none;
	transition: none;
	animation: none;
	transform: none;
}

body .alert:not(:has(> i)) {
	padding-left: 16px;
}

body .alert:not(:has(> .btn-close, > button.close)) {
	padding-right: 16px;
}

body .alert > i {
	position: absolute;
	top: 14px;
	bottom: auto;
	left: 14px;
	width: auto;
	height: auto;
	background: none;
	color: var(--pendim-alert, #1565c0);
	font-size: 17px;
	line-height: 1;
	text-shadow: none;
	animation: none;
}

body .alert > i::before {
	position: static;
	line-height: 1;
}

body .alert a,
body .alert a:visited,
body .alert a:hover,
body .alert a:focus {
	color: var(--pendim-blue);
	font-weight: inherit;
	text-decoration: underline;
}

body .alert > .btn-close,
body .alert > button.close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	opacity: 0.55;
	transform: none;
}

body .alert > .btn-close:hover,
body .alert > button.close:hover {
	opacity: 0.9;
}

body .alert-success {
	--pendim-alert: #2e7d32;
}

body .alert-danger {
	--pendim-alert: #c62828;
}

body .alert-warning {
	--pendim-alert: #b26a00;
}

body .alert-info {
	--pendim-alert: #1565c0;
}

/* The messages' corner: top right, below the header while it is in view (js/common.js pendimAlertPlace()), clear of
   the account links and the phone number it covered */
#alert {
	--pendim-alert-edge: top;
	position: fixed;
	top: 16px;
	right: 20px;
	z-index: 10010;
	width: 380px;
	max-width: calc(100% - 32px);
}

#alert > .alert {
	margin: 0 0 10px;
	box-shadow: 0 6px 20px rgba(35, 47, 63, 0.16);
}

/* After signing up and logging out (account/success.twig, sign-up and log-out pages audit, 2026-10-24): the ways on
   under the text, the links in the shop's blue */
#account-success .pendim-done-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 14px;
}

#account-success .pendim-done-actions .btn {
	min-width: 180px;
	padding: 10px 20px;
	font-size: 15px;
}

/* The theme's buttons are all blue: the second way on is white */
#account-success .pendim-done-actions .btn-light {
	border: 1px solid var(--pendim-line);
	background: #fff;
	color: var(--pendim-ink);
}

#account-success .pendim-done-actions .btn-light:hover,
#account-success .pendim-done-actions .btn-light:focus {
	border-color: var(--pendim-blue);
	background: #fff;
	color: var(--pendim-blue);
}

#account-success .pendim-done-text a,
#account-success .pendim-done-shop a {
	color: var(--pendim-blue);
	text-decoration: underline;
}

/* Login (account/login.twig, login page audit, 2026-10-25): logging in and "New to Pendim?" side by side at a
   comfortable width, "Forgotten your password?" by the password label, full-width buttons, the second one white */
#account-login .pendim-login {
	max-width: 900px;
	margin: 0 auto;
}

#account-login .pendim-login-card {
	height: 100%;
	padding: 24px;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	background: #fff;
}

#account-login .pendim-login-card h2 {
	margin: 0 0 16px;
	font-size: 22px;
}

#account-login .pendim-login-password {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

#account-login .pendim-login-password a {
	font-size: 14px;
	color: var(--pendim-blue);
	text-decoration: underline;
}

#account-login .pendim-login-card .btn {
	width: 100%;
	padding: 10px 14px;
	font-size: 15px;
}

#account-login .pendim-login-card .btn-light {
	border: 1px solid var(--pendim-line);
	background: #fff;
	color: var(--pendim-ink);
}

#account-login .pendim-login-card .btn-light:hover,
#account-login .pendim-login-card .btn-light:focus {
	border-color: var(--pendim-blue);
	background: #fff;
	color: var(--pendim-blue);
}

/* Product option messages audit (2026-10-26): an option left out at "Add to cart" says so under it in readable red
   (js/common.js pendimOptionErrors()), its field outlined; required options starred, text boxes too */
#product .pendim-option-error {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 6px;
	color: #c62828;
	font-size: 14px;
	line-height: 1.4;
}

#product .pendim-option-error i {
	flex: none;
}

#product select[aria-invalid="true"],
#product textarea[aria-invalid="true"],
#product input[type="text"][aria-invalid="true"] {
	border: 1px solid #c62828;
}

#product .required .control-label::before,
#product .required > .form-label::before {
	content: "* ";
	color: #c62828;
}

/* Specifications on the product page (phone item specifics table audit, 2026-10-26): names and values in rows as tall
   as their longest part, two to a line from tablets up (product/product.twig); the names in the readable grey */
.pendim-specs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 32px;
	margin: 0 0 24px;
}

@media (min-width: 768px) {
	.pendim-specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pendim-spec {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	column-gap: 16px;
	padding: 6px 0;
	border-bottom: 1px solid var(--pendim-line);
	line-height: 1.5;
}

.pendim-spec dt {
	font-weight: 400;
	color: var(--pendim-muted);
}

.pendim-spec dd {
	margin: 0;
	color: var(--pendim-text);
}

/* Links in a product's description look like links (product review, 2026-10-26: "custom-made mallets") */
#collapse-description a {
	color: var(--pendim-blue);
	text-decoration: underline;
}

/* Ask for a price (launch checks, 2026-10-27): the contact form's look in a narrower window, its white fields, dark
   labels and blue Send; one column below a computer's width */
#call-for-price-modal .modal-dialog {
	max-width: 760px;
}

#call-for-price-modal .modal-content {
	border: 0;
	border-radius: var(--pendim-radius-card);
	box-shadow: var(--pendim-shadow);
}

.pendim-enquiry h3.page-subheading {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 500;
	text-transform: none;
	color: var(--pendim-ink);
}

.pendim-enquiry .pendim-enquiry-product {
	margin-bottom: 16px;
	color: var(--pendim-muted);
}

.pendim-enquiry .form-label {
	margin-bottom: 4px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-enquiry .form-control,
.pendim-enquiry .form-select {
	height: 38px;
	padding: 6px 12px;
	background-color: #fff;
	border: 1px solid var(--pendim-line);
	border-radius: var(--pendim-radius);
	font-size: 13px;
	color: var(--pendim-text);
}

.pendim-enquiry textarea.form-control {
	height: auto;
}

.pendim-enquiry .form-control:focus,
.pendim-enquiry .form-select:focus {
	background-color: #fff;
	border-color: var(--pendim-blue);
	box-shadow: 0 0 0 3px var(--pendim-blue-tint);
}

.pendim-enquiry fieldset legend {
	margin-bottom: 4px;
	text-transform: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--pendim-ink);
}

.pendim-enquiry #captcha img {
	border-radius: var(--pendim-radius);
}

.pendim-enquiry .btn-primary {
	padding: 10px 24px;
	border: 0;
	border-radius: var(--pendim-radius);
	background: var(--pendim-blue);
	color: #fff;
}

.pendim-enquiry .btn-primary:hover,
.pendim-enquiry .btn-primary:focus {
	background: var(--pendim-blue-dark);
	color: #fff;
}