/* RTL modern template: layout, header, sidebar, footer, responsive */

:root {
	--primary: #1F69CF;
	--primary-dark: #154f9f;
	--accent: #c90000;
	--text: #1d2330;
	--muted: #6b7280;
	--line: #e5e7eb;
	--bg: #f4f6fa;
	--card: #ffffff;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 14px rgba(16, 24, 40, 0.05);
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
	margin: 0;
	min-height: 100%;
	direction: rtl;
	text-align: right;
	font-family: "Segoe UI", Tahoma, Arial, "Helvetica Neue", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
}

form { margin: 0; padding: 0; }
form.main-form { display: block; margin: 0; padding: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

/* Site frame */
.site {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 16px 24px;
}

/* Header */
.site-header {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 14px 20px 0;
}

.header-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.brand { flex: 0 0 auto; display: block; }
.brand img { max-height: 84px; width: auto; }

.top-nav { flex: 1 1 auto; min-width: 0; }
.top-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.top-nav li { position: relative; }
.top-nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 200px;
	flex-direction: column;
	gap: 0;
	padding: 6px 0;
	background: var(--card);
	border-radius: 10px;
	box-shadow: var(--shadow);
	z-index: 20;
}
.top-nav li:hover > ul,
.top-nav li:focus-within > ul { display: flex; }
.top-nav li ul a { display: block; padding: 8px 14px; color: var(--text); }
.top-nav li ul a:hover { background: var(--bg); text-decoration: none; }

.top-nav a.root-item,
.top-nav a.root-item-selected {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}
.top-nav a.root-item:hover,
.top-nav a.root-item-selected:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
.top-nav a.root-item span,
.top-nav a.root-item-selected span { color: inherit; }
.top-nav li.selected > a.root-item { background: var(--primary-dark); }

/* Header tools */
.header-tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.header-tools a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--bg);
}
.header-tools a:hover { background-color: #e6ecf7; }
a.home-icon, a.search-icon, a.feedback-icon {
	background-image: url(images/icons-sprite.gif);
	background-repeat: no-repeat;
	background-color: var(--bg);
}
a.home-icon { background-position: 0 0; }
a.search-icon { background-position: 0 -15px; }
a.feedback-icon { background-position: 0 -29px; }
a.cart-link {
	width: auto;
	height: auto;
	padding: 6px 14px;
	border-radius: 999px;
	background: #e6ecf7;
	color: var(--primary-dark);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

/* Banner */
.banner {
	position: relative;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	align-items: center;
	gap: 16px;
	margin: 14px 0 0;
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	background: #fff;
}
.banner-media img { display: block; width: 100%; height: auto; }
.banner-slogan {
	padding: 16px 20px;
	color: var(--primary);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
}
#banner-overlay { display: none; }

/* Layout: content first in reading order, sidebar on the inline-end (left in RTL) */
.layout {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 24px;
	margin-top: 24px;
	align-items: start;
}

.workarea {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 24px 26px;
}

.sidebar {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}

/* Sidebar cards */
.card {
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 16px;
	margin-bottom: 16px;
}

/* Vertical (left) menu */
#left-menu { list-style: none; margin: 0; padding: 0; }
#left-menu li { border-bottom: 1px solid var(--line); }
#left-menu li:last-child { border-bottom: 0; }
#left-menu a { display: block; padding: 8px 6px; color: var(--text); border-radius: 8px; }
#left-menu a:hover { background: var(--bg); color: var(--primary); text-decoration: none; }
#left-menu li.selected a { color: var(--primary); font-weight: 600; background: var(--bg); }
#sidebar h3 { color: var(--primary); font-size: 1.05rem; margin: 0 0 10px; }

/* Blocks used by components */
div.content-block, div.information-block, div.content-block-inner, div.information-block-inner {
	background: none !important;
	border: 0;
}
div.content-block, div.information-block { margin: 0; }

dl.block-list dt { color: var(--muted); font-size: 0.85rem; }
dl.block-list a { color: var(--text) !important; }

/* Search */
#search input[type="text"],
#search input {
	max-width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: 10px;
	font: inherit;
}
#search-button input,
input[type="submit"], input[type="button"] {
	background: var(--primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 8px 16px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
#search-button input:hover, input[type="submit"]:hover, input[type="button"]:hover { background: var(--primary-dark); }

/* Catalogue and news lists */
div.catalog-item,
div.news-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	margin-bottom: 16px;
}
div.catalog-item-image img { border-radius: 10px; }
div.catalog-item-price { border-radius: 999px; padding: 4px 12px; display: inline-block; }
div.news-date { color: var(--muted); font-size: 0.85rem; }

/* Paging */
div.navigation { margin: 12px 0; }
span.nav-current-page { background-color: #e6ecf7; border-radius: 6px; padding: 2px 8px; }

/* Tables */
table { max-width: 100%; }
.table-wrap { overflow-x: auto; }

/* Footer */
.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	margin-top: 24px;
	padding: 18px 22px;
	background: var(--card);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	color: var(--muted);
	font-size: 14px;
}
.footer-copy { flex: 1 1 260px; }
.footer-menu { flex: 0 1 auto; }
.footer-menu ul { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }
.footer-menu a { color: var(--text); }

/* Forms (generic) */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select {
	max-width: 100%;
	font: inherit;
	padding: 6px 8px;
	border: 1px solid #cfd6e4;
	border-radius: 8px;
	background: #fff;
}

/* Shop (cart, checkout) */
div.shop-cart, div.shop-checkout { max-width: 100%; }
table.shop-table { width: 100%; }
table.shop-table td, table.shop-table th { text-align: right; }
div.shop-totals { text-align: left; }
div.shop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
div.shop-actions .shop-button { margin-inline-start: 0; }
table.shop-form th { text-align: right; }

/* Tablet: sidebar moves below the content */
@media (max-width: 960px) {
	.layout { grid-template-columns: 1fr; }
	.workarea, .sidebar { grid-column: 1; }
	.sidebar { grid-row: 2; }
	.workarea { grid-row: 1; }
	.banner { grid-template-columns: 1fr; }
	.banner-slogan { text-align: center; }
}

/* Phone */
@media (max-width: 640px) {
	body { font-size: 14px; }
	.site { padding: 8px 10px 16px; }
	.site-header { padding: 12px 12px 0; }
	.header-main { gap: 10px; }
	.top-nav { order: 3; flex: 1 1 100%; }
	.top-nav ul { flex-direction: column; }
	.top-nav a.root-item, .top-nav a.root-item-selected { display: block; border-radius: 10px; }
	.top-nav li ul { position: static; box-shadow: none; background: var(--bg); }
	.header-tools { margin-inline-start: auto; }
	.workarea { padding: 16px 14px; }
	h1 { font-size: 1.5rem; }
	table.shop-table { display: block; overflow-x: auto; white-space: nowrap; }
	div.catalog-item { padding: 10px; }
	.site-footer { flex-direction: column; align-items: flex-start; }
}

/* The theme's colors.css paints the old menu bar; this template draws its own pills */
#top-menu { background: none !important; }
#top-menu-inner { background: none !important; }

/* ---- RTL fixes for component blocks (appended after the component rules) ---- */

/* Product tiles start from the right and the gap sits on their left side */
div.product-list { direction: rtl; text-align: right; }
div.product {
	float: right;
	height: auto;
	min-height: 105px;
	overflow: visible;
	margin: 0 0 20px 25px;
}
div.product-alt { margin-left: 0; margin-right: 0; }
div.product-overlay { height: 105px; }
div.product-image { height: 105px; }

/* Title and text: no fixed height, so long names wrap instead of being cut */
a.product-desc {
	height: auto;
	min-height: 62px;
	overflow: visible;
	right: 0;
	left: auto;
	width: 142px;
	text-align: right;
	padding: 13px 10px 22px 129px;
	line-height: 1.35;
}
a.product-desc p { line-height: 1.3; }

/* Search: label fits inside the blue button */
#search-button { width: 56px; }
#search-button input { padding: 0; width: 100%; height: 26px; line-height: 26px; }
#search-button input:hover { background: none; }

/* Right-aligned sections */
div.news-item, div.news-title, div.news-date { text-align: right; }
div.catalog-item, div.catalog-item-title, div.catalog-item-desc { text-align: right; }

/* ---- Product tiles: picture on the left, text on the right, tile grows with its text ----
   Replaces the fixed-height absolute layout that pushed text out of the tile. */
div.product {
	display: flex;
	flex-direction: row-reverse;   /* in RTL: picture stays on the left */
	align-items: stretch;
	position: relative;
	float: right;
	width: 280px;
	height: auto;
	min-height: 105px;
	overflow: visible;
	margin: 0 0 20px 25px;
}
div.product-image {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 120px;
	width: 120px;
	height: auto;
	min-height: 105px;
	background-size: contain;
	background-position: center center;
}
div.product-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	height: auto;
	z-index: 1;
	pointer-events: none;
}
a.product-desc {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	float: none;
	flex: 1 1 auto;
	width: auto;
	height: auto;
	min-height: 105px;
	overflow: visible;
	z-index: 2;
	padding: 13px 12px 22px 12px;
	text-align: right;
	line-height: 1.35;
}
a.product-desc p { font-size: 0.85em; margin: 6px 0 0; line-height: 1.3; }

/* ---- Content-area sections: two larger tiles per row, filling the work area ---- */
div.product {
	width: calc(50% - 12px) !important;
	margin: 0 24px 24px 0 !important;   /* RTL float right: the gap goes to the tile's left, see below */
	min-height: 140px !important;
}
div.product:nth-child(2n) { margin-right: 0 !important; margin-left: 0 !important; }   /* leftmost tile of each pair */
div.product:nth-child(2n+1) { margin-left: 24px !important; margin-right: 0 !important; } /* rightmost tile of each pair */
div.product-list, div.catalog-list { width: 100%; }
div.product-image {
	flex: 0 0 150px !important;
	width: 150px !important;
	min-height: 140px !important;
}
a.product-desc {
	font-size: 1.05em;
	min-height: 140px !important;
	padding: 16px 14px 26px 14px !important;
}
a.product-desc p { font-size: 0.95em !important; margin-top: 8px !important; }

/* ---- Search: input and button side by side inside one box ---- */
#search {
	width: 100% !important;
	display: flex;
	align-items: stretch;
	gap: 6px;
	overflow: visible !important;
}
#search div.rounded-box {
	float: none !important;
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
}
#search div.search-inner-box {
	height: 36px !important;
	border: 1px solid #cfd6e4 !important;
	border-radius: 10px;
	padding: 0 30px 0 10px !important;
	background: #fff url(images/loupe.gif) no-repeat left 8px center !important;
	overflow: hidden;
}
#search div.search-inner-box input {
	width: 100% !important;
	height: 34px !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent;
	font: inherit;
	outline: none;
}
#search-button {
	float: none !important;
	width: auto !important;
	border: 0 !important;
	flex: 0 0 auto;
}
#search-button input {
	display: block;
	width: auto !important;
	height: 36px !important;
	line-height: 36px;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 10px;
	background: var(--primary) !important;
	color: #fff !important;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
