/* ==========================================================
   Shlomies DESKTOP custom styles  -  version 1
   Covers: foundation (colors, font), top header, search,
   menu bar, Next Delivery, department dropdown, cart sidebar
   colors, plus the working rules carried over from the old
   desktop file.
   Palette (same as the mobile file):
   #8aaae5 (light), #5f82cc, #3f5fa8 (blue), #2c4580 (navy)
   ========================================================== */

/* Fonts. Imports must be at the very top of the file, otherwise
   the browser ignores them. Rubik is the new font (same as mobile).
   Material Icons is used by the little (i) info icon on prices. */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined");


/* 1) Colors used everywhere below. Change a color here and it
      changes in every section that uses it. */
:root {
	--navy: #2c4580;
	--blue: #3f5fa8;
	--mid: #5f82cc;
	--light: #8aaae5;
	--pale: #f4f7fd;
	--pale-2: #eef3fd;
	--line: #d5dff5;
	--line-2: #e3e9f6;
	--ink: #1f2a44;
	--muted: #6b7280;
	--sale-bg: #fdecec;
	--sale-line: #f5c2c2;
	--sale-red: #c62828;
}


/* 2) Whole site in Rubik. Icons are left alone. */
body,
body *:not(svg):not(svg *):not(.material-icons):not(.material-icons-outlined):not([class*="icon-font"]) {
	font-family: "Rubik", "Open Sans Hebrew", Arial, sans-serif !important;
}

/* Headings: the platform sets a special font and the old green;
   now Rubik in navy. */
h1, h2, h3, h4, h5, h6 {
	color: var(--navy);
}


/* 3) Page background: the same pale blue as the mobile app. */
html,
body {
	background-color: var(--pale) !important;
	color: var(--ink);
}


/* 4) Keyboard focus. The old file removed the focus outline, which
      makes the site unusable with a keyboard. Now a soft light-blue
      ring shows only when someone navigates with the keyboard. */
body :focus {
	outline: none;
}

body :focus-visible {
	outline: 2px solid var(--light) !important;
	outline-offset: 2px;
}


/* ==========================================================
   HEADER
   ========================================================== */

/* 5) Top bar: solid navy, same as the mobile header. */
body > header > .toolbar {
	background-color: var(--navy) !important;
	color: #ffffff;
	box-shadow: none;
}

/* 5a) Search field: white, rounded, soft shadow. */
body > header > .toolbar > .data > .search-wrapper > .input,
body > header > .toolbar > .data > .search-wrapper > .input > input[type=search] {
	border-radius: 12px !important;
}

body > header > .toolbar > .data > .search-wrapper > .input {
	background: #ffffff !important;
	box-shadow: 0 2px 10px rgba(16, 32, 72, 0.18);
}

body > header > .toolbar > .data > .search-wrapper > .input > input[type=search] {
	background: #ffffff !important;
	border: 0 !important;
	color: var(--navy) !important;
	text-align: left !important;
	text-transform: none !important;
}

body > header > .toolbar > .data > .search-wrapper > .input > input[type=search]::placeholder {
	color: #7b88a8 !important;
	opacity: 1;
}

/* The magnifier button: blue. */
body > header > .toolbar > .data > .search-wrapper > .input > button.icon svg {
	fill: var(--blue) !important;
}

/* 5b) "Shopping with SCN?" button: soft outlined pill on the navy bar. */
body > header > .toolbar > .data > .search-wrapper > .permanent-filters > button {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 12px !important;
	color: #ffffff !important;
}

body > header > .toolbar > .data > .search-wrapper > .permanent-filters > button:hover {
	background: rgba(255, 255, 255, 0.22) !important;
}

body > header > .toolbar > .data > .search-wrapper > .permanent-filters > button .main-title {
	color: #ffffff !important;
	font-size: 1em;
	font-weight: 600;
}

body > header > .toolbar > .data > .search-wrapper > .permanent-filters > button .sub-title {
	color: #dbe6fb !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body > header > .toolbar > .data > .search-wrapper > .permanent-filters > button > svg {
	fill: #ffffff !important;
	color: #ffffff !important;
}

/* 5c) Store info, language and account on the right: white icons,
       faint dividers. */
.retailer-data > div > .store-icon,
body > header > .toolbar > .data > .settings > .language sp-kikar-dropdown > .sp-dropdown-text svg:not(.arrow),
body > header > .toolbar sp-kikar-dropdown .sp-dropdown-text svg {
	fill: #ffffff;
}

body > header > .toolbar > .data > .settings > .border {
	background-color: rgba(255, 255, 255, 0.25) !important;
}

/* 5d) The small menus that open from those three (Contact Us,
       Store Info, My Account, Logout, languages): white rounded
       cards with navy text. */
body > header > .toolbar sp-kikar-dropdown .sp-dropdown-options-wrapper {
	background: #ffffff !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 28px rgba(44, 69, 128, 0.18) !important;
}

body > header > .toolbar sp-kikar-dropdown .sp-dropdown-options-wrapper .sp-kikar-option > .label {
	color: var(--ink) !important;
	font-weight: 500;
}

