/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');


/* Global Color Variables
Primary:   #8a1b2e  - Burgundy (exact brand color from logo palette)
Secondary: #fbbe18  - Golden Yellow (exact brand color from logo palette)
Dark:      #000000  - Black (exact brand color from logo palette)
Light:     #ffffff  - White (exact brand color from logo palette)
Grey:      #999999  - Neutral mid-tone
*/

:root {
	--primary: #8a1b2e;
	--secondary: #fbbe18;
	--dark: #000000;
	--light: #ffffff;

	--grey: #999999;

	/* Cormorant Garamond SemiBold (headlines) + Poppins (body) */
	--primary-font: 'Cormorant Garamond', Georgia, serif;
	--secondary-font: 'Poppins', sans-serif;

	/* Bootstrap Overrides
    You can override bootstrap application default colours at root, by using the !important flag
    This will change ALL implementations of the bootstrap colour tags
    You can also override bootstrap colours for individual elements, do this when you don't want the changes to apply globally. */

	--bs-black: var(--dark) !important;
	--bs-link-hover-color-rgb: var(--dark) !important;
	--bs-primary: var(--primary) !important;
	--bs-background-blue: var(--secondary) !important;
	--bs-emphasis-color: var(--dark) !important;
	--bs-heading-color: var(--primary) !important;
	--bs-medium-grey: var(--grey) !important;
	--bs-highlight-rgb: var(--secondary) !important;
	--bs-highlight: var(--secondary) !important;
	--bs-secondary-rgb: var(--dark) !important;
	--bs-gray: var(--grey) !important;
}


