/* Brand colours, site-wide. Loaded last via igx-brand.php.

   1. Palette: the same colour values the home page HTML widget sets, so
      shop, product, cart and checkout pages match the home page instead of
      the theme defaults (black / gold / beige). Colours only; fonts and
      layout are left to each page.
   2. The colour rules from that same widget, which also only reached the
      home page.
   3. Cart drawer (.wdt-shop-cart-widget): buttons follow the home hero
      buttons: brand pink var(--e-global-color-primary, #FF55AD), white,
      2px corners. Kitty Pro and Kitty Plus both style the drawer with
      equal-specificity rules that fight each other, hence the !important.
   4. Notices (saved / added to cart / no products found / errors): white
      box, thin pink outline, small icon in front of the text. */

/* 1. Palette ------------------------------------------------------------ */

:root {
	--wdtPrimaryColor: #812143;
	--wdtPrimaryColorRgb: 129, 33, 67;
	--wdtTertiaryColor: #F9E8EF;
	--wdtHeadAltColor: #4B2020;
	--wdtBodyBGColor: #FFF1F7;
	--wdtLinkHoverColor: #812143;
	--wdtLinkHoverColorRgb: 129, 33, 67;
	--wdtBorderColor: #F3D2E0;
	--wdtBodyTxtColor: #735C60;
}

/* 2. Colour rules carried over from the home page widget ---------------- */

body > .wdt-search-form-container .wdt-search-form-close:hover {
	background-color: var(--wdtLinkColor) !important;
}
#footer .elementor-widget-heading .elementor-heading-title {
	color: var(--wdtAccentTxtColor);
}
.woocommerce ul.products[class*="product-padding-default"].wdt-cust-product-temp-1.with-temp-2 li.product .product-wrapper {
	background-color: var(--wdtAccentTxtColor) !important;
}
.woocommerce ul.products li.product .product-details .product-category-wrapper a {
	color: var(--wdtHeadAltColor) !important;
}
.woocommerce ul.products li.product .product-details .product-category-wrapper a:hover {
	color: var(--wdtPrimaryColor) !important;
}
.mobile-nav-container .menu-trigger {
	color: var(--wdtBodyTxtColor);
}
.woocommerce div.product .summary form.variations_form.cart .variations li {
	border: 1px solid var(--wdt-elementor-color-accent) !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock),
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
	border-color: var(--wdtPrimaryColor) !important;
}
.woocommerce .quantity.quantity-with-plusminus input {
	color: var(--wdt-elementor-color-primary) !important;
}
.woocommerce .quantity.quantity-with-plusminus input:not(.qty):hover {
	color: var(--wdtPrimaryColor) !important;
}
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce button.button.alt.disabled {
	color: var(--wdt-elementor-color-primary) !important;
	border: 1px solid var(--wdt-elementor-color-primary) !important;
}
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
	color: var(--wdtAccentTxtColor) !important;
}
body[class*="woocommerce"] .yith-wcqv-wrapper #yith-quick-view-close:hover {
	background-color: var(--wdtPrimaryColor) !important;
}

/* 3. Cart drawer -------------------------------------------------------- */

body .wdt-shop-cart-widget.activate-sidebar-widget {
	background-color: var(--wdtBodyBGColor);
}

body .wdt-shop-cart-widget[class*="sidebar"] .wdt-shop-cart-widget-content .woocommerce-mini-cart-footer p.buttons {
	height: auto !important;
	line-height: normal !important;
}

body .wdt-shop-cart-widget[class*="sidebar"] .wdt-shop-cart-widget-content .woocommerce-mini-cart-footer p.buttons.woocommerce-mini-cart__buttons a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto !important;
	margin: 0 !important;
	padding: 16px 12px !important;
	border: 1px solid var(--e-global-color-primary, #FF55AD) !important;
	border-radius: 2px !important;
	background-color: #ffffff !important;
	color: var(--e-global-color-primary, #FF55AD) !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
}
body .wdt-shop-cart-widget[class*="sidebar"] .wdt-shop-cart-widget-content .woocommerce-mini-cart-footer p.buttons.woocommerce-mini-cart__buttons a.button.checkout,
body .wdt-shop-cart-widget[class*="sidebar"] .wdt-shop-cart-widget-content .woocommerce-mini-cart-footer p.buttons.woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
	background-color: var(--e-global-color-primary, #FF55AD) !important;
	color: #ffffff !important;
}
body .wdt-shop-cart-widget[class*="sidebar"] .wdt-shop-cart-widget-content .woocommerce-mini-cart-footer p.buttons.woocommerce-mini-cart__buttons a.button.checkout:hover {
	background-color: #ffffff !important;
	color: var(--e-global-color-primary, #FF55AD) !important;
}

/* 4. Page title / breadcrumb banner ------------------------------------- */

/* Photo behind the title banner on every page that shows it. The theme's
   dark overlay (.main-title-section-bg:after) stays on top so the white
   title and breadcrumb remain readable.

   With an absolute header the title wrapper is position:static, so this
   photo was stretching up behind the header and the banner only showed
   the bottom of the picture. Keep it inside the title strip. */
#header-wrapper.header-top-absolute .main-title-section-wrapper {
	position: relative;
}
.main-title-section-wrapper > .main-title-section-bg {
	background-image: url(breadcrumb_bkg.jpg?v=20261018);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	top: 0;
	right: 0;
	bottom: 0;
	height: auto !important;
}

.main-title-section-wrapper {
	position: relative;
}

.main-title-section-wrapper > .main-title-section-container {
	position: relative;
	z-index: 3;
}

/* The banner keeps the page name only. Home / Shop / Sets is not shown. */
.main-title-section-wrapper .breadcrumb {
	display: none;
}
.main-title-section-wrapper .main-title-section h1 {
	margin-bottom: 0;
}

.main-title-section-wrapper::before,
.main-title-section-wrapper::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: min(280px, 24vw);
	background-repeat: no-repeat;
	background-size: auto 100%;
	pointer-events: none;
}

