/*
 * 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;
}
/* a11y (contrast): the white favourites count sits on the green heart (SVG), which contrast checkers
   can't see - they measure it against the light bar behind (1.2:1). A small green circle, the heart's
   own colour, behind the number gives it a real background (10.6:1) and is invisible inside the heart. */
.favorite_num {
	background-color: #004741;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	line-height: 12px;
	right: 5px;
}
@media only screen and (max-width: 800px) {
	.favorite_num {
		width: 14px;
		height: 14px;
		line-height: 14px;
		right: 7px;
	}
}
@media only screen and (max-width: 1350px) {
	.m_my_btn .favorite_num {
		width: 14px;
		height: 14px;
		line-height: 14px;
		left: 50%;
		right: auto;
		margin-left: -7px;
		top: 16px;
	}
}
/* the icon file has no width/height (viewBox only) — size it here, like the other top-bar icons */
.head_top .head_links .permanent-order-icon svg {
	width: 24px;
	height: 23px;
}
/* permanent-order icon (design asset): outlined box, filled opening + flaps (.po-fill).
   Same icon in the top bar, the mobile menu and the product page (svg.po-icon). */
.head_top .permanent-order-icon svg path,
svg.po-icon path {
	fill: none !important;
	stroke: #004741 !important;
}
.head_top .permanent-order-icon svg path.po-fill,
svg.po-icon path.po-fill {
	fill: #004741 !important;
}
/* user icon (כניסה / היי ...) is orange in the design */
.link_logout svg path,
.user-svg svg path {
	fill: #f34d3b;
}
/* הזמנה קבועה / גיפטקארד: same green, size and weight as the other top-bar links */
.head_top .head_links .gift-card-icon .text,
.head_top .head_links .permanent-order-icon .text {
	font-weight: bold;
	font-size: inherit;
	color: #004741;
}

/* Logo on a white disc that hangs a little below the header, at every width (replaces the old
   logo_shade.png, which didn't line up with the new logo). Sizes per header height:
   >=1600 design size (header 120), 1351-1599 (header 120), <=1350 (header 90), <=800 (header 60).
   --logo-top + --logo-d - header height = how far the disc hangs below the header. */
