/* =========================================================================
   Trüffelshop – WooCommerce base
   Shared shell, notices, buttons and form fields for the WooCommerce pages
   that are not built with Elementor (cart, checkout, my account, order
   pages). Loaded only on those pages, see functions.php.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Design tokens taken from the Elementor kit / Figma file
   ---------------------------------------------------------------------- */
body.ts-wc-page,
body.woocommerce-page,
body.woocommerce {
	--ts-green: #BBBC00;
	--ts-green-dark: #A3A402;
	--ts-green-ink: #2E2F09;
	--ts-ink: #323232;
	--ts-text: #3F3F3F;
	--ts-muted: #6F6F6F;
	--ts-line: #D7D7D6;
	--ts-line-soft: #ECECEC;
	--ts-card: #FFFFFF;
	--ts-page: #FAF3F1;
	--ts-tint: #FFF8F6;
	--ts-radius: 20px;
	--ts-radius-sm: 12px;
	--ts-serif: "Recoleta Alt", Georgia, serif;
	--ts-sans: "DM Sans", -apple-system, "Segoe UI", sans-serif;
	--ts-shadow: 0 1px 20px rgba(0, 0, 0, 0.05);
	/* Same content width as the Elementor containers (kit breakpoints). */
	--ts-container: 1671px;
	--ts-gutter: 30px;
}
@media (max-width: 1540px) {
	body.ts-wc-page,
	body.woocommerce-page,
	body.woocommerce {
		--ts-container: 1440px;
	}
}
@media (max-width: 1024px) {
	body.ts-wc-page,
	body.woocommerce-page,
	body.woocommerce {
		--ts-container: 1024px;
		--ts-gutter: 24px;
	}
}
@media (max-width: 767px) {
	body.ts-wc-page,
	body.woocommerce-page,
	body.woocommerce {
		--ts-container: 767px;
		--ts-gutter: 16px;
	}
}

/* -------------------------------------------------------------------------
   Page shell – the same soft background and centred container as the
   Elementor templates, with the page title in the shop's heading font
   ---------------------------------------------------------------------- */
/* The theme caps <main> at its content width; here it runs edge to edge so
   the page colour is full width, and the inner blocks sit in the container. */
.ts-wc-page main#content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 var(--ts-gutter);
	background: var(--ts-page);
	font-family: var(--ts-sans);
	color: var(--ts-text);
	box-sizing: border-box;
}
.ts-wc-page main#content .page-header,
.ts-wc-page main#content .page-content {
	width: 100%;
	max-width: var(--ts-container);
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}
.ts-wc-page main#content .page-header {
	padding-top: 56px;
	padding-bottom: 0;
	border: 0;
	text-align: center;
}
.ts-wc-page main#content .page-header .entry-title {
	/* The theme caps the title at its own content width, which pushed the
	   centred text off to the left of the container. */
	width: 100%;
	max-width: none;
	margin: 0;
	font-family: var(--ts-serif);
	font-size: 56px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	color: var(--ts-ink);
}
.ts-wc-page main#content .page-content {
	padding-top: 40px;
	padding-bottom: 90px;
}
/* The WooCommerce pages wrap their shortcode in an inline-padded div. */
.ts-wc-page main#content .page-content > div[style] {
	padding: 0 !important;
}

/* The cart and checkout blocks are saved with "alignwide"; in this classic
   theme that has no width of its own, so they use the page container. */