#search-button input:hover { background: var(--primary-dark) !important; }

/* ---- Bigger section boxes: the containers take the full work area, tiles are taller ---- */
#workarea div:has(> div.product),
#workarea div.product-list,
#workarea div.catalog-list {
	width: 100% !important;
	max-width: none !important;
}
div.product {
	width: calc(50% - 12px) !important;
	min-height: 200px !important;
}
div.product-image {
	flex: 0 0 42% !important;
	width: 42% !important;
	min-height: 200px !important;
	background-size: contain;
}
div.product-overlay { height: auto; }
a.product-desc {
	min-height: 200px !important;
	padding: 20px 16px 34px 16px !important;
	font-size: 1.15em !important;
}
a.product-desc p { font-size: 1em !important; line-height: 1.4 !important; margin-top: 10px !important; }

/* ===== Product / service cards: one clean layout (overrides the rules above) ===== */
div.product {
	display: flex !important;
	flex-direction: row-reverse !important;   /* RTL: picture on the left, text on the right */
	position: relative !important;
	float: right !important;
	width: calc(50% - 12px) !important;
	height: auto !important;
	min-height: 190px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-bottom: 4px solid var(--primary) !important;
	border-radius: 14px !important;
	box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06) !important;
	margin: 0 24px 24px 0 !important;
}
div.product:nth-child(2n) { margin-right: 0 !important; margin-left: 0 !important; }
div.product:nth-child(2n+1) { margin-left: 24px !important; margin-right: 0 !important; }

div.product-image {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	flex: 0 0 42% !important;
	width: 42% !important;
	height: auto !important;
	min-height: 190px !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: contain !important;
}
div.product-overlay { display: none !important; }

a.product-desc {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	float: none !important;
	flex: 1 1 auto !important;
	width: auto !important;
	height: auto !important;
	min-height: 190px !important;
	overflow: visible !important;
	z-index: auto !important;
	padding: 20px 18px 28px 18px !important;
	text-align: right !important;
	font-size: 1.1em !important;
	line-height: 1.4 !important;
	color: var(--text) !important;
	text-decoration: none !important;
}
a.product-desc p { font-size: 0.9em !important; margin: 10px 0 0 !important; color: var(--muted) !important; }

