/*
 * Carmella new brand (2026) — Figma "Carmella_2026" › "website new brand updates" › "menu updates 39".
 * Loaded after style.css (header.php). Covers the shared header, menu, product card and footer,
 * plus page background. Homepage-only sections live in Home.vue / Blogs.vue / InlinePromotion.vue.
 *
 * Tokens:
 *   green   #004741   (brand primary — replaces #1e824c / #213519 in these areas)
 *   red     #ef4134
 *   cream   #f7f5ed   (page background — replaces #efede9)
 *   sand    #f0e5c6   (footer text, pre-footer middle column)
 *   yellow  #ffbf3f   (cart, blog captions)
 *   grey    #e7e7e6   (top bar) / #4a4b4a (top bar text)
 */

/* ---------- Page background ---------- */
body,
body.product {
	background: #f7f5ed;
}

/* hero notch: same shape as layout/bn_corner.png, in the new cream */
.bn_corner {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='29' viewBox='0 0 160 29'%3E%3Cpath fill='%23f7f5ed' d='M0 0C38 0 66 10 80 29C94 10 122 0 160 0V29H0Z'/%3E%3C/svg%3E") no-repeat center bottom;
}
.bn_corner:before,
.bn_corner:after {
	background: #f7f5ed;
}

/* homepage hero: no prev/next arrows in the design (dots only) */
#homePage .hp_slider_wrap .slick-arrow {
	display: none !important;
}

/* slider dots */
body .slick-dots li button {
	border-color: #004741;
}
body li.slick-active button {
	background: #004741;
}

/* ---------- Header ---------- */
/* no shadow at the top of the page (design); a lighter one than before once scrolled (page.js) */
.header {
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-transition: box-shadow 0.25s ease;
	transition: box-shadow 0.25s ease;
}
body.header-scrolled .header {
	-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}

.head_top {
	background: #e7e7e6;
}

.head_search {
	height: 35px;
	border: 0.4px solid #a5a5a6;
	border-radius: 30px;
}

.head_search_submit svg path {
	fill: #004741;
}

/* text links (שירות לקוחות • אזורי משלוח • עלינו) */
.head_nav_link a {
	color: #4a4b4a;
}
.head_nav_link a:hover {
	color: #004741;
}
.head_nav_link a:before {
	background: #ef4134;
	width: 5px;
	height: 5px;
}

/* icon links (הזמנה קבועה | גיפטקארד | שחזור הזמנה | מועדפים | היי ...) */
.head_link a,
.login_top a {
	color: #004741;
	font-weight: bold;
	border-left-color: #a5a5a6; /* grey separators, as in the design */
}
.head_link a:hover,
.login_top a:hover {
	color: #004741;
	opacity: 0.8;
}
.head_link svg path,
.head_favorite path {
	fill: #004741;
}
/* permanent-order icon (design asset) is stroke-only */
.head_top .permanent-order-icon svg path {
	fill: none;
	stroke: #004741;
}
/* user icon (כניסה / היי ...) is orange in the design */
.link_logout svg path,
.user-svg svg path {
	fill: #f34d3b;
}
.head_top .head_links .gift-card-icon .text,
.head_top .head_links .permanent-order-icon .text {
	font-weight: bold;
}

/* large desktop: logo on a white disc overlapping the hero.
   Below 1600px the disc would cover the menu, so the existing header sizes (style.css) apply. */
@media (min-width: 1600px) {
	.logo a {
		top: 12px;
		right: 0;
		width: 140px;
		height: 140px;
		border-radius: 50%;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.logo a:before {
		display: none; /* old logo_shade.png — replaced by the CSS shadow below */
	}
	/* like the header: shadow on the disc only once the page scrolls (body.header-scrolled, page.js),
	   and only on the part of the circle that hangs below the header. A disc-shaped layer behind the
	   logo carries the shadow; clip-path cuts it at the header's bottom edge
	   (header 120px - disc top 12px = 108px into the disc). */
	.logo a:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: #fff;
		z-index: -1;
		-webkit-clip-path: inset(108px -20px -20px -20px);
		clip-path: inset(108px -20px -20px -20px);
		-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0);
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0);
		-webkit-transition: box-shadow 0.25s ease;
		transition: box-shadow 0.25s ease;
	}
	body.header-scrolled .logo a:after {
		-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
	}
	.logo svg {
		width: 109px;
		max-height: none;
		height: auto;
	}
}