body > header > .toolbar sp-kikar-dropdown .sp-dropdown-options-wrapper .sp-kikar-option > .label:hover,
body > header > .toolbar sp-kikar-dropdown .sp-dropdown-options-wrapper .sp-kikar-option.active > .label {
	background: var(--pale) !important;
}

body > header > .toolbar sp-kikar-dropdown .sp-dropdown-options-wrapper .sp-kikar-option.selected > .label {
	background: var(--blue) !important;
	color: #ffffff !important;
}

body > header > .toolbar sp-kikar-dropdown .sp-dropdown-options-wrapper .sp-kikar-option .img-container svg {
	fill: var(--blue) !important;
}


/* 6) Menu bar under the header: white with a soft shadow. */
body > header > .menu {
	background: #ffffff;
	box-shadow: 0 1px 0 var(--line-2), 0 8px 20px rgba(44, 69, 128, 0.07);
}

/* 6a) "All Departments": quiet white button with navy text and a
       thin line; it only tints when hovered or open. */
body > header > .menu > .categories-title {
	background-color: #ffffff !important;
	color: var(--navy) !important;
	font-weight: 600;
	box-shadow: inset -1px 0 0 var(--line-2);
	transition: background-color 0.15s ease;
}

body > header > .menu > .categories-title:hover,
body > header > .menu > .categories-title.open {
	background-color: var(--pale-2) !important;
}

body > header > .menu > .categories-title > .categories-title-text {
	color: var(--navy) !important;
}

body > header > .menu > .categories-title svg,
body > header > .menu > .categories-title > .categories-icon,
body>header>.menu>.categories-title>.categories-icon {
	fill: var(--navy) !important;
}

/* 6b) Links next to it (Specials, Previous Orders, My Shopping Lists). */
body > header > .menu > .menu-navigation-bar > .navigation-link {
	color: var(--navy) !important;
	font-weight: 500;
}

body > header > .menu > .menu-navigation-bar > .navigation-link > a {
	color: inherit;
}

body > header > .menu > .menu-navigation-bar > .navigation-link:hover {
	color: var(--blue) !important;
}

body > header > .menu > .menu-navigation-bar > .navigation-link.active {
	border-bottom: 3px solid var(--blue) !important;
}

body > header > .menu > .menu-navigation-bar > .navigation-link .icon svg,
body > header > .menu > .menu-navigation-bar > .navigation-link.specials-link > a > .icon > svg {
	fill: var(--blue) !important;
}

/* 6c) Next Delivery: a pale rounded pill with navy text, kept a
       little away from the cart on the right. */