/* ===== Smaller cards with a gap between columns and rows ===== */
#workarea div.product {
	float: right !important;
	width: calc(50% - 26px) !important;      /* two cards + their side margins fill 100% */
	margin: 0 13px 26px 13px !important;     /* 26px between columns, 26px between rows */
	min-height: 150px !important;
}
#workarea div.product-image {
	flex: 0 0 38% !important;
	width: 38% !important;
	min-height: 150px !important;
}
#workarea a.product-desc {
	min-height: 150px !important;
	padding: 14px 14px 22px 14px !important;
}

/* ===== Cart page buttons (cart only; checkout page is unaffected) ===== */
/* Continue shopping: same blue as the site, bigger text */
div.shop-cart div.shop-actions > a.shop-link:first-of-type {
	color: #1F69CF !important;
	font-size: 1.15em !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
/* Clear cart: red, bigger text (shown only when the cart has items) */
div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type) {
	color: #c62828 !important;
	font-size: 1.15em !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
/* Update quantities: gray */
div.shop-cart div.shop-actions input.shop-button-secondary {
	background: #6b7280 !important;
	border-color: #6b7280 !important;
	color: #ffffff !important;
}
div.shop-cart div.shop-actions input.shop-button-secondary:hover {
	background: #4b5563 !important;
}
/* Checkout: green */
div.shop-cart div.shop-actions input.shop-button:not(.shop-button-secondary) {
	background: #2e7d32 !important;
	border-color: #2e7d32 !important;
	color: #ffffff !important;
}
div.shop-cart div.shop-actions input.shop-button:not(.shop-button-secondary):hover {
	background: #1b5e20 !important;
}

/* ===== Cart links turned into filled buttons ===== */
div.shop-cart div.shop-actions > a.shop-link:first-of-type {
	display: inline-block !important;
	background: #1F69CF !important;
	color: #ffffff !important;
	font-size: 1.15em !important;
	font-weight: 600 !important;
	padding: 0.5em 1.1em !important;
	border-radius: 8px !important;
	border: 1px solid #1F69CF !important;
	text-decoration: none !important;
}
div.shop-cart div.shop-actions > a.shop-link:first-of-type:hover {
	background: #154f9f !important;
	border-color: #154f9f !important;
	color: #ffffff !important;
}
div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type) {
	display: inline-block !important;
	background: #c62828 !important;
	color: #ffffff !important;
	font-size: 1.15em !important;
	font-weight: 600 !important;
	padding: 0.5em 1.1em !important;
	border-radius: 8px !important;
	border: 1px solid #c62828 !important;
	text-decoration: none !important;
}
div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type):hover {
	background: #8e1b1b !important;
	border-color: #8e1b1b !important;
	color: #ffffff !important;
}

/* ===== Cart buttons: identical size; Clear cart pinned to the left ===== */
div.shop-cart div.shop-actions {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
div.shop-cart div.shop-actions > a.shop-link:first-of-type,
div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type),
div.shop-cart div.shop-actions input.shop-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box !important;
	width: 170px !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	white-space: nowrap;
	border-radius: 8px !important;
	border: 1px solid transparent !important;
	text-align: center !important;
	cursor: pointer;
}
/* Clear cart: last item in the row; auto margin pushes it to the left edge */
div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type) {
	margin-right: auto !important;
}

/* ===== Product page: properties and price in right-to-left order ===== */
/* Each property: label on the right, value on the left, dotted line between them */
div.catalog-item-property {
	direction: rtl;
	text-align: right;
}
div.catalog-item-property span {
	float: right !important;
	padding-right: 0 !important;
	padding-left: 3px !important;
}
div.catalog-item-property b {
	float: left !important;
	padding-left: 0 !important;
	padding-right: 3px !important;
}
/* Price pill: reads right to left, price value after the label */
div.catalog-item-price {
	direction: rtl;
	unicode-bidi: isolate;
	text-align: right;
}


/* ===== Header icons: original sizes and sprite offsets, no circle background ===== */
.header-tools a.home-icon, .header-tools a.search-icon, .header-tools a.feedback-icon {
	background-color: transparent !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	margin: 0 4px !important;
	background-image: url(images/icons-sprite.gif) !important;
	background-repeat: no-repeat !important;
}
.header-tools a.home-icon { width: 12px !important; height: 11px !important; background-position: 0 0 !important; }
.header-tools a.search-icon { width: 12px !important; height: 12px !important; background-position: 0 -15px !important; }
.header-tools a.feedback-icon { width: 14px !important; height: 10px !important; background-position: 0 -29px !important; }

/* ===== Product page: Add to cart button like the cart buttons; price pill black, square ===== */
div.catalog-item-buy a.shop-button {
	display: inline-block !important;
	background: #1F69CF !important;
	border: 1px solid #1F69CF !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 0 14px !important;
	height: 38px !important;
	line-height: 38px !important;
	text-decoration: none !important;
	white-space: nowrap;
}
div.catalog-item-buy a.shop-button:hover {
	background: #154f9f !important;
	border-color: #154f9f !important;
	color: #ffffff !important;
}
div.catalog-item-price {
	background: #000000 !important;
	border-radius: 0 !important;
	color: #ffffff !important;
}

/* ===== Add to cart: bigger ===== */
div.catalog-item-buy a.shop-button {
	font-size: 17px !important;
	height: 48px !important;
	line-height: 48px !important;
	padding: 0 26px !important;
	min-width: 170px;
	text-align: center;
}

/* ===== Add to cart: aligned to the left ===== */
div.catalog-item-buy {
	text-align: left !important;
}

/* ===== Add to cart: fixed to the LEFT edge of the card (RTL template) ===== */
div.catalog-item-buy {
	display: block !important;
	overflow: hidden !important;
	text-align: left !important;
	direction: ltr !important;
}
div.catalog-item-buy a.shop-button {
	float: left !important;
	margin: 0 !important;
	position: relative !important;
	left: 0 !important;
	right: auto !important;
}

/* ===== Cart page: bigger text; total aligned to the left edge ===== */
div.shop-cart table.shop-table,
div.shop-cart table.shop-table th,
div.shop-cart table.shop-table td,
div.shop-cart table.shop-table td span,
div.shop-cart table.shop-table td a {
	font-size: 17px !important;
}
div.shop-cart table.shop-table th { font-weight: 700 !important; }
div.shop-cart .shop-notice { font-size: 16px !important; }
div.shop-cart .shop-steps,
div.shop-cart ol.shop-steps { font-size: 15px !important; }
div.shop-cart div.shop-totals {
	display: block !important;
	direction: ltr !important;
	text-align: left !important;
	font-size: 20px !important;
}

/* ===== Cart buttons on phones: all in one line ===== */
@media (max-width: 640px) {
	div.shop-cart div.shop-actions {
		flex-wrap: nowrap !important;
		gap: 6px !important;
	}
	div.shop-cart div.shop-actions > a.shop-link:first-of-type,
	div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type),
	div.shop-cart div.shop-actions input.shop-button {
		width: auto !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
		height: 40px !important;
		padding: 0 4px !important;
		font-size: 12px !important;
		white-space: nowrap !important;
	}
	div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type) {
		margin-right: 0 !important;
	}
}