@keyframes descend {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.card {
	opacity: 0;
	animation: descend .9s ease-in-out forwards;
}


/* Universal Elements */
a {
	color: var(--primary);
	background: transparent;
}

a:hover {
	color: var(--dark);
	background: transparent;

}

body {
	font-family: var(--secondary-font);
	color: var(--dark);
	font-size: 1.0625rem;
}

h1,
h2,
h3,
h4 {
	font-family: var(--primary-font);
}

h3, .h3 {
	font-size: 2.25rem;
	line-height: 2.5rem;
}

h4, .h4 {
	font-size: 1.875rem;
	line-height: 2.125rem;
}

h5, .h5 {
	font-family: var(--secondary-font);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
}


/* End Universal Elements */


/* Header */

.logo-container {
	display: flex;
	justify-content: flex-start;
}

.logo-container>a {
	display: block;
	width: 60%;
	max-width: 420px;
	min-width: 160px;
}

.logo-container>a>img {
	display: block;
	width: 70%;
	height: auto;
}

.navbar-main {
	height: 80px;
}

.c-dropdown-menu {
	padding: 0 15px !important;
}

.c-profile__group .c-dropdown-menu-card .c-dropdown-card .c-profile-links .c-dropdown-menu li .dropdown-item {
	border-bottom: 1px solid var(--dark) !important;
}

.c-btn__signin .btn,
.c-btn__signup .btn {
	white-space: nowrap;
}

.navbar-main {
	background: var(--light) !important;
	display: flex;
	justify-content: space-between;
}

.navbar-brand {
	display: none;
}

.nav-item__language {
	display: none !important;
}


.header-links {
	display: none;
}

.header-container {
	width: 100%;
	display: flex;
	justify-content: space-between
}

.nav.c-nav__delivery {
	background: var(--dark) !important;
	color: var(--light) !important;
}

.nav-item>.c-btn__sm {
	color: var(--secondary);
}

.nav-item>img {
	filter: grayscale(1) contrast(7);
}

/* Desktop Header */
@media only screen and (min-width:48.001rem) {}

/* Mobile Header */
@media only screen and (max-width:48rem) {
	.navbar-toggler-icon {
		filter: invert(1);
	}

	.c-nav__delivery .c-label__text {
		color: var(--light);
	}

	.c-header__main>nav>div {
		margin: auto;
		display: block !important;
	}

	.logo-container>a>img {
		margin: auto;
		width: 25% !important;
	}

	.navbar-cart__wrapper {
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 7px;
		width: 100%;
	}

	header.c-header__main nav.navbar {
		padding: 0.25rem 1rem .75rem !important;
	}

}

/* End Header */

/* Footer */

.left-footer-links,
.right-footer-links {
	display: flex;
	flex-direction: column;
}

.top-footer-links {
	display: flex;
	width: 50%;
	justify-content: space-evenly;
}

.bottom-footer {
	width: 100%;
	padding: 20px 20px 5px 20px;
}

.bottom-footer-links {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.bottom-footer-links>a,
.left-footer-links>a,
.right-footer-links>a,
footer h3 {
	color: var(--dark);
}

.top-footer {
	display: flex;
	width: 100%;
	padding: 20px 0;
	border-top: 3px double var(--secondary);
    justify-content: center;
}

.bottom-footer {
	display: flex;
	justify-content: center;
	padding-top: 10px;
	padding-right: 45px;
	border-top: 1px dashed var(--grey);
}

footer {
	padding-top: 30px;
	background: var(--light);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

footer a {
	text-decoration: none;
}

.middle-footer-logo>img {
	width: 50%;
}

.middle-footer-logo {
	display: flex;
	justify-content: center;
}

#monkeyCopyRight>a {
	color: var(--primary);
}

.copy_text {
	color: var(--dark);
}

/* Desktop Footer */
@media only screen and (min-width:48.001rem) {}


/* Mobile Footer */

@media only screen and (max-width:48rem) {

	.top-footer,
	.top-footer-links,
	.bottom-footer,
	.bottom-footer-links {
		flex-direction: column;
		width: 100%;
		align-items: center;
		text-align: center;

	}

	.middle-footer-logo>img {
		width: 25%;
	}

	.bottom-footer {
		padding: 10px 0;
	}
}


/* End Footer */


/* Main Content */

.card-product__price .btn-quick-add img {
	filter: none;
	transition: filter 0.3s ease;
	background: transparent !important;
}

.card-product__price .btn-quick-add:hover img {
	filter: none;
}


.btn-outline-primary {
	background-color: transparent;
	color: var(--dark);
	border: 2px solid var(--secondary) !important;
	border-radius: 0 !important;
}


.c-checkout__details {
	border: 1px solid var(--dark);
	padding: 20px;
	background: var(--light);
	border-radius: 0.5rem;
}


#v-loyalty-rewards,
#v-saved-locations {
	margin-top: 3.375rem;
}


#v-loyalty-rewards>div:nth-child(1),
#v-saved-locations>div:nth-child(2) {
	display: none;
}

#v-pills-tab>.nav-item>.nav-link {
	border-bottom: 1px solid var(--dark);
}

.c-sidebar__account {
	margin: 3.375rem 3rem;
	border: 1px solid var(--dark);
	padding: 20px;
	background: var(--light);
	border-radius: 0.5rem;

}

#accountInformationForm {
	border: 1px solid var(--dark);
	padding: 20px;
	background: var(--light);
	border-radius: 0.5rem;
}

/* flat nav */
.c-product__tabs .nav-tabs .nav-item .nav-link.active::before {
    background-color: var(--primary);
    width: calc(100% + 0.5rem);
    left: -0.25rem;
}

.c-product__tabs .nav-tabs .nav-item .nav-link:hover, .c-product__tabs .nav-tabs .nav-item .nav-link.active {
    color: var(--primary) !important;
}

.c-product__tabs .nav-tabs .nav-item .nav-link.active::before {
    background-color: var(--secondary) !important;
}

.c-product__tabs .nav-tabs .nav-item .nav-link,
.c-product__tabs .nav-tabs .nav-item .nav-link.active {
	text-transform: capitalize !important;
	font-weight: 600 !important;
}

.nav-tabs__categories {
	padding: 10px;
	border: 1px solid var(--dark) !important;
	border-radius: 0.5rem;
}

.catering-menu__slider {
	border-radius: 0.75rem 0.75rem 0 0;
	overflow: hidden;
}