.logo a {
	--logo-head: 120px;
	--logo-top: 12px;
	--logo-d: 116px;
	--logo-svg: 90px;
	top: var(--logo-top);
	right: 5px; /* style.css 18px, minus half the extra disc width, so the logo stays put */
	width: var(--logo-d);
	height: var(--logo-d);
	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. */
.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(calc(var(--logo-head) - var(--logo-top)) -20px -20px -20px);
	clip-path: inset(calc(var(--logo-head) - var(--logo-top)) -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: var(--logo-svg);
	max-height: none;
	height: auto;
}
@media (min-width: 1600px) {
	.logo a {
		--logo-d: 140px;
		--logo-svg: 109px;
		right: 0;
	}
}
@media (max-width: 1350px) {
	.logo a {
		--logo-head: 90px;
		--logo-top: 8px;
		--logo-d: 96px;
		--logo-svg: 75px;
		right: 11.5px; /* style.css 22px */
	}
}
@media (max-width: 800px) {
	.logo a {
		--logo-head: 60px;
		--logo-top: 0px;
		--logo-d: 72px;
		--logo-svg: 58px;
		right: 50%;
		margin-right: -36px; /* centred */
	}
}

/* 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) {
	.logo a {
		right: -56px;
	}
}

/* The centre area (grey bar + category menu) fills the space between the logo and the cart with the
   same gap on both sides, so it is centred between them (it used to be a 1480px box centred in the
   page, which sat off-centre because the logo and the cart differ in size and offset).
   --logo-space / --cart-space = the logo's / cart's right / left offset + width at each width
   (see .logo a above, .head_cart a in style.css); the container's own padding adds 18px to the gap. */
@media (min-width: 801px) {
	.header > .container {
		--logo-space: 121px; /* 5 + 116 */
		--cart-space: 113px; /* 18 + 95 */
		--head-gap: 6px;
	}
	.header .head_width {
		max-width: none;
		margin: 0;
		padding-right: calc(var(--logo-space) + var(--head-gap));
		padding-left: calc(var(--cart-space) + var(--head-gap));
	}
}
@media (min-width: 1600px) {
	.header > .container {
		--logo-space: 140px; /* 0 + 140 */
	}
}
@media (min-width: 1800px) {
	.header > .container {
		--logo-space: 84px; /* -56 + 140 */
	}
}
@media (min-width: 801px) and (max-width: 1350px) {
	.header > .container {
		--logo-space: 107.5px; /* 11.5 + 96 */
		--cart-space: 88px; /* 18 + 70 */
		--head-gap: 0px;
	}
}

/* top bar on desktop: search (right) | text links | icon links (left) on one line. They were floats
   with fixed widths, so a 4th text link (סניפים) pushed the icon links onto a second line, over the
   category menu. As a flex row the search box gives up width first. */
@media (min-width: 1351px) {
	.head_top {
		display: flex;
		align-items: center;
		gap: 32px;
	}
	.head_top:before,
	.head_top:after {
		display: none; /* clearfix pseudo-elements would become flex items */
	}
	.head_top > .head_search {
		float: none;
		flex: 0 1 280px;
		min-width: 170px;
	}
	/* padding-top 6px (style.css) was the float-era vertical offset; in the flex row it pushed the
	   links 3px below the search box's centre */
	.head_top > .head_nav {
		float: none;
		flex: 0 0 auto;
		margin: 0;
		padding-top: 0;
	}
	.head_top > .head_links {
		float: none;
		flex: 0 0 auto;
		margin-right: auto; /* pushed to the left end (RTL) */
		padding-top: 0;
	}
}

/* ---------- 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;
}
/* desktop menu only — at <=1350px the same markup is the hamburger menu's rows (style.css sizes) */
@media (min-width: 1351px) {
	.menu_item_top a {
		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;
}

/* opened mega-menu: category title, "לכל המוצרים" and the group titles in the brand green */
.drop_title_name,
.drop_all_link,
.drop_link a {
	color: #004741;
}
.drop_sublink > a {
	color: #4a4a4a; /* 3rd-level links stay grey */
}
.drop_sublink > a:hover {
	color: #004741;
}

/* ---------- Hamburger menu (<=1350px) ---------- */
@media only screen and (max-width: 1350px) {
	/* all texts in the brand green: account row, name, address, category rows */
	.m_head_login-before a,
	.m_head_login a,
	.m_login_address,
	.m_login_link,
	.mobile_menu .menu_item_top a,
	.m_my_btn a {
		color: #004741;
	}
	.m_head_login-before svg path {
		fill: #f34d3b; /* user icon orange, as in the top bar */
	}
	.m_my_btn a path,
	.drop_down svg path {
		fill: #004741;
	}

	/* a category popped out of the menu: green header, green links; the sale strip at the bottom
	   on the site background instead of grey */
	.menu_drop.m_open .drop_title {
		background: #004741;
	}
	.menu_drop.m_open .drop_sale {
		background: #f7f5ed;
	}
	.menu_drop.m_open .m_all_link,
	.menu_drop.m_open .drop_col > .drop_link > a,
	.menu_drop.m_open .drop_col > .drop_link > .a-div,
	.menu_drop.m_open .drop_col > .drop_link > .m_sub_toggle {
		color: #004741;
	}
	.menu_drop.m_open .m_sub_arrow svg,
	.menu_drop.m_open .m_sub_arrow svg path {
		fill: #004741;
	}

	/* bottom links (service / delivery / FAQ): icons unchanged, brand-green background
	   instead of the old green pattern */
	.m_menu_bottom {
		background: #004741;
	}
	.m_menu_bottom_item svg path {
		fill: #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;
}
/* "new" tab (Monday: עדכון נראות תגית "חדש"): brand green, pink text, flush with the card's top
   edge at the end of the badge row, bottom edge curving up in the middle */
.pod_icon.new-tag-2026 {
	background: #004741;
	color: #ffadb7;
	font-weight: 700;
	border-radius: 0;
	padding-bottom: 4px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H36V26C28 26 24.5 23 18 23S8 26 0 26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H36V26C28 26 24.5 23 18 23S8 26 0 26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.pr_price,
.pr_price_kilo {
	font-size: 19px;
	color: #004741;
}
.price_sale,
.pr_title_sale {
	color: #ef4134 !important;
}
/* a11y (IS 5568 / WCAG 1.4.3): the small sale banner text needs 4.5:1 on white - #ef4134 is 3.83 */
.pr_title_sale {
	color: #d32f2f !important; /* 4.98:1 */
}
/* a11y: product name was #a4a4a4 (2.49:1 on white) */
.pr_title {
	color: #6b6b6b; /* 5.33:1 */
}
@media (min-width: 768px) {
	.pr_title {
		font-size: 17px;
	}
}
.pr_title_note {
	color: #6b6b6b; /* a11y: was #a4a4a4 (2.49:1), now 5.33:1 - weight + price per 100g */
}
/* a11y: struck-out old price + its ₪ sign were #7d7d7e (4.11:1) */
.pr_price_old,
.pr_price_old .currency {
	color: #6b6b6b; /* 5.33:1 */
}

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

/* mobile card add-to-cart is in Product.vue (scoped) */

/* ---------- Mobile product card ---------- */
@media (max-width: 767px) {
	/* names were running to 4 lines and pushing the price-per-100g under the add-to-cart bar */
	.product .pr_title {
		font-size: 14px;
		line-height: 1.25;
	}

	/* badges: smaller, kept clear of the heart (top-right); a 3rd badge that doesn't fit wraps
	   onto a second row of small pills instead of hanging over the image */
	.product .pod_icon_wrap {
		left: 6px;
		right: 40px;
		justify-content: flex-start;
		gap: 3px;
	}
	.product .pod_icon_wrap .pod_icon {
		margin: 0 !important;
		font-size: 11px;
		line-height: 18px;
		padding: 2px 5px 0;
		height: auto;
		white-space: nowrap;
	}
	.product .pod_icon_wrap .pod_icon.new-tag-2026 {
		padding-bottom: 3px;
	}
}

/* ---------- Product page (popup) ---------- */
/* add-to-cart, +/- quantity and the unit/kg toggle in the brand green */
.addto_btn_before a {
	background: #004741;
	border-color: #004741;
}
.addto_btn_before a:hover,
.addto_btn .plus a:hover,
.addto_btn .minus a:hover {
	background: #0b5d55;
}
.addto_btn {
	border-color: #004741;
}
.addto_btn .plus a,
.addto_btn .minus a {
	background: #004741;
}
.addto_btn .addto_cart_num {
	color: #004741;
}
.pp_prod_add_row a.addto_amount_it.active {
	background: #004741;
}

/* favourites / permanent-order links: top-bar icons (heart, permanent-order box) in the brand green */
.pp_favo_bt a {
	color: #004741;
}
.pp_favo_bt path {
	fill: #004741;
}
.pp_favo_bt.add-heart a:before {
	display: none; /* old black sprite heart -> svg heart (ProductPopup.vue) */
}
.pp_favo_bt.add-heart svg path.heart_svg {
	fill: transparent;
	stroke: #004741;
	stroke-width: 1.5px;
}
.pp_favo_bt.add-heart.active svg path.heart_svg {
	fill: #004741;
}
.m_pp_btn_item a {
	color: #004741;
}
.m_pp_btn_icon path {
	fill: #004741;
}
.m_pp_btn_icon path.heart_svg {
	fill: transparent; /* outline only (Monday: icons without fill) */
	stroke: #004741;
	stroke-width: 1.5px;
}
.m_pp_btn_icon svg.po-icon path.po-fill {
	fill: none !important;
}
.m_pp_btn_item.active a {
	color: #004741;
}
.m_pp_btn_item.active .m_pp_btn_icon,
.is--per a .m_pp_btn_icon {
	background: #004741;
	border-color: #004741;
}
.m_pp_btn_item.active .m_pp_btn_icon path.heart_svg {
	fill: transparent;
	stroke: #fff;
}
.is--per a .m_pp_btn_icon svg.po-icon path {
	stroke: #fff !important;
}
.is--per a .m_pp_btn_icon svg.po-icon path.po-fill {
	fill: none !important;
}

/* "חשבנו שיבוא לך גם" area: site background instead of the old grey */
.pp_prod_bottom {
	background: #f7f5ed;
}

/* ---------- 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;
}

/* ---------- Mobile page background ---------- */
/* style.css paints these pages #efede9 at <=800px; use the brand cream like desktop */
@media only screen and (max-width: 800px) {
	.page-template-home,
	.page-template-contact,
	.page-template-delivery,
	.page-template-category,
	.tax-product_cat,
	.page-template-category_sales,
	.page-template-career,
	.page-template-faq,
	#categoryPage {
		background: #f7f5ed;
	}
}

/* ---------- Cart: "להזמנה מאובטחת" / "לסיום עריכת הזמנה" button in the new green ---------- */
.bt_total a {
	background: #004741;
}
.bt_total_num {
	background: #003a35;
}
.bt_total a:hover {
	background: #0b5d55;
}
.bt_total a:hover .bt_total_num {
	background: #004741;
}
/* Mini cart "למבצעים והמלצות אישיות" link (Cart.vue) */
.cart .cart_bottom #product-recommendations-link .text {
	color: #004741;
}
.cart .cart_bottom #product-recommendations-link .up-arrow,
.cart .cart_bottom #product-recommendations-link .up-arrow path {
	fill: #004741;
}
.cart .cart_bottom #product-recommendations-link:hover .text {
	color: #0b5d55;
}
.cart .cart_bottom #product-recommendations-link:hover .up-arrow,
.cart .cart_bottom #product-recommendations-link:hover .up-arrow path {
	fill: #0b5d55;
}