/* ===== Cart buttons on phones: four equal columns, one line (strong override) ===== */
@media (max-width: 640px) {
	html body div.shop-cart div.shop-actions {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 6px !important;
		align-items: stretch !important;
		width: 100% !important;
	}
	html body div.shop-cart div.shop-actions > a.shop-link:first-of-type,
	html body div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type),
	html body div.shop-cart div.shop-actions input.shop-button {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 40px !important;
		margin: 0 !important;
		padding: 0 2px !important;
		font-size: 12px !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: clip !important;
	}
}

/* ===== Cart buttons: always one row of four equal columns (any width) ===== */
html body div.shop-cart div.shop-actions {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 8px !important;
	align-items: stretch !important;
	width: 100% !important;
}
html body div.shop-cart div.shop-actions > a.shop-link:first-of-type,
html body div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type),
html body div.shop-cart div.shop-actions input.shop-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	font-size: 14px !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}
@media (max-width: 760px) {
	html body div.shop-cart div.shop-actions > a.shop-link:first-of-type,
	html body div.shop-cart div.shop-actions > a.shop-link:last-of-type:not(:first-of-type),
	html body div.shop-cart div.shop-actions input.shop-button {
		font-size: 12px !important;
		height: 40px !important;
	}
}

/* ===== Checkout page: bigger text (checkout only) ===== */
div.shop-checkout {
	font-size: 17px !important;
}
div.shop-checkout h3 { font-size: 24px !important; }
div.shop-checkout table.shop-table,
div.shop-checkout table.shop-table td,
div.shop-checkout table.shop-table th {
	font-size: 17px !important;
}
div.shop-checkout div.shop-totals {
	font-size: 20px !important;
}
div.shop-checkout table.shop-form th,
div.shop-checkout table.shop-form td {
	font-size: 17px !important;
}
div.shop-checkout table.shop-form input,
div.shop-checkout table.shop-form textarea {
	font-size: 17px !important;
	padding: 6px 8px !important;
}
div.shop-checkout span.shop-field-error,
div.shop-checkout .shop-field-error {
	font-size: 15px !important;
}
div.shop-checkout p.shop-req-note {
	font-size: 14px !important;
}
div.shop-checkout ol.shop-steps,
div.shop-checkout ol.shop-steps li {
	font-size: 15px !important;
}
div.shop-checkout input[type="radio"] + label,
div.shop-checkout table td label,
div.shop-checkout span.shop-payment,
div.shop-checkout .shop-payment label,
div.shop-checkout .shop-payment td,
div.shop-checkout .shop-payment span {
	font-size: 17px !important;
}
div.shop-checkout div.shop-actions a.shop-link,
div.shop-checkout div.shop-actions a.shop-button,
div.shop-checkout div.shop-actions input.shop-button {
	font-size: 17px !important;
}

/* ===== Checkout: bigger text, Total styled like the cart Total (strong overrides) ===== */
html body div.shop-checkout { font-size: 19px !important; }
html body div.shop-checkout h3 { font-size: 26px !important; margin: 18px 0 10px !important; }
html body div.shop-checkout table.shop-table td,
html body div.shop-checkout table.shop-table th,
html body div.shop-checkout table.shop-table td span { font-size: 19px !important; }
html body div.shop-checkout div.shop-totals {
	display: block !important;
	direction: ltr !important;
	text-align: left !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 10px 0 16px !important;
}
html body div.shop-checkout div.shop-totals b { font-size: 22px !important; }
html body div.shop-checkout table.shop-form th,
html body div.shop-checkout table.shop-form td,
html body div.shop-checkout table.shop-form td span { font-size: 19px !important; }
html body div.shop-checkout table.shop-form input,
html body div.shop-checkout table.shop-form textarea {
	font-size: 19px !important;
	height: auto !important;
	padding: 8px 10px !important;
}
html body div.shop-checkout .shop-req-note { font-size: 15px !important; }
html body div.shop-checkout .shop-field-error { font-size: 17px !important; }
html body div.shop-checkout ol.shop-steps,
html body div.shop-checkout ol.shop-steps li { font-size: 17px !important; }
html body div.shop-checkout .shop-payment,
html body div.shop-checkout .shop-payment label,
html body div.shop-checkout .shop-payment td,
html body div.shop-checkout .shop-payment span,
html body div.shop-checkout input[type="radio"] + label { font-size: 19px !important; }
html body div.shop-checkout div.shop-actions a,
html body div.shop-checkout div.shop-actions input.shop-button,
html body div.shop-checkout div.shop-actions a.shop-button {
	font-size: 19px !important;
}

/* ===== Checkout form: required asterisks aligned in one column at the right edge ===== */
html body div.shop-checkout table.shop-form th {
	position: relative !important;
}
html body div.shop-checkout table.shop-form th span.shop-req {
	float: right !important;
	margin: 0 0 0 6px !important;
	font-size: 19px !important;
	line-height: 1.2 !important;
}

/* ===== Modern, cute style (soft pastel, rounded, RTL) ===== */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&display=swap");
:root {
	--pink: #ff6f91;
	--pink-dark: #ff4f7b;
	--pink-soft: #ffe3ea;
	--peach: #ffd6b0;
	--yellow: #ffd23f;
	--cream: #fff7ec;
	--ink: #2b2633;
	--muted: #7b7584;
	--radius: 24px;
	--shadow: 0 10px 30px rgba(43, 38, 51, 0.08);
}
html body {
	background: var(--cream) !important;
	color: var(--ink) !important;
	font-family: "Heebo", "Segoe UI", Tahoma, Arial, sans-serif !important;
}
html body .site { max-width: 1240px !important; }

/* Header */
html body .site-header {
	background: #ffffff !important;
	border-radius: 0 0 var(--radius) var(--radius) !important;
	box-shadow: var(--shadow) !important;
	padding: 16px 24px 0 !important;
}
html body .top-nav a.root-item,
html body .top-nav a.root-item-selected {
	background: var(--pink) !important;
	border-radius: 999px !important;
	font-weight: 500 !important;
}
html body .top-nav a.root-item:hover,
html body .top-nav li.selected > a.root-item { background: var(--pink-dark) !important; }
html body a.cart-link {
	background: var(--yellow) !important;
	color: var(--ink) !important;
	border-radius: 999px !important;
	font-weight: 500 !important;
}
html body .header-tools a { background: var(--pink-soft) !important; }