#btnCheckoutFixed {
	background: var(--light);
	padding: 1rem 3rem 1rem 2.1rem;
}

.c-product-item__details .c-product__block {
	padding: 24px;
	border: 1px solid black;
	background: white;
	border-radius: 0.5rem;
}

.accordion-item:last-of-type .accordion-button.collapsed {
	border-radius: 0;
}

.btn-primary {
	--bs-btn-color: var(--dark) !important;
	--bs-btn-bg: var(--secondary) !important;
	--bs-btn-border-color: var(--secondary) !important;
	--bs-btn-hover-color: var(--dark) !important;
	--bs-btn-hover-bg: transparent !important;
	--bs-btn-hover-border-color: var(--secondary) !important;
	--bs-btn-focus-shadow-rgb: 251, 190, 24;
	--bs-btn-active-color: var(--dark) !important;
	--bs-btn-active-bg: var(--secondary) !important;
	--bs-btn-active-border-color: var(--secondary) !important;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--dark) !important;
	--bs-btn-disabled-bg: #8e9094 !important;
	--bs-btn-disabled-border-color: var(--grey) !important;
	border-radius: 0 !important;
	border-width: 2px !important;
}

.btn.btn-primary:hover {
	background-color: transparent !important;
	border: 2px solid var(--secondary) !important;
	color: var(--dark) !important;
}

.c-card__product .card img,
.c-product-item__details .c-product__details .c-product__img {
	background-color: var(--light);
}

.c-group-filter .c-btn-filter:hover,
.c-group-filter .c-btn-filter:active,
.c-group-filter .c-btn-filter.show,
.c-group-filter .c-btn-filter:focus-visible,
.c-group-filter .icon__close:focus-visible {
	border: 1px solid var(--dark) !important;
}

#sidebarCart .btn-add-to-cart.c-collapse-arrow:hover,
#sidebarCart .btn-add-to-cart.c-collapse-arrow:active,
#sidebarCart .btn-add-to-cart.c-collapse-arrow {
	background-color: var(--secondary) !important;
	border: 1px solid var(--dark) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--secondary);
}

.c-collapse-arrow:hover {
	background-color: var(--secondary) !important;
}


.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active {
	color: var(--dark) !important;
	border: 2px solid var(--secondary) !important;
	background: var(--secondary) !important;
	border-radius: 0 !important;
}

.c-btn__signin>a,
.c-btn__signin>a:hover {
	background: var(--light) !important;
	color: var(--primary) !important;
}

.c-btn__signin:hover,
.c-btn__signup:hover,
#btnCheckout:hover {
	transform: scale(1.03);
}


#heading_preorder,
.c-content__heading {
	color: var(--primary);
}

.c-main__heading h2.c-content__heading {
	font-size: 3rem;
	line-height: 3.25rem;
}

/* Profile Menu Icon */
.c-profile__group .c-profile__dropdown span {
	color: var(--primary) !important;
}

.c-sidebar__cart.open,
.c-sidebar__cart.close {
	transition: all 0.3s ease-in-out;
}

.c-product__tabs .nav-tabs .nav-item .nav-link:hover {
	color: var(--primary) !important;

}

.c-product__tags .badge {
	background-color: var(--secondary) !important;
}

.c-product__sub-categries.row {
	padding: 10px;
}

.c-card__product .card:hover {
	border-color: var(--primary);
	transform: scale(1.02) !important;
	filter: drop-shadow(2px 2px 4px var(--primary));
}

.c-card__product .card {
	border: 2px solid var(--dark);
	transition: transform 0.3s ease;
}

.card-body h4.card-title {
	font-size: 1.25rem;
	color: var(--primary);
}

/* Category Section Titles (e.g. "Box Lunches", "Breakfast") */
.c-product__tabs .product-section h4.c-section__title {
	font-size: 2.5rem;
	text-align: center;
	text-transform: capitalize;
	color: var(--primary);
	margin: 1.5rem 0 0.75rem;
}