/* large screens: positions taken from the design (1920 frame) — grey top bar 1320px wide (x 300–1620),
   logo disc at x 1661–1801 just outside it */
@media (min-width: 1800px) {
	.head_width {
		padding-left: 80px;
		padding-right: 80px;
	}
	.logo a {
		right: -56px;
	}
}

/* ---------- Category menu (desktop) ---------- */
/* text sits low in the row (design), the active/hover underline stays on the header's bottom edge;
   total height unchanged (14 + 46 = 60) so the mega-menu still opens at the same place */
.menu_item_top a {
	font-size: 15px;
	color: #004741;
	line-height: 46px;
	padding-top: 14px;
}
.menu_item:hover .menu_item_top a,
.menu_item_top a.router-link-active {
	color: #004741;
}
.menu_item_top a:before {
	background: #004741;
}
.menu_item:hover .menu_item_top a:before,
.menu_item_top a.router-link-active:before {
	height: 4px;
}
/* the design drops the red last item — all items are brand green */
.menu_item:last-child .menu_item_top a,
.menu_item:hover:last-child .menu_item_top a {
	color: #004741;
}
.menu_item:last-child .menu_item_top a:before {
	background: #004741;
}

/* ---------- Product card ---------- */
/* homepage grid: 50px between rows (design), 36px between columns already */
@media (min-width: 768px) {
	#homePage .hp_products .product {
		margin-bottom: 50px;
	}
}
.product {
	border-radius: 0 0 20px 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* tag badges hang from the card's top edge (background + text colour come from the tag's ACF fields) */
.pod_icon_wrap {
	top: 0;
	left: 8px;
}
.pod_icon {
	border-radius: 0 0 10px 10px;
	font-size: 13px;
	padding: 3px 8px 0;
	line-height: 24px;
}
.pod_icon_wrap .pod_icon:first-child {
	margin-left: 4px;
}
.pod_icon_wrap .pod_icon + .pod_icon {
	margin-left: 4px;
}

.pr_price,
.pr_price_kilo {
	font-size: 19px;
	color: #004741;
}
.price_sale,
.pr_title_sale {
	color: #ef4134 !important;
}
.pr_title {
	font-size: 17px;
	color: #a4a4a4;
}
.pr_title_note {
	color: #a4a4a4;
}

.prod_selected_num {
	background: #004741;
	font-size: 19px;
}

/* ---------- Blog cards (homepage recipes) — flat, no shadow and no white frame in the design ---------- */
.slide_blog_item_in,
.slide_blog_item_in:hover {
	-webkit-box-shadow: none;
	box-shadow: none;
}
.hp_blog .slide_blog_item_in .frame {
	display: none;
}

/* ---------- Footer ---------- */
.footer {
	background: #004741;
	padding: 60px 0 0;
}

.ft_link_title a,
.ft_link a {
	color: #f0e5c6;
}
.ft_link_title a {
	font-weight: bold;
}

.ft_link_white a,
.ft_service a {
	color: #f0e5c6;
}
.ft_service a {
	font-size: 15px;
	text-decoration: underline;
	letter-spacing: 0;
}
.ft_col_right .ft_link_col .ft_link_white:nth-child(11) a {
	color: #ffbf3f;
}

.ft_logo a {
	background: #f0e5c6;
}

.ft_soc_item a {
	border-radius: 6px;
	border-color: #f0e5c6;
}
.ft_soc_item a path {
	fill: #f0e5c6;
}
.ft_soc_item a:hover {
	background: #f0e5c6;
}
.ft_soc_item a:hover path {
	fill: #004741;
}

.ft_credit,
.ft_credit a {
	color: #f0e5c6;
}
.ft_credit path,
.ft_credit polygon {
	fill: #f0e5c6;
}