/* Hero banner */
html body .banner {
	background: linear-gradient(120deg, #ffd23f 0%, #ffb3c6 100%) !important;
	border-radius: var(--radius) !important;
	margin-top: 18px !important;
}
html body .banner-slogan {
	color: #ffffff !important;
	font-weight: 700 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Cards and content area */
html body .workarea,
html body .card {
	background: #ffffff !important;
	border: 0 !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow) !important;
}
html body .workarea h1 { font-weight: 700 !important; color: var(--ink) !important; }
html body #sidebar h3 { color: var(--pink) !important; font-weight: 700 !important; }
html body #left-menu a { border-radius: 14px !important; }
html body #left-menu li.selected a {
	background: var(--pink-soft) !important;
	color: var(--pink) !important;
}

/* Product cards */
html body div.product {
	background: #ffffff !important;
	border: 0 !important;
	border-bottom: 0 !important;
	border-radius: 26px !important;
	box-shadow: var(--shadow) !important;
	overflow: hidden !important;
}
html body div.product-image { border-radius: 26px 0 0 26px; }
html body a.product-desc { color: var(--ink) !important; font-weight: 500 !important; }
html body a.product-desc p { color: var(--muted) !important; }
html body div.catalog-item-price {
	background: var(--yellow) !important;
	color: var(--ink) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	padding: 4px 14px !important;
}
html body div.catalog-item-buy a.shop-button {
	background: var(--pink) !important;
	border-color: var(--pink) !important;
	border-radius: 999px !important;
}
html body div.catalog-item-buy a.shop-button:hover { background: var(--pink-dark) !important; border-color: var(--pink-dark) !important; }

/* Footer */
html body .site-footer {
	background: #ffffff !important;
	border-radius: var(--radius) !important;
	box-shadow: var(--shadow) !important;
	color: var(--muted) !important;
}

/* ===== Hero: four simple illustrations in the banner ===== */
html body .banner {
	display: block !important;
	padding: 0 !important;
	overflow: hidden !important;
}
html body #banner-image {
	display: block !important;
	width: 100% !important;
	height: 300px !important;
	background: url(images/hero-1.svg) 0 0 / 25% 100% no-repeat,
	            url(images/hero-2.svg) 25% 0 / 25% 100% no-repeat,
	            url(images/hero-3.svg) 50% 0 / 25% 100% no-repeat,
	            url(images/hero-4.svg) 75% 0 / 25% 100% no-repeat !important;
}
html body #banner-image img { display: none !important; }
html body #banner-slogan {
	color: var(--ink) !important;
	text-align: center !important;
	padding: 14px 20px !important;
	background: #ffffff !important;
	text-shadow: none !important;
}


/* ===== Hero: four simple illustrations in the banner ===== */
html body .banner {
	display: block !important;
	padding: 0 !important;
	overflow: hidden !important;
}
html body #banner-image {
	display: block !important;
	width: 100% !important;
	height: 300px !important;
	background: url(images/hero-1.svg) 0 0 / 25% 100% no-repeat,
	            url(images/hero-2.svg) 25% 0 / 25% 100% no-repeat,
	            url(images/hero-3.svg) 50% 0 / 25% 100% no-repeat,
	            url(images/hero-4.svg) 75% 0 / 25% 100% no-repeat !important;
}
html body #banner-image img { display: none !important; }
html body #banner-slogan {
	color: var(--ink) !important;
	text-align: center !important;
	padding: 14px 20px !important;
	background: #ffffff !important;
	text-shadow: none !important;
}


/* ===== WhatsApp floating button (shown only when a number is set in Payments > Store) ===== */
.wa-float {
	position: fixed;
	bottom: 22px;
	inset-inline-start: 22px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25d366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
	z-index: 1000;
	transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.08); }


/* ===== Form fields (feedback, login, checkout): soft, rounded, consistent ===== */
html body .workarea input[type="text"],
html body .workarea input[type="email"],
html body .workarea input[type="tel"],
html body .workarea input:not([type]),
html body .workarea textarea,
html body .workarea select {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 340px !important;
	padding: 10px 14px !important;
	border: 1px solid #f2d3dd !important;
	border-radius: 14px !important;
	background: #fffafb !important;
	color: var(--ink) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html body .workarea textarea {
	min-height: 150px;
	max-width: 340px !important;
	resize: vertical;
}
html body .workarea input:focus,
html body .workarea textarea:focus,
html body .workarea select:focus {
	border-color: var(--pink) !important;
	box-shadow: 0 0 0 4px rgba(255, 111, 145, 0.15) !important;
	background: #ffffff !important;
}
html body .workarea label {
	color: var(--ink);
	font-weight: 500;
}
html body .workarea table td {
	vertical-align: middle;
}
/* keep the cart quantity and coupon boxes at their own size */
html body .workarea .shop-table input,
html body .workarea .shop-coupon input {
	max-width: none !important;
	width: auto !important;
}
html body .workarea .shop-coupon input[type="text"] {
	width: 180px !important;
}


/* ===== Hero: five illustrations, evenly spaced ===== */
html body #banner-image {
	background: url(images/hero-1.svg) 0% 0 / 20% 100% no-repeat,
	            url(images/hero-2.svg) 25% 0 / 20% 100% no-repeat,
	            url(images/hero-3.svg) 50% 0 / 20% 100% no-repeat,
	            url(images/hero-4.svg) 75% 0 / 20% 100% no-repeat,
	            url(images/hero-5.svg) 100% 0 / 20% 100% no-repeat !important;
}


/* ===== Hero: rounded top corners on the image block ===== */
html body #banner-image,
html body .banner-media,
html body .banner {
	border-radius: var(--radius) !important;
	overflow: hidden !important;
}


/* ===== Header card (menu + banner): all four corners rounded ===== */
html body .site-header {
	border-radius: var(--radius) !important;
}


/* ===== Hero: clip the coloured image block so its bottom corners are rounded ===== */
html body #banner-image,
html body .banner {
	clip-path: inset(0 round 24px) !important;
	-webkit-clip-path: inset(0 round 24px) !important;
	border-radius: 24px !important;
	overflow: hidden !important;
}


/* ===== Hero: no extra empty strip under the images ===== */
html body #banner-slogan,
html body .banner-slogan {
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0;
}
html body #banner-slogan:empty {
	display: none !important;
}


/* ===== Header card: more white space under the hero images ===== */
html body .site-header {
	padding-bottom: 48px !important;
}


/* ===== Submenus: white rounded card, roomy items, pink hover ===== */
html body .top-nav li ul {
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 20px !important;
	box-shadow: 0 16px 40px rgba(43, 38, 51, 0.14) !important;
	padding: 10px !important;
	min-width: 230px;
	flex-direction: column !important;
	gap: 4px;
	margin-top: 10px;
	overflow: hidden;
}
html body .top-nav li ul a {
	display: block !important;
	padding: 12px 18px !important;
	border-radius: 14px !important;
	color: var(--ink) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	white-space: nowrap;
	text-align: right;
	transition: background 0.2s ease, color 0.2s ease;
}
html body .top-nav li ul a:hover {
	background: var(--pink-soft) !important;
	color: var(--pink) !important;
	text-decoration: none !important;
}