/* Group Headings (e.g. "Signature Sandwich Box Lunches") */
.item-header {
	text-transform: capitalize;
	font-family: var(--primary-font);
	font-size: 2.25rem;
	color: var(--primary);
}

/* Group Descriptions (e.g. "Individually packaged & sealed meals…") */
.group_description,
.c-section__group .c-section__description,
.c-section__group > p {
	color: var(--dark);
	background: linear-gradient(to right, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.93) 25%, transparent 100%);
	padding: 0.4rem 2rem 0.4rem 1rem;
	border: none !important;
	border-radius: 2rem !important;
}

.dropdown-menu,
.overflow-auto {
	scrollbar-color: var(--light) var(--primary);
	scrollbar-width: thin;
}


/* Carousel Nav Button Shadow Override */
.c-product__tabs .nav-tabs .slick-next:before,
.c-product__tabs .catering-menu__slider .slick-next:before {
	box-shadow: -5px 0 15px 0px rgb(255 255 255 / 90%);
}

.c-product__tabs .nav-tabs .slick-prev:before,
.c-product__tabs .catering-menu__slider .slick-prev:before {
	box-shadow: 5px 0 15px 0px rgb(255 255 255 / 90%);
}

/* Desktop Main Content */
@media only screen and (min-width:48.001rem) {
	.c-card__product .card {
		scale: 0.9;
	}

}

/* Mobile Main Content*/
@media only screen and (max-width:48rem) {}

/* End Main Content */

/* Things that should not be local, these really need to be main app style rules */

@media (max-width: 48em) {
	.c-sidebar__block {
		height: 0;
	}
}

.credit-card-multi-image {
	max-width: 250px;
}

/* Add background to edit button */
#activateEditButton {
	background-color: var(--light);
}

/* Menu Item Image Sizer */
.c-product-item__details .c-product__details .c-product__img.default_product_image {
	object-fit: cover;
}

/* Larger description block, 2 lines with no expand */
.c-product__description .productSummaryText {
    height: 3rem;
    overflow: hidden;
}

/* Hide Loyalty */
.c-dropdown-menu li:has(a[href="/online/loyaltyReward"]),
.c-dropdown-menu li:has(a[href="/online/dev204/loyaltyReward"]),
.c-sidebar__account li:has(a[href="/online/loyaltyReward"]),
.c-sidebar__account li:has(a[href="/online/dev204/loyaltyReward"]) {
	display: none;
}

/* Credit Card Selection */
[id^="profile_id_-"][id$="_label"]:has(input:checked)::before {
	content: "\2713\0020 ";
	color: var(--bs-highlight);
	margin-right: 0.5em;
}

#payment_method_2 #cc_profiles li.c-payment-method__item--profile-MOO:has(.c-form-choice:nth-of-type(1):last-of-type) {
	display: none;
}

/* END Credit Card Selection */

/* Add to cart sticky fix */
.c-main__content.mainContentActive.c-main__product {
	padding-bottom: 0px !important;
	margin-bottom: 0 !important;
}

.c-quantity-cart__fixed.fixed-bottom {
	position: sticky;
	bottom: 0;
	left: auto;
	right: auto;
	z-index: 1020;
}

.c-quantity-cart__fixed {
	width: calc(100% - 400px);
	margin-inline: auto;
	/* center the bar within its container */
	transform: translateX(0);
	display: none;
	opacity: 0;
	transition: opacity 1s, visibility 1s ease-in-out;
}

.c-quantity-cart__fixed.show {
	display: block;
	opacity: 1;
}

.c-quantity-cart__fixed {
	width: 100%;
}

/* END Add to cart sticky fix */

/* Hide dietary icons on production items */
.c-selection__items .c-items__group .c-dietary__tags {
	display: none !important;
}

/* END Hide dietary icons on production items */

/* Checkout Button Width */
.c-checkout__fixed {
    max-width: 399px !important;
}
/* END Checkout Button Width */

/* FIX MORE BUTTON ON SAFARI */
/* 1) Normalize that span so WebKit treats it like a block container */
.detailsBox.productSummaryText #productSubFeDetailText {
  display: block;           /* span wraps <p> ? make it block to avoid Safari quirks */
  position: relative;
  z-index: 0;
}