.ts-wc-page .alignwide,
.ts-wc-page .wp-block-woocommerce-cart,
.ts-wc-page .wp-block-woocommerce-checkout {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* -------------------------------------------------------------------------
   Notices (success / info / error) in the shop's look
   ---------------------------------------------------------------------- */
.woocommerce-notices-wrapper:not(:empty) {
	width: 100%;
	max-width: calc(var(--ts-container, 1671px) + var(--ts-gutter, 30px) * 2);
	margin: 0 auto;
	padding: 24px var(--ts-gutter, 30px) 0;
	box-sizing: border-box;
}
.elementor .woocommerce-notices-wrapper:not(:empty),
.woocommerce-cart .woocommerce-notices-wrapper:not(:empty),
.woocommerce-checkout .woocommerce-notices-wrapper:not(:empty),
.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
	padding-left: 0;
	padding-right: 0;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	position: relative;
	margin: 0 0 12px !important;
	padding: 16px 22px 16px 54px !important;
	border: 1px solid #BBBC00 !important;
	border-radius: 12px !important;
	background: #FFFFF9 !important;
	box-shadow: none !important;
	outline: 0 !important;
	list-style: none;
	font-family: var(--ts-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: #323232 !important;
}
.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-info {
	border-color: #D4D4BE !important;
	background: #FFF8F6 !important;
}
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error {
	border-color: #D9A39A !important;
	background: #FFF4F2 !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: absolute !important;
	top: 50% !important;
	left: 20px !important;
	transform: translateY(-50%);
	margin: 0 !important;
	color: #BBBC00 !important;
	font-size: 18px;
	line-height: 1;
}
.woocommerce-info::before {
	color: #A3A402 !important;
}
.woocommerce-error::before {
	color: #C0392B !important;
}
.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: #A3A402;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a.wc-forward,
.woocommerce-info a.wc-forward {
	order: 2;
	float: none !important;
	margin: 0 0 0 auto !important;
	padding: 11px 22px !important;
	border: 0 !important;
	border-radius: 600px !important;
	background: #BBBC00 !important;
	color: #2E2F09 !important;
	font-family: var(--ts-sans);
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: #A3A402 !important;
	color: #FFFFFF !important;
}

/* Block notices (cart / checkout blocks use their own markup) */
.wc-block-components-notice-banner {
	align-items: center;
	margin: 0 0 16px !important;
	padding: 14px 20px !important;
	border: 1px solid var(--ts-green) !important;
	border-radius: var(--ts-radius-sm) !important;
	background: #FFFFF9 !important;
	font-family: var(--ts-sans);
	font-size: 15px;
	color: var(--ts-ink);
}
.wc-block-components-notice-banner.is-error {
	border-color: #D9A39A !important;
	background: #FFF4F2 !important;
}
.wc-block-components-notice-banner.is-info {
	border-color: #D4D4BE !important;
	background: var(--ts-tint) !important;
}
.wc-block-components-notice-banner > svg {
	fill: var(--ts-green-dark);
	background: none;
}
.wc-block-components-notice-banner.is-error > svg {
	fill: #C0392B;
}

/* -------------------------------------------------------------------------
   Buttons – one green pill for the classic markup and the block markup
   ---------------------------------------------------------------------- */
.ts-wc-page .woocommerce a.button,
.ts-wc-page .woocommerce button.button,
.ts-wc-page .woocommerce input.button,
.ts-wc-page .woocommerce a.button.alt,
.ts-wc-page .woocommerce button.button.alt,
.ts-wc-page .wp-element-button,
.ts-wc-page .wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 15px 34px;
	border: 0;
	border-radius: 600px;
	background: var(--ts-green);
	color: var(--ts-green-ink);
	font-family: var(--ts-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.18s ease, color 0.18s ease;
	cursor: pointer;
}
.ts-wc-page .woocommerce a.button:hover,
.ts-wc-page .woocommerce button.button:hover,
.ts-wc-page .woocommerce input.button:hover,
.ts-wc-page .woocommerce a.button.alt:hover,
.ts-wc-page .woocommerce button.button.alt:hover,
.ts-wc-page .wp-element-button:hover,
.ts-wc-page .wc-block-components-button:not(.is-link):hover {
	background: var(--ts-green-dark);
	color: #FFFFFF;
}
.ts-wc-page .wc-block-components-button:not(.is-link) {
	box-shadow: none !important;
}
.ts-wc-page .wc-block-components-button:not(.is-link) .wc-block-components-button__text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
/* Secondary / outline button */
.ts-wc-page .woocommerce a.button.wc-backward,
.ts-wc-page .woocommerce button.button.wc-backward,
.ts-wc-page .wc-block-components-button.outlined,
.ts-wc-page .woocommerce a.edit,
.ts-wc-page .woocommerce a.button.view {
	background: #FFFFFF;
	border: 1px solid var(--ts-line);
	color: var(--ts-ink);
}
.ts-wc-page .woocommerce a.button.wc-backward:hover,
.ts-wc-page .woocommerce button.button.wc-backward:hover,
.ts-wc-page .wc-block-components-button.outlined:hover,
.ts-wc-page .woocommerce a.edit:hover,
.ts-wc-page .woocommerce a.button.view:hover {
	border-color: var(--ts-green);
	background: rgba(187, 188, 0, 0.1);
	color: var(--ts-green-ink);
}
.ts-wc-page .wc-block-components-button.is-link {
	color: var(--ts-green-dark);
	font-family: var(--ts-sans);
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Form fields
   ---------------------------------------------------------------------- */
.ts-wc-page .woocommerce form .form-row,
.ts-wc-page .woocommerce-form-row {
	margin: 0 0 18px;
	padding: 0;
}
.ts-wc-page .woocommerce form label,
.ts-wc-page .woocommerce-form-row label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--ts-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--ts-ink);
}
.ts-wc-page .woocommerce form label .required {
	color: var(--ts-green-dark);
	text-decoration: none;
	border: 0;
}
.ts-wc-page .woocommerce input[type="text"],
.ts-wc-page .woocommerce input[type="email"],
.ts-wc-page .woocommerce input[type="tel"],
.ts-wc-page .woocommerce input[type="url"],
.ts-wc-page .woocommerce input[type="password"],
.ts-wc-page .woocommerce input[type="number"],
.ts-wc-page .woocommerce input[type="search"],
.ts-wc-page .woocommerce textarea,
.ts-wc-page .woocommerce select,
.ts-wc-page .woocommerce .select2-container .select2-selection--single,
.ts-wc-page .wc-block-components-text-input input.components-text-control__input,
.ts-wc-page .wc-block-components-textarea,
.ts-wc-page .wc-blocks-components-select .wc-blocks-components-select__select {
	width: 100%;
	min-height: 54px;
	padding: 14px 18px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius-sm);
	background: #FFFFFF;
	box-shadow: none;
	font-family: var(--ts-sans);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ts-ink);
	box-sizing: border-box;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ts-wc-page .woocommerce textarea,