.main-title-section-wrapper::before {
	left: 0;
	background-image: url(title-left.png);
	background-position: left center;
}

.main-title-section-wrapper::after {
	right: 0;
	background-image: url(title-right.png);
	background-position: right center;
}

/* 4. Notices ------------------------------------------------------------- */

/* WooCommerce's message boxes ("saved", "added to cart", "no products
   found", errors) came out beige with a green / blue / red line across the
   top. Here each is a plain white box with one thin pink outline and a small
   round icon in front of the text: a pink tick for confirmations, a burgundy
   "i" for information, a red "!" for errors. No coloured bars or edges. The
   theme sets their padding and margin with !important and switches them to
   centred table boxes on small screens, hence the !important here. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	--igx-note: var(--e-global-color-primary, #FF55AD);
	--igx-note-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229.5%22/%3E%3Cpath d=%22M8 12.5l2.8 2.8L16 9.8%22/%3E%3C/svg%3E");
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 0 24px !important;
	padding: 14px 18px !important;
	border: 1px solid var(--wdtBorderColor, #F3D2E0) !important;
	border-radius: 2px !important;
	background: #fff !important;
	color: var(--wdtHeadAltColor, #4B2020) !important;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left !important;
	list-style: none;
	box-shadow: none !important;
}
body .woocommerce-info {
	--igx-note: var(--wdtPrimaryColor, #812143);
	--igx-note-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229.5%22/%3E%3Cpath d=%22M12 11v5.5%22/%3E%3Cpath d=%22M12 7.6v.1%22/%3E%3C/svg%3E");
}
body .woocommerce-error {
	--igx-note: #C0392B;
	--igx-note-ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229.5%22/%3E%3Cpath d=%22M12 7.5V13%22/%3E%3Cpath d=%22M12 16.4v.1%22/%3E%3C/svg%3E");
}
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
	content: "" !important;
	position: static !important;
	display: block !important;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	background-color: var(--igx-note);
	-webkit-mask: var(--igx-note-ico) center / contain no-repeat;
	mask: var(--igx-note-ico) center / contain no-repeat;
}
body .woocommerce-message::after,
body .woocommerce-info::after,
body .woocommerce-error::after {
	content: none !important;
}
body .woocommerce-error li {
	margin: 0;
	padding: 0;
}
/* An error notice is a list. The row layout above put every message in its own
   column, so "Billing First name is a required field." broke across five lines. */
body .woocommerce ul.woocommerce-error {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	position: relative;
	padding: 14px 18px 14px 50px !important;
}
body .woocommerce ul.woocommerce-error::before {
	position: absolute !important;
	top: 16px;
	left: 16px;
}
body .woocommerce ul.woocommerce-error li {
	display: block;
	flex: none;
	width: 100%;
	white-space: normal;
}
/* Links in a notice are plain text links. Some carry role="button" ("Click here
   to enter your code" on the checkout), which the theme paints as a filled
   burgundy pill; with the link colour on top its words vanished. */
body .woocommerce-message a,
body .woocommerce-info a,
body .woocommerce-error a {
	display: inline !important;
	float: none;
	width: auto;
	min-height: 0;
	margin: 0 0 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--wdtPrimaryColor, #812143) !important;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	box-shadow: none !important;
}
/* "View cart" and similar buttons inside a notice sit at the right end as a plain link. */
body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button {
	order: 2;
	display: inline !important;
	float: none;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--e-global-color-primary, #FF55AD) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: inherit;
	text-transform: none;
	text-decoration: underline;
	white-space: nowrap;
}
/* In the shop owner's screens the boxes follow those rounded white panels: no outline, soft shadow. */
body .woocommerce-MyAccount-content .woocommerce-message,
body .woocommerce-MyAccount-content .woocommerce-info,
body .woocommerce-MyAccount-content .woocommerce-error {
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(75, 32, 32, 0.04), 0 12px 32px rgba(75, 32, 32, 0.06) !important;
}

/* Contact and Shipping sit directly under the title banner. The theme
   adds 50–150px under #header-wrapper on every page. */
body.page-id-2045 #header-wrapper,
body.page-id-2252 #header-wrapper {
	margin-bottom: 0;
}