/* ===== Submenus: no gap, so the menu stays open while the mouse moves onto it ===== */
html body .top-nav li ul {
	margin-top: 0 !important;
	overflow: visible !important;
	position: absolute !important;
}
html body .top-nav li ul::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}


/* ===== Product page: image, price and Add to cart aligned to the right ===== */
html body .catalog-detail .catalog-item-image {
	display: block !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	float: none !important;
}
html body .catalog-detail .catalog-item-price {
	display: block !important;
	width: fit-content !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}
html body .catalog-detail div.catalog-item-buy {
	float: none !important;
	text-align: right !important;
	display: block !important;
}
html body .catalog-detail div.catalog-item-buy a.shop-button {
	float: right !important;
	position: static !important;
	margin: 0 !important;
}


/* ===== Submenu items: pill highlight like the left menu ===== */
html body .top-nav li ul a {
	border-radius: 999px !important;
	margin: 2px 6px !important;
	padding: 10px 18px !important;
}
html body .top-nav li ul a:hover {
	background: var(--pink-soft) !important;
	color: var(--pink) !important;
}

/* ===== Main menu: no square background behind the buttons ===== */
html body .top-nav li,
html body .top-nav li:hover,
html body .top-nav li.selected,
html body .top-nav li.hover {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}


/* ===== Cart: coupon discount and total aligned to the right ===== */
html body div.shop-cart div.shop-totals,
html body div.shop-cart div.shop-totals div,
html body div.shop-cart .shop-discount {
	text-align: right !important;
}
html body div.shop-cart .shop-discount {
	margin: 4px 0;
}


/* ===== Cart: coupon row (Remove button, then the discount), right-aligned ===== */
html body div.shop-cart .shop-discount-row {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 8px;
	direction: ltr !important;
}
html body div.shop-cart .shop-discount-row .shop-discount {
	margin: 4px 0 !important;
}


/* ===== Checkout Order summary: coupon, subtotal and delivery rows told apart ===== */
html body div.shop-checkout tr.shop-coupon-row td {
	color: #2e7d32 !important;
	font-weight: 500 !important;
}
html body div.shop-checkout tr.shop-subtotal-row td {
	font-weight: 700 !important;
	border-top: 1px solid #2b2633 !important;
	padding-top: 10px !important;
}
html body div.shop-checkout tr.shop-ship-row td {
	color: var(--pink) !important;
	font-weight: 500 !important;
}


/* ===== Header search box ===== */
html body .header-search {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--pink-soft);
	border-radius: 999px;
	padding: 4px 4px 4px 6px;
	margin-inline-start: 6px;
}
html body .header-search input[type="text"] {
	width: 170px;
	border: 0 !important;
	background: transparent !important;
	padding: 6px 10px !important;
	font-family: inherit;
	font-size: 14px;
	color: var(--ink);
	outline: none;
}
html body .header-search button {
	background: var(--pink) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	cursor: pointer;
}
html body .header-search button:hover {
	background: var(--pink-dark) !important;
}