.ts-wc-page .wc-block-components-textarea {
	min-height: 120px;
}
.ts-wc-page .woocommerce input:focus,
.ts-wc-page .woocommerce textarea:focus,
.ts-wc-page .woocommerce select:focus,
.ts-wc-page .wc-block-components-text-input input.components-text-control__input:focus,
.ts-wc-page .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	outline: 0;
	border-color: var(--ts-green);
	box-shadow: 0 0 0 3px rgba(187, 188, 0, 0.18);
}
.ts-wc-page .woocommerce select,
.ts-wc-page .wc-blocks-components-select .wc-blocks-components-select__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23323232' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}
/* Floating labels of the block fields */
.ts-wc-page .wc-block-components-text-input label,
.ts-wc-page .wc-blocks-components-select__label {
	font-family: var(--ts-sans);
	color: var(--ts-muted);
}
.ts-wc-page .wc-block-components-text-input.is-active label {
	color: var(--ts-green-dark);
}
.ts-wc-page .wc-block-components-validation-error {
	font-family: var(--ts-sans);
	font-size: 13px;
	color: #C0392B;
}
/* Checkboxes and radios */
.ts-wc-page .woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--ts-line);
}
.ts-wc-page .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
.ts-wc-page .woocommerce input[type="checkbox"],
.ts-wc-page .woocommerce input[type="radio"] {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	accent-color: var(--ts-green);
}
.ts-wc-page .wc-block-components-checkbox__label,
.ts-wc-page .wc-block-components-radio-control__label {
	font-family: var(--ts-sans);
	font-size: 15px;
	color: var(--ts-text);
}

/* -------------------------------------------------------------------------
   Headings, links and generic tables inside the WooCommerce pages
   ---------------------------------------------------------------------- */
.ts-wc-page .woocommerce h2,
.ts-wc-page .woocommerce h3,
.ts-wc-page .wc-block-components-title {
	font-family: var(--ts-serif);
	font-weight: 500;
	line-height: 1.25;
	color: var(--ts-ink);
}
.ts-wc-page .woocommerce h2,
.ts-wc-page .wc-block-components-title {
	font-size: 30px;
	margin: 0 0 20px;
}
.ts-wc-page .woocommerce h3 {
	font-size: 24px;
	margin: 0 0 16px;
}
.ts-wc-page .woocommerce a:not(.button):not(.wc-block-components-button) {
	color: var(--ts-green-dark);
	text-underline-offset: 3px;
}
.ts-wc-page .woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 30px;
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ts-card);
	overflow: hidden;
	font-family: var(--ts-sans);
	font-size: 16px;
	color: var(--ts-text);
}
.ts-wc-page .woocommerce table.shop_table th,
.ts-wc-page .woocommerce table.shop_table td {
	padding: 18px 24px;
	border: 0;
	border-top: 1px solid var(--ts-line-soft);
	text-align: left;
	vertical-align: middle;
}
.ts-wc-page .woocommerce table.shop_table thead th {
	border-top: 0;
	background: var(--ts-tint);
	font-family: var(--ts-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ts-ink);
}
.ts-wc-page .woocommerce table.shop_table tbody tr:first-child td {
	border-top: 0;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ts-wc-page main#content .page-header {
		padding-top: 40px;
	}
	.ts-wc-page main#content .page-header .entry-title {
		font-size: 42px;
	}
	.ts-wc-page main#content .page-content {
		padding-top: 30px;
		padding-bottom: 60px;
	}
}