body > header > .menu > .next-delivery-wrapper {
	color: var(--navy);
	margin-right: 20px !important;
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content {
	background: var(--pale-2) !important;
	border: 1px solid var(--line) !important;
	border-radius: 12px !important;
	color: var(--navy);
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content > .border {
	display: none !important;
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content .next-delivery-text,
body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content .title,
body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content .times {
	color: var(--navy) !important;
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content .next-delivery-icon svg,
body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content > .arrow,
body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content > svg,
body > header > .menu > .next-delivery-wrapper > .next-delivery-content-wrapper > .next-delivery-content .next-delivery-sale-icon svg {
	fill: var(--blue) !important;
}

/* 6d) The panel that opens under it (Delivery Times / Pickup Times). */
body > header > .menu > .next-delivery-wrapper > .next-delivery-more-details {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: 0 0 14px 14px;
	box-shadow: 0 12px 28px rgba(44, 69, 128, 0.16);
	color: var(--ink);
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-more-details > .more-details-content > .delivery-type-buttons > button {
	color: var(--blue);
	font-weight: 600;
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-more-details > .more-details-content > .delivery-type-buttons > button.active {
	background: var(--pale);
	border-top-color: var(--blue) !important;
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-more-details > .more-details-content > .slots > ul .slot > .slot-times > .time > svg {
	fill: var(--sale-red);
}

body > header > .menu > .next-delivery-wrapper > .next-delivery-more-details > .close-more-details {
	background: var(--navy) !important;
	color: #ffffff;
}


/* 7) Department dropdown (opens under "All Departments"). */
body > header > .categories-wrapper > .categories {
	box-shadow: 0 14px 30px rgba(44, 69, 128, 0.18);
}

body > header > .categories-wrapper > .categories > .category > .category-name {
	color: var(--navy) !important;
	font-weight: 500;
}

body > header > .categories-wrapper > .categories > .category > .category-name:hover {
	background-color: var(--pale) !important;
}

/* The department icons turn the same blue as the mobile ones. */
body > header > .categories-wrapper > .categories > .category:not(.open) > .category-name .image img {
	filter: brightness(0) saturate(100%) invert(35%) sepia(26%) saturate(1274%) hue-rotate(184deg) brightness(95%) contrast(92%);
}

/* The department that is open: blue with white text and a white icon. */
body > header > .categories-wrapper > .categories > .category.open > .category-name,
body > header > .categories-wrapper > .categories > .category.open:hover > .category-name {
	color: #ffffff !important;
}

body > header > .categories-wrapper > .categories > .category.open > .category-name > .name-wrapper,
body > header > .categories-wrapper > .categories > .category.open:hover > .category-name > .name-wrapper {
	background-color: var(--blue) !important;
}

body > header > .categories-wrapper > .categories > .category.open > .category-name .image img {
	filter: brightness(0) invert(1);
}

/* The sub-category panel next to it. */
body > header > .categories-wrapper > .categories > .category.open > .sub-categories {
	display: block;
	background: #ffffff;
	border: 1px solid var(--line) !important;
	box-shadow: 0 14px 30px rgba(44, 69, 128, 0.18);
}

body > header > .categories-wrapper > .categories > .category > .sub-categories > .category-title-wrapper {
	color: var(--navy);
	font-weight: 600;
}

body > header > .categories-wrapper > .categories > .category > .sub-categories > .sub-categories-wrapper > .sub-category-block > .sub-category-shadow > .sub-category > .sub-category-link > a,
body > header > .categories-wrapper > .categories > .category > .sub-categories > .sub-categories-wrapper > .sub-category-block > .sub-category-shadow > .sub-category > .sub-sub-category > a {
	color: var(--ink);
}

body > header > .categories-wrapper > .categories > .category > .sub-categories > .sub-categories-wrapper > .sub-category-block > .sub-category-shadow > .sub-category > .sub-category-link:hover > a,
body > header > .categories-wrapper > .categories > .category > .sub-categories > .sub-categories-wrapper > .sub-category-block > .sub-category-shadow > .sub-category > .sub-sub-category:hover > a {
	border-color: var(--blue);
	color: var(--blue);
}

body > header > .categories-wrapper > .categories > .category > .sub-categories > .sub-categories-wrapper > .sub-category-block > .sub-category-shadow > .sub-category > .sub-category-link.category-title-sales,
body > header > .categories-wrapper > .categories > .category > .sub-categories > .sub-categories-wrapper > .sub-category-block > .sub-category-shadow > .sub-category > .sub-sub-category.category-title-sales {
	color: var(--sale-red);
}


/* ==========================================================
   COLORS USED ON EVERY PAGE
   ========================================================== */

/* 8) Add button and quantity control: one blue (was a pale blue
      that made white text hard to read). */
.actions > button.add-to-cart,
.actions.large-actions.landscape > .sp-quantity .quantity-wrapper,
.product-actions > button.add-to-cart,
.product-actions.large-actions.landscape > .sp-quantity .quantity-wrapper {
	background-color: var(--blue) !important;
	color: #ffffff;
}

.actions.landscape.large-actions > button.add-to-cart > svg,
.product-actions.landscape.large-actions > button.add-to-cart > svg,
.actions.landscape > button.add-to-cart svg,
.product-actions.landscape > button.add-to-cart svg {
	fill: #ffffff;
	filter: brightness(0) invert(1);
}

.actions.landscape > button.add-to-cart > svg,
.product-actions.landscape > button.add-to-cart > svg {
	height: 1.8em;
	width: 2.4em;
}

/* The little round number that shows how many are in the cart. */
.sp-cart-line-count > div,
.sp-cart-line-count > div > span,
.sp-list-items-wrapper table > tbody > tr.line > td.quantity > .sp-cart-line-count > div {
	background-color: var(--blue);
	color: #ffffff;
}

.actions,
.product-actions {
	color: #000000;
}

div.sp-quantity > .est-weight > .text,
div.sp-quantity > .weight-unit > .text {
	color: #414141;
}

/* Sale price: red, like on mobile. */
div.sp-product-price > .sale-price {
	color: var(--sale-red);
}


/* 9) Cart sidebar, colors only for now (the full redesign of the
      sidebar comes later). Header and bars in the same blues. */
html div.sidenav > section.cart > header > .data {
	background: var(--pale-2);
	color: var(--navy);
}

html div.sidenav > section.cart > header > .data > .price {
	color: var(--navy) !important;
}

html div.sidenav > section.cart > header > .data > .number-of-items svg {
	fill: var(--navy) !important;
}

html div.sidenav > section.cart > header > .data > .number-of-items > span.number {
	background: #ffffff;
	color: var(--navy);
	border: 1px solid var(--navy);
}

html div.sidenav > section.cart > header > .data > button {
	background: var(--blue) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 999px;
	font-weight: 600;
}

html div.sidenav > section.cart > header > .data > button:hover {
	background: var(--navy) !important;
}

html div.sidenav > section.cart > header > .edit-order {
	background: var(--navy);
	color: #ffffff;
}

html div.sidenav > section.cart > header > .previous-orders {
	background: #ffffff;
	color: var(--navy);
	border-bottom: 1px solid var(--line-2);
}

html div.sidenav > section.cart > header > .previous-orders button,
html div.sidenav > section.cart > header > .previous-orders button span {
	color: var(--navy) !important;
}

html div.sidenav > section.cart > header > .previous-orders button svg {
	fill: var(--navy) !important;
}

html div.sidenav > nav.cart > header > .data,
html div.sidenav > nav.cart > header > .previous-orders {
	background: var(--pale-2);
}

html div.sidenav > section.cart > .collapsible > section.cart > .product-in-cart > div.product-content > .quantity-wrapper > .sp-cart-line-count > div,
html div.sidenav > section.cart > .collapsible > section.cart .product-by-category-outer .product-in-cart > div.product-content > .quantity-wrapper > .sp-cart-line-count > div,
html div.sidenav > section.cart > .collapsible > section.cart .product-in-cart > div.product-content > .quantity-wrapper > .sp-cart-line-count > div {
	background-color: var(--blue);
}

html div.sidenav > section.cart > .collapsible > footer > .you-save > svg {
	fill: var(--blue);
}

html div.sidenav > section.cart > .collapsible > footer > .you-save > .price.has-value {
	color: var(--blue);
}

html div.sidenav > section.cart > .collapsible > section.cart > .product-in-cart:not(.removed):hover,
html div.sidenav > section.cart > .collapsible > section.cart > .product-in-cart:not(.removed):focus-within,
html div.sidenav > section.cart > .collapsible > section.cart > .product-in-cart:not(.removed).active {
	border-color: var(--light);
}

html div.sidenav > section.cart > .collapsible > section.lets-adding-items > * {
	color: #6e6e6e;
	fill: #6e6e6e;
}


/* 10) Footer. Hidden, as in the old file. To bring it back, delete
       this rule (it will need styling first). */
body > footer,
footer[ui-view="footer"],
#footer {
	display: none !important;
}


/* ==========================================================
   WORKING RULES CARRIED OVER FROM THE OLD DESKTOP FILE
   These do real jobs (renaming labels, hiding things, fixing
   layouts). They are kept as they were, and will be restyled
   page by page in the next steps.
   ========================================================== */

/* Renamed labels */
.my-shop-lists table tbody tr:first-child .shopping-lists-name span {
	visibility: hidden;
}

.my-shop-lists table tbody tr:first-child .shopping-lists-name span::before {
	visibility: visible;
	content: "My Favorites";
}

html.smart-list section.view > div[ui-view] .smart-list-container .title-wrapper .title h1 {
	visibility: hidden;
}

html.smart-list section.view > div[ui-view] .smart-list-container .title-wrapper .title h1:before {
	visibility: visible;
	content: "My Favorites";
}

/* Payment labels: "Call Me" -> "Call me, or use payment on file",
   "Credit On File" -> "SCN Card", and the heading after choosing it. */
.payment-option-callcustomer {
	font-size: 0;
}

.payment-option-callcustomer::after {
	content: "Call me, or use payment on file";
	font-size: 0.85rem;
}

.payment-option-storecredit {
	font-size: 0;
}

.payment-option-storecredit::after {
	content: "SCN Card";
	font-size: 0.85rem;
}

.credit-on-file h5 {
	font-size: 0;
}

.credit-on-file h5::after {
	content: "Enter SCN Card Number";
	font-size: 0.85rem;
}

/* Order status words: the app's wording is replaced. */
.order-status-5 > .status,
.order-status-3 > .status {
	visibility: hidden;
}

.order-status-5 > .status:before {
	content: 'PAUSED';
	visibility: visible;
}

.order-status-3 > .status:before {
	content: 'RELEASED';
	visibility: visible;
}

html.history section.view > div > .orders-history td.status-column .status-description .question-mark,
html.order section.view > div .order-container .title-wrapper > .order-details .order-status .status-description .question-mark {
	display: none;
}

html.order section.view > div .order-container .title-wrapper > .order-details .order-status .status-description {
	display: none;
}

.order-status-3 > span,
.order-status-5 > span {
	visibility: hidden;
}

html.order section.view > div .order-container .title-wrapper > .order-details .order-status-3 > span:before,
html.order section.view > div .order-container .title-wrapper > .order-details .order-status-5 > span:before {
	content: 'PAUSED';
	visibility: visible;
}

/* Extra line in the age check for alcohol */
html .dialog-wrapper > .dialog.age-restriction-dialog > .dialog-body .age-restriction .description:after {
	content: "\a An ID must be presented upon delivery. Otherwise, alcoholic beverages will be removed from the delivery.";
	font-size: 0.8em;
	white-space: pre-wrap;
	display: block;
	margin-top: -0.8em;
}

/* "Clear cart" popup title starts with a capital */
.dialog-wrapper .dialog.clear-cart-popup .dialog-body .content .title:first-letter {
	text-transform: capitalize;
}

/* Product page: "Ingredients & Allergy Info" heading */
.more-details::before {
	content: " Ingredients & Allergy Info";
	font-size: 1.4705882352941178em;
	font-weight: 700;
	padding: 2em 0 0.3em 0;
	margin-bottom: 0.5em;
	border-bottom: 2px solid var(--line);
	color: var(--navy);
	font-family: inherit !important;
}

.floor-apartment.more-details::before {
	display: none;
}

.more-details > h3 {
	font-size: 1.4705882352941178em;
	font-weight: 700;
	padding: 2em 0 0.3em 0;
	margin-bottom: 0.5em;
	border-bottom: 2px solid #c8c8c8;
	visibility: hidden;
}

/* Missing product picture: your placeholder image */
.image[style*="missing-image.png"] {
	background-image: url("https://d226b0iufwcjmj.cloudfront.net/retailers/1265/resources/1763665918169-0.9958815900877034.png") !important;
}

.product-image:not(:has(img)) {
	background-image: url("https://d226b0iufwcjmj.cloudfront.net/retailers/1265/resources/1763665918169-0.9958815900877034.png") !important;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Hidden things */
.promotion-tag.tpr-prices {
	display: none !important;
}

.sp-promotion > .promotion-wrapper.general:not(.special) {
	position: absolute;
	left: 0.5em;
	right: 0.5em;
	display: none;
}

.fade {
	visibility: hidden;
	display: none;
}

html.specials .fixed-wrapper .image img {
	display: none;
}

section.view sp-items > .items-wrapper > .no-results-message {
	display: none;
	margin-top: 5em;
	text-align: center;
}

html.checkout section.view .checkout-content .tab > .details section.delivery-details .dropdown-options-wrapper > .dropdown-options ng-include .dropdown-items-wrapper .dropdown-items > .dropdown-item > .dropdown-item-content > .price {
	display: none;
}

html.user-edit .detail-container .detail-footer label.checkbox > span.box {
	border: 1px solid #ffffff;
}

html.user-edit .detail-container .detail-footer label.checkbox > span.box svg,
html.user-edit .detail-container .detail-footer label.checkbox > span.label {
	fill: #ffffff;
	color: #ffffff;
}

/* Prices: the small (i) info icon and the tooltip */
.sp-promotion > .promotion-wrapper {
	background: transparent !important;
	margin-top: -15px !important;
}

.promotion-wrapper .sale-price {
	font-weight: 700 !important;
	font-size: 1.6em !important;
}

.promotion-wrapper .regular-price {
	color: #888 !important;
}

.promotion-wrapper > div[aria-labelledby] {
	border: none !important;
	background: none !important;
	opacity: 0.5 !important;
}

.promotion-wrapper > div[aria-labelledby]:hover {
	opacity: 1 !important;
}

.promotion-wrapper > div[aria-labelledby] svg {
	display: none !important;
}

.promotion-wrapper > div[aria-labelledby]::before {
	font-family: 'Material Icons Outlined' !important;
	content: 'info' !important;
	font-size: 18px !important;
	color: #666 !important;
}

.promotion-tooltip > .tooltip {
	background: #fff !important;
	border: 1px solid #ddd !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.promotion-tooltip.topArrow:after,
.promotion-tooltip.bottomArrow:before {
	display: none !important;
}

/* Home page: spacing around the sections, and pictures for the
   links carousel. (Restyled in the home page step.) */
html.home section.main section.view .home-page-wrapper > .content {
	background-image: none !important;
	gap: 0.7em;
	background-size: auto;
	background-repeat: repeat;
	-webkit-transition: padding 0.3s linear;
	transition: padding 0.3s linear;
	-webkit-padding-start: 3.5em;
	padding-inline-start: 3.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	position: relative;
	z-index: 1;
}

html.home section.main section.view .home-page-wrapper > .content > .component {
	gap: 0.7em;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	border-radius: 1px;
}

.home-page-wrapper .sp-carousel .links-carousel-item > .link > .gradient-background {
	background-image: linear-gradient(0, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 0%);
}

/* Product cards in the home carousel: show the whole product name
   instead of "Oatmeal..." */
.special-item .data .name {
	font-size: 0 !important;
}

.special-item .data .name::after {
	content: attr(title) !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
	display: block !important;
	color: inherit !important;
}

.special-item > .special-product > .data > .brand-and-weight > .brand,
.special-item > .special-product > .data > .brand-and-weight > .weight {
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1em;
	max-width: 100%;
	white-space: nowrap;
}

.special-item > .special-product > .data > .brand-and-weight {
	padding: unset;
}

.special-item > .special-product > .data > .sp-product-price {
	padding-top: 0.5em;
}

.special-item > a.special > .action-title {
	padding-top: 7%;
	height: 26.8006%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.similar-products .item.product sp-product .name {
	height: 20%;
}

/* Category pages: title, breadcrumbs, description and filters.
   (Restyled in the category pages step.) */
section.view sp-items > .fixed-banner > .content > .content-top > .title {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	white-space: nowrap;
	width: 0;
	height: 100%;
	padding-right: 2em;
}

section.view sp-items > .filters > div.filter .filter-content > .filter-button-wrapper {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	margin: 0.2em 0;
	text-align: left;
	width: 100%;
	padding: 0.1em 1em;
	border-radius: 1em;
	color: #4a4a4a;
}

section.view sp-items > .filters > div.filter > .filter-content > .filter-button-wrapper.selected,
section.view sp-items > .filters > div.filter > .filter-content > .filter-button-wrapper.selected:hover {
	background-color: var(--blue);
}

section.view sp-items > .fixed-wrapper > .title-and-side-bar > .side-bar > .filter-item > .filter > .filter-content > .filter-button-wrapper.selected,
section.view sp-items > .fixed-wrapper > .title-and-side-bar > .side-bar > .filter-item > .filter > .filter-content > .filter-button-wrapper.selected:hover,
section.view sp-items > .fixed-wrapper > .filtering-filters-wrapper > .filtering-filters .filters-group > .filters-item {
	color: #ffffff;
}

section.view sp-items > .fixed-wrapper > .filtering-filters-wrapper > .filtering-filters .filters-group > .filters-item > .x > svg,
section.view sp-items > .fixed-wrapper > .title-and-side-bar > .side-bar > .filter-item > .filter .filter-content > .filter-button-wrapper > .icons > .clear-btn,
section.view sp-items > .fixed-wrapper > .title-and-side-bar > .side-bar > .filter-item > .filter .filter-content > .filter-button-wrapper.selected > .icons > .pin,
section.view sp-items > .fixed-wrapper > .filtering-filters-wrapper > .filtering-filters .filters-group > .filters-item > .pin {
	fill: #ffffff;
}

section.view sp-items > .fixed-wrapper > .title-and-side-bar > .side-bar > .filter-item > .filter .filter-content > .filter-button-wrapper > .icons > .pin {
	fill: #000000;
}

section.view sp-items > .fixed-wrapper > .filtering-filters-wrapper .category-title-wrapper > h1 {
	position: relative;
	width: auto;
	font-size: 2em;
	margin-top: 30px;
	margin-left: 18.5px;
}

section.view sp-items > .fixed-wrapper.banner-one-line > .bread-crumbs {
	padding: 0.2em 0 0.2em 0.4em;
	margin-left: 300px;
	font-size: 0.9em;
}

.ltr section.view sp-items > .fixed-wrapper.banner-one-line > .bread-crumbs {
	left: 1.2em;
}

@media screen and (min-width: 1570px) {
	.ltr section.view sp-items > .fixed-wrapper.banner-one-line > .bread-crumbs {
		left: 6em;
	}
}

@media (min-width: 1750px) {
	h1#page_title {
		left: 19px;
	}
}

.bread-crumbs,
.bread-crumbs * {
	transition: none !important;
	animation: none !important;
}

section.view sp-items > .fixed-wrapper > .description {
	top: 6em;
}

p.description.secondary-font {
	margin-left: 1em;
	margin-right: 10em;
	font-size: 1.1em !important;
}

.sp-radio-buttons.switcher > label.sp-radio-option.checked {
	color: #ffffff;
}

.dialog-wrapper .dialog.permanent-view-filters-dialog .dialog-body section .sp-carousel .view-filters-group .product-tag.selected {
	background-color: var(--blue);
	color: #ffffff;
}

.dialog-wrapper .dialog.permanent-view-filters-dialog .dialog-body section .sp-carousel .view-filters-group .product-tag.selected svg {
	visibility: visible;
	fill: #ffffff;
}

html .sp-list-items-wrapper table > tbody > tr.line > td.line-special-details {
	color: #FFC20F;
}

sp-product > .product-dialog-indication {
	fill: #ffffff;
}

div.dialog.product > .dialog-body {
	border: 3px solid #ffffff;
}

div.dialog.product > .dialog-body > .product-details .product-properties .product-property sp-kikar-dropdown .sp-dropdown-options-wrapper .sp-kikar-option.active,
div.dialog.product > .dialog-body > .product-details .product-properties .product-property sp-kikar-dropdown .sp-dropdown-options-wrapper .sp-kikar-option.active:focus {
	background-color: #e1e1e1;
}

.item.product > .product-item.bumper > .recipe-bumper .name {
	font-size: 1.5em;
}

.item.product > .product-item.bumper > .recipe-bumper .author {
	font-size: 1.1em;
}

.dialog-wrapper .dialog.choose-area-dialog .dialog-body > form.choose-area > a.back {
	position: absolute;
	top: 0.7em;
	left: 1.375em;
	cursor: pointer;
	text-decoration: underline;
}

.dialog-wrapper .dialog.choose-area-dialog .dialog-body h1 {
	padding-top: 0;
}

.dialog-wrapper .dialog.choose-area-dialog .dialog-body > form.choose-area.store-list {
	padding: 0;
}

/* Cart total on one line */
html div.sidenav > section.cart > header > .data > .price {
	font-size: 1.5em;
}

/* Checkout. (Restyled in the checkout step.) */
html.checkout section.view .checkout-content .tab > .summary > div.summary-container #payment_iframe {
	height: 45em;
	width: 25em;
}

checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > button.next-button {
	color: #000000;
	font-weight: 700;
	background: #FFFFFF;
	border-radius: 2.625em;
}

checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .total-price > .number-of-items > svg {
	height: 2.625em;
	width: 2.625em;
	fill: #ffffff;
}

checkout-bottom-banner > .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .total-price > .number-of-items > span.number {
	background-color: var(--blue);
	color: #ffffff;
	border: 2px solid #FFFFFF;
}

checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .membership-savings > .price > span,
checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .membership-savings > .text > span,
checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .you-save > .price > span,
checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .you-save > .text > span {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25em;
	color: #ffffff;
}

checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content button.back-button,
checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content button.continue-shopping {
	vertical-align: middle;
	color: #FFFFFF;
	border: 2px solid #FFFFFF;
	font-weight: 700;
	padding: 0 2em;
	border-radius: 3em;
	height: 100%;
}

checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .total-price > .price,
checkout-bottom-banner .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .total-price > .price > .value {
	padding-left: 0.5625em;
	font-weight: 700;
	color: #FFFFFF;
}

checkout-bottom-banner > .checkout-bottom-banner-wrapper > .checkout-banner > .content > .total-summary > .you-save > svg {
	filter: brightness(1) invert(1);
}

.price .title {
	color: #ffffff;
}

html.checkout section.view .checkout-content .tab > .summary > div.summary-container .payment-details .check-out-button button {
	color: #ffffff;
}

html.checkout section.view .checkout-content .tab > .details section.delivery-details > .data > .details-region .sp-slider-picker .slider-items-wrapper .slider-items > .slider-item.selected > .slider-item-content > ng-include > .date,
html.checkout section.view .checkout-content .tab > .details section.delivery-details > .data > .details-region .sp-slider-picker .slider-items-wrapper .slider-items > .slider-item.selected > .slider-item-content > ng-include > .date-name,
html.checkout section.view .checkout-content .tab > .details section.delivery-details > .data > .details-region .sp-slider-picker .slider-items-wrapper .slider-items > .slider-item.selected > .slider-item-content > ng-include > .date.today,
html.checkout section.view .checkout-content .tab > .details section.delivery-details > .data > .details-region .sp-slider-picker .slider-items-wrapper .slider-items > .slider-item > .slider-item-content > ng-include .selected-time,
html.checkout section.view .checkout-content .tab > .details section.delivery-details .dropdown-options-wrapper > .dropdown-options ng-include .drop-down-items-wrapper .dropdown-items > .dropdown-item.selected,
html.checkout section.view .checkout-content .tab > .details section.delivery-details .dropdown-options-wrapper > .dropdown-options ng-include .drop-down-items-wrapper .dropdown-items > .dropdown-item.selected:hover,
html.checkout section.view .checkout-content .tab > .details section.delivery-details .dropdown-options-wrapper > .dropdown-options ng-include .dropdown-items-wrapper .dropdown-items > .dropdown-item.selected {
	color: #ffffff;
}

html.checkout section.view .checkout-content .tab > .details section.delivery-details .dropdown-options-wrapper > .dropdown-options ng-include .dropdown-items-wrapper .dropdown-items > .dropdown-item > .dropdown-item-content .specials-wrapper .specials-tooltip > .specials-content > .special-content .description {
	color: #000000;
}

html.finish section.view > [ui-view] > .checkout-content > .tab > .finish-content > button.continue-shopping {
	font-size: 1.5625em;
	height: 2em;
	border-radius: 2em;
	color: #000;
	font-weight: 700;
	padding: 0 2em;
	background-color: #eee;
}

html.user-edit .account-options .continue-shopping-button a {
	color: #FFFFFF;
	display: block;
	height: 100%;
	width: 100%;
	padding: 1.2em 3em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html.user-edit .account-options .continue-shopping-button a svg {
	height: 1em;
	width: 1em;
	fill: #FFFFFF;
}


/* ==========================================================
   HOME PAGE (step 2)
   Weekly Specials and the other carousels: white rounded cards
   on a calm background, soft-red "Sale" tab, blue arrows.
   ========================================================== */

/* Section titles and the "Go to Specials" link */
.home-page-wrapper .component .header-wrapper .title .component-title {
	color: var(--navy) !important;
	font-weight: 700;
	font-size: 2em;
	letter-spacing: -0.01em;
}

.home-page-wrapper .component .header-wrapper .link a.title-link {
	color: var(--blue) !important;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--light);
}

.home-page-wrapper .component .header-wrapper .link a.title-link:hover {
	color: var(--navy) !important;
	border-bottom-color: var(--navy);
}

/* Round arrows */
.home-page-wrapper .carousel-btns-wrapper .action > button,
.home-page-wrapper .sp-carousel > .action > button {
	background: #ffffff !important;
	border: 1px solid var(--line) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 8px rgba(44, 69, 128, 0.12) !important;
}

.home-page-wrapper .carousel-btns-wrapper .action > button svg,
.home-page-wrapper .sp-carousel > .action > button svg {
	fill: var(--blue) !important;
}

.home-page-wrapper .carousel-btns-wrapper .action > button:hover:not(.disabled) {
	background: var(--blue) !important;
	border-color: var(--blue) !important;
}

.home-page-wrapper .carousel-btns-wrapper .action > button:hover:not(.disabled) svg {
	fill: #ffffff !important;
}

.home-page-wrapper .carousel-btns-wrapper .action > button.disabled {
	opacity: 0.45;
}

/* Banner dots */
.home-page-wrapper .background .choose-image > button {
	border-radius: 50% !important;
}

.home-page-wrapper .background .choose-image > button.active {
	background: var(--blue) !important;
}

/* Special cards */
.special-item {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--line-2);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(44, 69, 128, 0.08);
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.special-item:hover {
	border-color: var(--light);
	box-shadow: 0 8px 22px rgba(44, 69, 128, 0.16);
	transform: translateY(-2px);
}

.special-item .brand-and-weight,
.special-item .brand-and-weight span {
	color: var(--muted) !important;
}

.special-item .data .name {
	color: var(--ink) !important;
	font-weight: 500;
}

.special-item .sp-product-price .sale-price {
	color: var(--sale-red) !important;
	font-weight: 700;
}

.special-item .sp-product-price .regular-price {
	color: var(--muted) !important;
}

.special-item .special-details .description,
.special-item .special-details .special-description-title {
	color: var(--navy) !important;
	font-weight: 600;
}

/* Sale tab: soft red "Sale" pill instead of the round badge */
.special-item .sp-sale-icon.fixed-sale {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 3px 10px !important;
	background: var(--sale-bg) !important;
	border: 1px solid var(--sale-line) !important;
	border-radius: 999px !important;
	z-index: 2;
}

.special-item .sp-sale-icon.fixed-sale svg {
	display: none !important;
}

.special-item .sp-sale-icon.fixed-sale::after {
	content: "Sale";
	color: var(--sale-red);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

/* Add button on the card */
.special-item .add-to-cart {
	background: var(--blue) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 600;
}

.special-item .add-to-cart:hover {
	background: var(--navy) !important;
}

.special-item .add-to-cart svg {
	fill: #ffffff !important;
}

.special-item .add-to-cart .text {
	color: #ffffff !important;
}


/* ==========================================================
   SEARCH RESULTS: Single / Case as a two-way switch
   The site builds this as a dropdown. Here both options are shown
   side by side as a small segmented switch. "Single" is filled by
   default, and the fill follows whichever side was clicked last.
   (The site does not mark the chosen option anywhere in the page,
   so CSS can only follow the click.)
   ========================================================== */
sp-kikar-dropdown.single-case-dropdown {
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	background: transparent !important;
	overflow: visible !important;
}

/* hide the closed box (the "Single v" part) */
sp-kikar-dropdown.single-case-dropdown > .sp-dropdown-text {
	display: none !important;
}

/* the track */
sp-kikar-dropdown.single-case-dropdown > ul.sp-dropdown-options-wrapper {
	display: inline-flex !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 3px !important;
	gap: 2px;
	list-style: none !important;
	background: var(--pale-2) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: inset 0 1px 2px rgba(44, 69, 128, 0.14) !important;
	pointer-events: auto !important;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* each side */
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label {
	display: block !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 5px 16px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.01em;
	cursor: pointer;
	outline: none !important;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label .for-vertical-align {
	display: none !important;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:hover {
	color: var(--navy) !important;
}

/* the filled side: "Single" by default... */
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option:first-child > .label,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:focus,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:active,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option.selected > .label {
	background: var(--blue) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 6px rgba(44, 69, 128, 0.35);
}

/* ...unless the other side was clicked */
sp-kikar-dropdown.single-case-dropdown > ul:has(.sp-kikar-option:not(:first-child) > .label:focus) .sp-kikar-option:first-child > .label:not(:focus) {
	background: transparent !important;
	color: var(--muted) !important;
	font-weight: 500 !important;
	box-shadow: none;
}

/* The words sit in an inner span that kept its own dark color, so
   the colors are set on it directly. */
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label .option-content {
	color: var(--muted) !important;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:hover,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:hover .option-content {
	color: var(--navy) !important;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option:first-child > .label,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option:first-child > .label .option-content,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:focus,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:focus .option-content,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:active .option-content,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option.selected > .label .option-content {
	color: #ffffff !important;
}

sp-kikar-dropdown.single-case-dropdown > ul:has(.sp-kikar-option:not(:first-child) > .label:focus) .sp-kikar-option:first-child > .label:not(:focus),
sp-kikar-dropdown.single-case-dropdown > ul:has(.sp-kikar-option:not(:first-child) > .label:focus) .sp-kikar-option:first-child > .label:not(:focus) .option-content {
	color: var(--muted) !important;
}

/* Polish: both sides the same size, centered, and the clicked side
   always gets the full blue fill (no half-faded look). */
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label {
	min-width: 62px;
	text-align: center !important;
	transition: none !important;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label .option-content {
	display: block;
	text-align: center;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option:focus-within > .label,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:focus,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:focus-visible,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:active,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option.active > .label {
	background: var(--blue) !important;
	background-color: var(--blue) !important;
	background-image: none !important;
	opacity: 1 !important;
	outline: none !important;
	box-shadow: 0 2px 6px rgba(44, 69, 128, 0.35) !important;
}

sp-kikar-dropdown.single-case-dropdown .sp-kikar-option:focus-within > .label .option-content,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:focus .option-content,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option > .label:focus-visible .option-content,
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option.active > .label .option-content {
	color: #ffffff !important;
	font-weight: 600 !important;
}

/* the unclicked side stays flat */
sp-kikar-dropdown.single-case-dropdown .sp-kikar-option:not(:focus-within):not(:first-child):not(.active) > .label:not(:hover) {
	background: transparent !important;
	box-shadow: none !important;
}

/* The site marks the side that was clicked with "active". Follow
   that too, so Case keeps its fill after the mouse moves away. */
sp-kikar-dropdown.single-case-dropdown > ul:has(.sp-kikar-option:not(:first-child).active) .sp-kikar-option:first-child:not(.active):not(:focus-within) > .label,
sp-kikar-dropdown.single-case-dropdown > ul:has(.sp-kikar-option:not(:first-child).active) .sp-kikar-option:first-child:not(.active):not(:focus-within) > .label .option-content {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--muted) !important;
	font-weight: 500 !important;
}