/* ---------- Checkout / order-pay / gift-card pay: top strip in the new green ---------- */
.head_order {
	background: #004741;
}
.backto_bt-cart .cart0 {
	fill: #004741;
}

/* Checkout pages (Checkout / OrderEnter / OrderPay - root .checkout-2026): new logo on a green disc that
   hangs below the strip (replaces logo_bottom.png), and every old green (#213519 / #1e824c) -> brand green */
.checkout-2026 .order_logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	margin-top: 4px; /* strip 80px: the disc hangs 14px below it */
	padding: 0;
	border-radius: 50%;
	background: #004741;
	vertical-align: top;
}
.checkout-2026 .order_logo a:before {
	display: none;
}
.checkout-2026 .order_logo svg {
	width: 72px;
	height: auto;
}
.checkout-2026 .order_logo path {
	fill: #f1e6ca;
}
@media only screen and (max-width: 800px) {
	.checkout-2026 .order_logo a {
		width: 66px;
		height: 66px;
		margin-top: 0;
		top: 4px; /* strip 60px: hangs 10px */
		right: 14px; /* style.css 18px, minus the extra disc width */
	}
	.checkout-2026 .order_logo svg {
		width: 54px;
	}
}
:where(.checkout-2026) a {
	color: #004741;
}
.checkout-2026 .bt_green a,
.checkout-2026 .bt_green input,
.checkout-2026 .submit_bt input,
.checkout-2026 .submit_bt a {
	background: #004741;
}
.checkout-2026 .bt_green a:hover,
.checkout-2026 .bt_green input:hover,
.checkout-2026 .submit_bt input:hover,
.checkout-2026 .submit_bt a:hover {
	background: #0b5d55;
}
.checkout-2026 .title.center,
.checkout-2026 .title_s--green {
	color: #004741;
}
.checkout-2026 .check_title {
	color: #004741;
	border-bottom-color: #004741;
}
.checkout-2026 .addnotes {
	border-top-color: #004741;
	border-bottom-color: #004741;
}
.checkout-2026 .type_info,
.checkout-2026 .sep-plus,
.checkout-2026 .check_col_plus {
	background-color: #004741;
}
/* icons with the old green baked in as a fill attribute (edit pen, coupon/cashback row icons) */
.checkout-2026 svg [fill="#1e824c" i],
.checkout-2026 svg [fill="#20361d" i],
.checkout-2026 svg [fill="#213519" i] {
	fill: #004741;
}
.checkout-2026 .checkmark {
	background-image: url("../img/layout/check-2026.png");
}
.checkout-2026 .form_radio .checkmark {
	background-image: url("../img/layout/radio-2026.png");
}