@media (max-width: 767px) {
	.ts-wc-page main#content .page-header {
		padding-top: 28px;
	}
	.ts-wc-page main#content .page-header .entry-title {
		font-size: 32px;
	}
	.ts-wc-page main#content .page-content {
		padding-top: 22px;
		padding-bottom: 46px;
	}
	.woocommerce-notices-wrapper:not(:empty) {
		padding-top: 16px;
	}
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		padding: 14px 16px 14px 46px !important;
		font-size: 14px;
	}
	.woocommerce-message::before,
	.woocommerce-info::before,
	.woocommerce-error::before {
		left: 16px !important;
	}
	.woocommerce-message .button,
	.woocommerce-info .button,
	.woocommerce-error .button {
		margin-left: 0 !important;
	}
	.ts-wc-page .woocommerce h2,
	.ts-wc-page .wc-block-components-title {
		font-size: 24px;
	}
	.ts-wc-page .woocommerce table.shop_table th,
	.ts-wc-page .woocommerce table.shop_table td {
		padding: 14px 16px;
	}
}

/* =========================================================================
   Product archives – compact category header (template 43167, container
   d670f31): category name and the category description on a colour that
   changes per category, so the products are visible right away.
   ====================================================================== */
.elementor-43167 .elementor-element-d670f31 {
	--ts-cat-bg: #F6D5BE;
	background-color: var(--ts-cat-bg) !important;
	background-image: none !important;
	min-height: 0 !important;
}
.term-frische-trueffeln .elementor-element-d670f31 { --ts-cat-bg: #E8DFD2; }
.term-oel-und-butter .elementor-element-d670f31,
.term-trueffeloel .elementor-element-d670f31,
.term-trueffelbutter .elementor-element-d670f31 { --ts-cat-bg: #F1E6BD; }
.term-pasta-und-risotto .elementor-element-d670f31,
.term-trueffelpasta .elementor-element-d670f31,
.term-trueffelrisotto .elementor-element-d670f31 { --ts-cat-bg: #F6D5BE; }
.term-saucen-und-jus .elementor-element-d670f31 { --ts-cat-bg: #EBD8CB; }
.term-salami-und-kaese .elementor-element-d670f31 { --ts-cat-bg: #F1DDD3; }
.term-trueffel-im-glas .elementor-element-d670f31 { --ts-cat-bg: #E3E5D0; }
.term-hobel .elementor-element-d670f31 { --ts-cat-bg: #E4E2DD; }
.term-trueffelspezialitaeten .elementor-element-d670f31 { --ts-cat-bg: #EFE1CF; }
.term-praesente .elementor-element-d670f31,
.term-praesentkoerbe .elementor-element-d670f31,
.term-geschenkgutscheine .elementor-element-d670f31 { --ts-cat-bg: #F0DADA; }

.elementor-43167 .elementor-element-9635508 {
	width: 100% !important;
	max-width: 860px !important;
}
.elementor-43167 .ts-cat-hero__title .elementor-heading-title {
	margin: 0 0 14px;
	text-shadow: none;
}
.elementor-43167 .ts-cat-hero__text {
	font-family: "DM Sans", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: #3F3F3F;
}
.elementor-43167 .ts-cat-hero__text p {
	margin: 0 0 8px;
}
.elementor-43167 .ts-cat-hero__text p:last-child {
	margin-bottom: 0;
}
.elementor-43167 .ts-cat-hero__text strong {
	font-weight: 600;
	color: #2A2A2A;
}
.elementor-43167 .ts-cat-hero__text:has(.elementor-widget-container:empty),
.elementor-43167 .ts-cat-hero__text:empty {
	display: none;
}
@media (max-width: 767px) {
	.elementor-43167 .ts-cat-hero__text {
		font-size: 15px;
		line-height: 1.55;
	}
}