/* ===== Hide the sidebar search section (the header search box stays) ===== */
html body div:has(> #search),
html body div:has(> div:has(> #search)) {
	display: none !important;
}


/* ===== Header row: cart, search box and search button the same height as the menu buttons ===== */
html body .header-tools {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
}
html body a.cart-link {
	height: 38px !important;
	line-height: 38px !important;
	padding: 0 18px !important;
	font-size: 15px !important;
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	white-space: nowrap;
}
html body .header-search {
	height: 38px !important;
	padding: 3px 3px 3px 4px !important;
	margin: 0 !important;
	box-sizing: border-box;
}
html body .header-search input[type="text"] {
	height: 30px !important;
	padding: 0 12px !important;
	font-size: 15px !important;
	line-height: 30px !important;
}
html body .header-search button {
	height: 32px !important;
	padding: 0 18px !important;
	font-size: 15px !important;
	line-height: 32px !important;
}


/* ===== Header row: cart pill inside the header card, one line ===== */
html body .site-header .header-main {
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
}
html body .site-header .top-nav {
	flex: 0 1 auto !important;
	min-width: 0;
}
html body .site-header .header-tools {
	flex: 0 0 auto !important;
	margin-inline-start: 0 !important;
}
html body .site-header .header-search input[type="text"] {
	width: 170px !important;
}


/* ===== Header: empty logo block removed; menu at the right, cart and search on the left, all inside the card ===== */
html body .site-header .brand {
	display: none !important;
}
html body .site-header .header-main {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: center !important;
}
html body .site-header .top-nav {
	flex: 0 1 auto !important;
	display: flex !important;
	justify-content: flex-end !important;
}
html body .site-header .top-nav ul {
	justify-content: flex-end !important;
}
html body .site-header .header-tools {
	flex: 0 0 auto !important;
	margin-inline-start: 0 !important;
}


/* ===== Header row fits inside the card: no extra width or negative margin ===== */
html body .site-header {
	box-sizing: border-box !important;
	padding-inline: 20px !important;
}
html body .site-header .header-main {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}
html body .site-header .header-tools {
	margin: 0 !important;
}


/* ===== Header row as a grid inside the card: cart and search left, menu right (desktop) ===== */
@media (min-width: 961px) {
	html body .site-header .header-main {
		display: grid !important;
		grid-template-columns: auto 1fr !important;
		align-items: center !important;
		gap: 12px !important;
	}
	html body .site-header .header-tools {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: end !important;
		position: static !important;
	}
	html body .site-header .top-nav {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: start !important;
	}
}


/* ===== Header row, final: cart and search at the left edge of the card, menu at the right edge (desktop) ===== */
@media (min-width: 961px) {
	html body .site-header .header-main {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		direction: ltr !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: 12px !important;
	}
	html body .site-header .header-tools {
		order: -1 !important;
		flex: 0 0 auto !important;
		direction: rtl !important;
		margin: 0 !important;
		justify-self: auto !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}
	html body .site-header .top-nav {
		order: 2 !important;
		flex: 0 1 auto !important;
		direction: rtl !important;
		grid-column: auto !important;
		grid-row: auto !important;
		justify-self: auto !important;
	}
}


/* ===== Header row exactly the width of the card's inside (fixes the row spilling left) ===== */
@media (min-width: 961px) {
	html body .site-header .header-main {
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		left: 0 !important;
		position: static !important;
	}
}


/* ===== Overrides of shop.css ID rules: #top-icons had width 300px and the cart link floated left ===== */
html body #top-icons {
	width: auto !important;
	float: none !important;
}
html body #top-icons a.cart-link {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}


/* ===== Lucide icon font (ISC licence, @react-native-vector-icons/lucide 14.0.0 - Lucide font) ===== */
@font-face {
	font-family: "LucideIcons";
	src: url(fonts/lucide.ttf) format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
.lucide-icon {
	font-family: "LucideIcons" !important;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	display: inline-block;
	width: auto !important;
	height: auto !important;
	background: none !important;
	-webkit-mask: none !important;
	mask: none !important;
	margin-inline-end: 6px;
	vertical-align: middle;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
}
html body a.cart-link .lucide-icon { color: var(--ink); }
html body .header-search button .lucide-icon { color: #ffffff; font-size: 15px; }
.lucide-cart:before { content: "\e15c"; }
.lucide-search:before { content: "\e151"; }
.lucide-home:before { content: "\e0f5"; }
.lucide-mail:before { content: "\e10f"; }
.lucide-phone:before { content: "\e133"; }
.lucide-heart:before { content: "\e0f2"; }
.lucide-user:before { content: "\e19f"; }
.lucide-map-pin:before { content: "\e111"; }
.lucide-x:before { content: "\e1b2"; }
.lucide-menu:before { content: "\e115"; }
.lucide-truck:before { content: "\e194"; }
.lucide-store:before { content: "\e3e4"; }
.lucide-tag:before { content: "\e17f"; }
.lucide-percent:before { content: "\e132"; }
.lucide-receipt:before { content: "\e3d3"; }
.lucide-package:before { content: "\e129"; }
.lucide-clock:before { content: "\e087"; }
.lucide-star:before { content: "\e176"; }
.lucide-trash:before { content: "\e18e"; }
.lucide-plus:before { content: "\e13d"; }
.lucide-minus:before { content: "\e11c"; }
.lucide-check:before { content: "\e06c"; }
.lucide-arrow-left:before { content: "\e048"; }
.lucide-arrow-right:before { content: "\e049"; }
.lucide-filter:before { content: "\e460"; }
.lucide-sort:before { content: "\e37d"; }


/* ===== Header icons: home and mail, round, same height as the cart pill ===== */
html body .site-header .header-tools a.header-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background-color: var(--pink-soft) !important;
	background-image: none !important;
	color: var(--pink) !important;
	text-decoration: none !important;
	flex: 0 0 auto;
}
html body .site-header .header-tools a.header-icon:hover {
	background-color: var(--pink) !important;
	color: #ffffff !important;
}
html body .site-header .header-tools a.header-icon .lucide-icon {
	font-size: 20px !important;
	margin: 0 !important;
	color: inherit !important;
}


/* ===== Loading overlay while the order is sent ===== */
@keyframes bx-spin { to { transform: rotate(360deg); } }
@keyframes bx-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bx-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.bx-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 247, 236, 0.78);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	animation: bx-fade 0.25s ease both;
}
.bx-loading-card {
	background: #ffffff;
	border-radius: 28px;
	box-shadow: 0 24px 60px rgba(43, 38, 51, 0.18);
	padding: 36px 48px;
	text-align: center;
	min-width: 280px;
	animation: bx-fade 0.35s ease both;
}
.bx-spinner {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: conic-gradient(#ff6f91, #ffd23f, #7b5cff, #ff6f91);
	-webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 60%);
	mask: radial-gradient(farthest-side, transparent 58%, #000 60%);
	animation: bx-spin 0.9s linear infinite;
}
.bx-loading-text {
	font-size: 20px;
	font-weight: 700;
	color: #2b2633;
	margin-bottom: 6px;
	animation: bx-pulse 1.6s ease-in-out infinite;
}
.bx-loading-sub {
	font-size: 14px;
	color: #7b7584;
}


/* ===== Category product list: right-to-left (picture on the right, text and buttons on the right) ===== */
div.catalog-list div.catalog-item {
	direction: rtl !important;
	text-align: right !important;
}
div.catalog-list div.catalog-item-image {
	float: right !important;
	margin: 0 0 12px 18px !important;
}
div.catalog-list div.catalog-item-title,
div.catalog-list div.catalog-item-desc,
div.catalog-list div.catalog-item-desc-float {
	text-align: right !important;
}
div.catalog-list div.catalog-item-price {
	display: inline-block !important;
	text-align: right !important;
}
div.catalog-list div.catalog-item-buy {
	direction: rtl !important;
	text-align: right !important;
	clear: both;
}
div.catalog-list div.catalog-item-buy a.shop-button {
	float: right !important;
}


/* ===== Product gallery: extra photos as thumbnails under the main picture ===== */
div.catalog-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; direction: rtl; }
a.catalog-gallery-item { width: 84px; height: 84px; border-radius: 12px; border: 1px solid #f2d3dd; background: #fff; overflow: hidden; display: block; box-shadow: 0 6px 16px rgba(43,38,51,.08); transition: transform .2s ease, box-shadow .2s ease; }
a.catalog-gallery-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
a.catalog-gallery-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(43,38,51,.14); }


/* ===== Accessibility toolbar styles ===== */
/**
 * TaxiRoyal Accessibility Pro — Frontend CSS v1.1.0
 * All body-class effects, skip link, reading guide, reading mask.
 * Toolbar layout is 100% inline-style from JS — this file handles
 * only the body-state classes and a few shared lightweight styles.
 */

/* ── Skip Link ───────────────────────────────────────────────────────────── */
.tra-skip-link {
  position: absolute !important;
  top: -999px;
  left: -999px;
  z-index: 999999;
  padding: 12px 24px;
  background: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.tra-skip-link:focus {
  top: 0 !important;
  left: 0 !important;
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

/* ── Focus ring (injected by PHP autofix) ────────────────────────────────── */
/* Handled via inline <style id="tra-focus-ring"> injected in <head> by PHP   */

/* ═══════════════════════════════════════════════════════════════════════════
   BODY-CLASS STATE EFFECTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   VISION EFFECTS
   All filters on #tra-content-wrap — the wrapper div around page content.
   Toolbar elements are appended to body AFTER the wrap, so they are
   siblings of #tra-content-wrap and completely unaffected by its filter.
   display:contents on the wrap means zero layout impact.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Invert Colors ───────────────────────────────────────────────────────── */
#tra-content-wrap.tra-invert-html {
  filter: invert(1) hue-rotate(180deg);
}
#tra-content-wrap.tra-invert-html img,
#tra-content-wrap.tra-invert-html video {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Grayscale ───────────────────────────────────────────────────────────── */
#tra-content-wrap.tra-grayscale-html {
  filter: grayscale(1);
}

/* ── Saturation ──────────────────────────────────────────────────────────── */
#tra-content-wrap.tra-saturation-html {
  filter: saturate(0.15);
}

/* ── High Contrast ───────────────────────────────────────────────────────── */
#tra-content-wrap.tra-high-contrast-html {
  filter: contrast(2.5);
}

/* ── Highlight Links ─────────────────────────────────────────────────────── */
body.tra-highlight-links a:not(.tra-toolbar a) {
  background: #0057b8 !important;
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-color: #ffd700 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px solid #ffd700 !important;
  outline-offset: 1px !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
}
body.tra-highlight-links a:not(.tra-toolbar a):hover {
  background: #003d82 !important;
  color: #ffd700 !important;
}