/* ---------- כרמלה בקבוע (my-account permanent order + guest page), Figma 481:312 / 550:575 ---------- */
/* no parachute illustration any more (the new box image is part of the content) */
.main_white.has_bg,
.perm26-page {
	background-image: none !important;
	padding-bottom: 40px;
}
.page-template-my_permanent .cat_title,
.perm26-page .cat_title {
	color: #004741;
	font-family: "simpler", arial, sans-serif;
	font-weight: 700;
	font-size: 28px;
}

/* title row: subtitle + outline pill button(s) */
.perm26-titlebtn {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
	padding-top: 25px;
	margin-bottom: 60px;
}
.perm26-titlebtn .title {
	margin: 0;
	color: #004741;
	font-family: "simpler", arial, sans-serif;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
}
.perm26-buttons {
	display: flex;
	gap: 14px;
}
.perm26-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 41px;
	min-width: 197px;
	padding: 0 24px;
	border: 1px solid #004741;
	border-radius: 30px;
	background: transparent;
	color: #004741;
	font-family: "simpler", arial, sans-serif;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}
.perm26-btn:after {
	content: "\203A";
	font-size: 20px;
	line-height: 1;
	margin-top: -2px;
}
.perm26-btn:hover,
.perm26-btn:focus {
	background: #004741;
	color: #fff;
}
@media (max-width: 767px) {
	.perm26-titlebtn {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding-top: 0;
		margin-bottom: 30px;
	}
	.perm26-titlebtn .title {
		font-size: 20px;
	}
	.perm26-buttons {
		flex-direction: column;
	}
}