/* 2) Ensure the container leaves room for the absolutely-positioned link */
.detailsBox.productSummaryText {
  position: relative;       /* anchor's positioning context */
  padding-bottom: 1.75rem;  /* space for "More…"; tweak as needed */
  overflow: hidden;        /* avoid clipping in case a parent sets overflow */
}

/* 3) Surface and pin the link in Safari */
.detailsBox.productSummaryText .c-text__more.productSubFeDetail {
  position: absolute;       /* override utility classes if needed */
  right: 0;                 /* explicit instead of relying on .end-0 */
  bottom: 0;
  z-index: 10;              /* above the paragraph text */
  display: inline-block;
  background: #fff;         /* keep it readable if it overlaps text */
  padding-left: .5rem;
  -webkit-transform: translateZ(0); /* WebKit paint-layer nudge */
  will-change: transform;
}

/* Optional: tidy paragraph spacing so the link doesn't look crowded */
.detailsBox.productSummaryText #productSubFeDetailText > p:last-child {
  margin-bottom: .5rem;
}

.productSubFeDetailText p {
  margin-bottom: 0 !important;
}

/* 4) Last-resort iOS Safari fallback: let the link flow below the text */
@supports (-webkit-touch-callout: none) {
  .detailsBox.productSummaryText .c-text__more.productSubFeDetail {
    position: static;       /* shows reliably on iPhone */
    margin-top: .25rem;
  }
  .detailsBox.productSummaryText { padding-bottom: 0; }
}
/* END FIX MORE BUTTON ON SAFARI */

/* Skip to Menu and Submit Menu Buttons */
#skipToMenu,
#submitMenu {
	background: var(--secondary) !important;
	color: var(--dark) !important;
	border: 2px solid var(--secondary) !important;
	border-radius: 0 !important;
	padding: 14px 10px !important;
	font-size: 0.875rem !important;
	font-family: var(--primary-font) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	text-align: center !important;
	letter-spacing: 0.08em !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	width: 50%;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

#skipToMenu:hover,
#submitMenu:hover {
	background: transparent !important;
	color: var(--dark) !important;
	border-color: var(--secondary) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(251, 190, 24, 0.3);
	text-decoration: none !important;
}

.c-skip__menu #findStores:disabled,
.c-card__store .startOrderButton:disabled {
	background: #babbbb !important;
}

.moo-lead-time-msg {
    color: var(--dark) !important;
}

/* Delivery / Pick Up Toggle Switch */
.c-check__control {
	position: relative;
	background-color: #f5f5f5;
	margin: 0 !important;
	border: 1px solid var(--grey);
	border-radius: 0;
	padding: 3px !important;
	overflow: hidden;
	--bs-gutter-x: 0;
}

.c-check__control .c-input__check {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Sliding indicator — sits behind the buttons */
.c-check__control::before {
	content: '';
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc(50% - 3px);
	background: var(--primary);
	border-radius: 0;
	transition: transform 0.3s ease;
	z-index: 0;
	box-shadow: 0 2px 6px rgba(138, 27, 46, 0.35);
}

/* Slide indicator to the right when Pick Up is active */
.c-check__control:has(.c-preorder__button-item--pickUp.is-active)::before {
	transform: translateX(100%);
}

/* Keep button wrappers above the indicator */
.c-input__check {
	position: relative;
	z-index: 1;
}

/* Buttons are transparent so the sliding indicator shows through */
.c-check__control .btn-delivery {
	position: relative;
	z-index: 1;
	background: transparent !important;
	border: none !important;
	color: var(--dark) !important;
	transition: color 0.3s ease !important;
	border-radius: 0 !important;
}

/* White text on whichever side the indicator is under */
.c-check__control .is-active .btn-delivery {
	color: var(--light) !important;
}

/* Marketing image (replaces map) */
.brand-imagery_container img {
    max-width: 100% !important;
    margin-top: 2rem !important;
}