/* ── Highlight Headings ──────────────────────────────────────────────────── */
body.tra-highlight-headings h1,
body.tra-highlight-headings h2,
body.tra-highlight-headings h3,
body.tra-highlight-headings h4,
body.tra-highlight-headings h5,
body.tra-highlight-headings h6 {
  background: #fff3cd !important;
  color: #000 !important;
  border-inline-start: 6px solid #e65c00 !important;
  border-bottom: 2px solid #e65c00 !important;
  padding: 6px 12px 6px 12px !important;
  padding-inline-start: 14px !important;
  border-radius: 0 6px 6px 0 !important;
  box-shadow: 2px 2px 0 rgba(230,92,0,.25) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* ── Focus Highlight ─────────────────────────────────────────────────────── */
/* JS adds .tra-focus-highlight-el to the currently hovered/focused element */
.tra-focus-el {
  outline: 3px solid var(--tra-color, #1a73e8) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(26,115,232,.18), 0 0 16px rgba(26,115,232,.2) !important;
  border-radius: 4px !important;
  position: relative !important;
  z-index: 2 !important;
  transition: outline .1s, box-shadow .1s !important;
}
/* Don't highlight the toolbar itself */
#tra-panel .tra-focus-el,
#tra-trigger-btn.tra-focus-el,
#tra-structure-panel .tra-focus-el {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Dyslexia Font ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
body.tra-dyslexia-font,
body.tra-dyslexia-font *:not(#tra-panel):not(#tra-panel *):not(#tra-structure-panel):not(#tra-structure-panel *) {
  font-family: 'Lexend', sans-serif !important;
  word-spacing: 0.16em !important;
}

/* ── Big Cursor ──────────────────────────────────────────────────────────── */
body.tra-big-cursor,
body.tra-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M6 4L6 36L16 27L23 42L28 40L21 25L35 25Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* ── Pause Animations ────────────────────────────────────────────────────── */
body.tra-pause-animations *,
body.tra-pause-animations *::before,
body.tra-pause-animations *::after {
  animation-play-state: paused !important;
  transition-duration: 1ms !important;
}

/* ── Keyboard Navigation ─────────────────────────────────────────────────── */
body.tra-keyboard-nav :focus {
  outline: 4px solid var(--tra-color, #1a73e8) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 7px rgba(26,115,232,.18) !important;
  border-radius: 4px !important;
}
body.tra-keyboard-nav a:focus,
body.tra-keyboard-nav button:focus,
body.tra-keyboard-nav input:focus,
body.tra-keyboard-nav select:focus,
body.tra-keyboard-nav textarea:focus {
  background-color: rgba(26,115,232,.04) !important;
}

/* ── Hide Images ─────────────────────────────────────────────────────────── */
body.tra-hide-images img {
  visibility: hidden !important;
}
/* Keep toolbar images visible */
body.tra-hide-images #tra-panel img,
body.tra-hide-images #tra-structure-panel img,
body.tra-hide-images #tra-trigger-btn img {
  visibility: visible !important;
}

/* ── Reading Guide line ──────────────────────────────────────────────────── */
#tra-reading-guide {
  display: none;
  position: fixed;
  left: 0; right: 0;
  height: 3px;
  pointer-events: none;
  z-index: 999985;
}
body.tra-reading-guide-on #tra-reading-guide { display: block; }

/* ── Reading Mask ────────────────────────────────────────────────────────── */
#tra-mask-top,
#tra-mask-bottom {
  display: none;
  position: fixed;
  left: 0; right: 0;
  background: rgba(0,0,0,.65);
  pointer-events: none;
  z-index: 999984;
}
body.tra-reading-mask-on #tra-mask-top,
body.tra-reading-mask-on #tra-mask-bottom { display: block; }

/* ── TTS highlight ───────────────────────────────────────────────────────── */
.tra-tts-highlight {
  background: #ffd700 !important;
  color: #000 !important;
  border-radius: 2px;
}

/* ── Trigger button focus ────────────────────────────────────────────────── */
#tra-trigger-btn:focus {
  outline: 3px solid #ffd700 !important;
  outline-offset: 3px !important;
}

/* ── Panel scrollbar ─────────────────────────────────────────────────────── */
#tra-panel { scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
#tra-panel::-webkit-scrollbar { width: 4px; }
#tra-panel::-webkit-scrollbar-track { background: transparent; }
#tra-panel::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 4px; }
#tra-panel::-webkit-scrollbar-thumb:hover { background: #aaa; }
#tra-panel::-webkit-scrollbar-corner { background: transparent; }

/* ── Structure panel scrollbar ───────────────────────────────────────────── */
#tra-structure-content { scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
#tra-structure-content::-webkit-scrollbar { width: 4px; }
#tra-structure-content::-webkit-scrollbar-track { background: transparent; }
#tra-structure-content::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 4px; }
#tra-structure-content::-webkit-scrollbar-corner { background: transparent; }

/* ── Reduced-motion respect ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #tra-structure-panel { transition: none !important; }
}

/* ── RTL toolbar layout (scoped to #tra-panel[dir=rtl] only) ─────────────── */
#tra-panel[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
#tra-panel[dir="rtl"] .tra-step-val {
  direction: ltr; /* keep +2 / -1 values LTR */
}
#tra-structure-panel[dir="rtl"] {
  direction: rtl;
  text-align: right;
}


/* ── Toolbar isolation from injected body * rules ───────────────────────── */
/* Since toolbar is appended after #tra-content-wrap, injected rules on      */
/* #tra-content-wrap don't reach toolbar. But body * rules still do.         */
/* Use specificity win: .tra-toolbar (0,1,0) beats body * (0,0,1)            */
.tra-toolbar { font-size: initial; line-height: initial; font-weight: initial; letter-spacing: normal; word-spacing: normal; text-align: initial; }
.tra-toolbar * { font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; word-spacing: inherit; text-align: inherit; }

/* TaxiRoyal Accessibility Pro – RTL / Hebrew overrides */
.tra-pos-bottom-right { right: auto; left: var(--tra-ox); align-items: flex-start; }
.tra-pos-bottom-left  { left:  auto; right: var(--tra-ox); align-items: flex-end; }
.tra-pos-top-right    { right: auto; left: var(--tra-ox); align-items: flex-start; }
.tra-pos-top-left     { left:  auto; right: var(--tra-ox); align-items: flex-end; }

.tra-panel { direction: rtl; text-align: right; }
.tra-panel-header { flex-direction: row-reverse; }
.tra-header-actions { flex-direction: row-reverse; }
.tra-stepper-controls { flex-direction: row-reverse; }
.tra-landmark-label { right: 0; left: auto; border-radius: 3px 3px 3px 0; }