/* active order: green bar, box image on the right, 4 columns with dividers */
.perm26-box {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 140px;
	margin: 70px 0 30px;
	padding-right: 19.4%;
	border-radius: 20px;
	background: #004741;
	color: #fff;
	font-family: "simpler", arial, sans-serif;
}
.perm26-box-img {
	position: absolute;
	right: -11px;
	bottom: 0;
	width: 23.9%;
	max-width: 276px;
	height: auto;
	pointer-events: none;
}
.perm26-col {
	flex: 0 0 26%; /* of the area left of the image: 242px of 930 in the design */
	padding: 20px 20px 18px;
	text-align: right;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.perm26-col-items {
	flex-basis: 19.5%;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
.perm26-col-status {
	flex: 1 1 auto;
	border-left: 0;
	text-align: center;
	padding-top: 30px;
}
.perm26-count {
	width: 46px;
	height: 46px;
	margin: 4px auto 4px;
	border-radius: 50%;
	background: #d5e3a6;
	color: #004741;
	font-weight: 700;
	font-size: 27px;
	line-height: 50px;
}
.perm26-label,
.perm26-title,
.perm26-text {
	font-size: 16px;
	line-height: 19px;
}
.perm26-title {
	font-weight: 700;
}
.perm26-icon {
	display: block;
	width: 20px;
	height: 20px;
	margin: 4px 0 6px auto;
}
.perm26-icon path {
	fill: #fff;
}
.perm26-clock {
	width: 24px;
	height: 24px;
	margin-top: 0;
	margin-bottom: 4px;
}
.perm26-clock path {
	fill: none;
}
.perm26-link {
	display: inline-block;
	margin-top: 6px;
	color: #d5e3a6;
	font-size: 12px;
	text-decoration: underline;
}
.perm26-link:hover {
	color: #fff;
}
.perm26-status-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	line-height: 19px;
}
.perm26-info {
	display: inline-block;
	width: 11px;
	height: 11px;
	border: 1px solid #fff;
	border-radius: 50%;
	font-size: 8px;
	line-height: 10px;
	text-align: center;
	cursor: help;
}
.perm26-toggle {
	display: flex;
	width: 129px;
	height: 30px;
	margin: 10px auto 0;
	padding: 0;
	border-radius: 30px;
	background: #fff;
	overflow: hidden;
}
.perm26-toggle a {
	flex: 1;
	border-radius: 30px;
	color: #a4a4a4;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}
.perm26-toggle a.active {
	background: #d5e3a6;
	color: #004741;
	font-weight: 700;
}
@media (max-width: 1200px) {
	.perm26-box {
		padding-right: 0;
		padding-top: 90px;
		flex-wrap: wrap;
	}
	.perm26-box-img {
		right: auto;
		left: 10px;
		top: -50px;
		bottom: auto;
		width: 190px;
	}
	.perm26-col,
	.perm26-col-items,
	.perm26-col-status {
		flex: 1 1 50%;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
	.perm26-col-items {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		border-top: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 22px 20px;
	}
	.perm26-col-items .perm26-count {
		margin: 0;
	}
	.perm26-col-items .perm26-link {
		margin: 0;
	}
}
@media (max-width: 767px) {
	.perm26-box {
		margin-top: 60px;
	}
	.perm26-col,
	.perm26-col-status {
		flex-basis: 100%;
	}
	.perm26-col-items {
		flex-wrap: wrap;
		max-width: 60%;
	}
}

/* account side menu: brand green, cashback without the dashed rules */
.my_account .side .my_name_side_tx,
.my_account .side .side_nav_link a {
	color: #004741;
}
.my_account .side .side_nav_link.active a {
	font-weight: 700;
}

/* edit-order receipt head: the 2026 logo in brand green (style.css paints the old mark #231f20) */
.bill_head .inline svg {
	width: 40px;
}
.bill_head .inline path {
	fill: #004741;
}