/* ==========================================================================
   YUMMNO homepage — implements "YUMMNO Home Page" mockup (Design System 4.0)
   Structure comes from Elementor; all visual styling lives here.
   ========================================================================== */

/* ---- section shells ---- */
.yum-sec {
	max-width: 1440px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 48px;
	font-family: var(--font-body);
}

.yum-sec .elementor-widget:not(:last-child) { margin-bottom: 0; }

/* shared section header row */
.yum-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.yum-kicker .elementor-heading-title { font: 700 12.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #9AA39B; margin-bottom: 10px; }
.yum-kicker--red .elementor-heading-title { color: var(--color-accent-red); }
.yum-h2 .elementor-heading-title { font-family: var(--font-display); font-size: 38px; line-height: 1; color: var(--color-primary); text-transform: uppercase; font-weight: 400; }
.yum-h2--34 .elementor-heading-title { font-size: 34px; }
.yum-link, .yum-link a { font: 700 14px/1.3 var(--font-body); color: var(--color-primary) !important; text-decoration: underline !important; }
.yum-link p { margin: 0; }

/* =========================== 02 HERO =========================== */
.yum-hero { padding-top: 24px; }
.yum-hero > .e-con-inner, .yum-hero.e-con { gap: 18px; }
.yum-hero-grid { display: grid !important; grid-template-columns: 1.62fr 1fr; gap: 18px; align-items: stretch; }

.yum-hero-main {
	background: var(--color-primary-light);
	border-radius: 28px !important; /* Elementor .e-con element rules outrank single classes */
	padding: 44px !important;
	position: relative;
	overflow: hidden;
	min-height: 470px;
	display: flex; flex-direction: column; justify-content: space-between;
}
.yum-hero-main::before {
	content: ""; position: absolute; right: -60px; bottom: -70px;
	width: 430px; height: 430px; border-radius: 50%;
	background: rgba(255, 255, 255, .34);
}
.yum-badge .elementor-heading-title {
	display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
	border-radius: var(--radius-pill); background: var(--color-primary);
	color: var(--color-primary-light);
	font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em;
}
.yum-hero-title { position: relative; z-index: 2; }
.yum-hero-title .elementor-heading-title {
	font-family: var(--font-display); font-weight: 400;
	font-size: 76px; line-height: .94; color: var(--color-primary);
	text-transform: uppercase; max-width: 56%; margin-top: 20px;
}
.yum-hero-sub { position: relative; z-index: 2; }
.yum-hero-sub p {
	font: 400 18px/1.55 var(--font-body); color: #1A4A3E;
	max-width: calc(100% - 380px); margin: 16px 0 0;
}
/* hero image — anchored bottom-right, never overlapping the text column */
.yum-hero-img { position: absolute !important; right: 34px; bottom: 34px; width: 330px !important; z-index: 1; }
.yum-hero-img img { width: 330px; height: 330px; object-fit: cover; border-radius: 24px; display: block; }
.yum-hero-btns { position: relative; z-index: 2; display: flex !important; flex-direction: row !important; gap: 14px; align-items: center; margin-top: 24px; max-width: calc(100% - 380px); flex-wrap: wrap; }
.yum-btn-solid .elementor-button {
	height: 56px; padding: 0 34px; border: none; border-radius: var(--radius-pill);
	background: var(--color-primary); color: var(--color-primary-light);
	font: 700 16px/56px var(--font-body); text-transform: uppercase; letter-spacing: .06em;
	display: inline-flex; align-items: center;
}
.yum-btn-solid .elementor-button:hover { background: var(--color-primary-deep); color: var(--color-primary-light); }
.yum-btn-outline .elementor-button {
	height: 56px; padding: 0 30px; border: 2px solid var(--color-primary); border-radius: var(--radius-pill);
	background: transparent; color: var(--color-primary);
	font: 700 16px/52px var(--font-body);
	display: inline-flex; align-items: center;
}
.yum-btn-outline .elementor-button:hover { background: var(--color-primary); color: var(--color-primary-light); }

.yum-hero-side { display: flex !important; flex-direction: column !important; gap: 18px; }
.yum-promo {
	border-radius: 28px !important; padding: 30px !important; position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	flex: 1 1 0; min-height: 0; transition: transform .2s;
}
.yum-promo:hover { transform: translateY(-3px); }
.yum-promo--pink { background: var(--color-accent-pink); }
.yum-promo--banana { background: var(--color-accent-banana); }
.yum-promo-kicker .elementor-heading-title { font: 700 12px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; }
.yum-promo--pink .yum-promo-kicker .elementor-heading-title { color: #7A1D57; }
.yum-promo--banana .yum-promo-kicker .elementor-heading-title { color: #8A5A00; }
.yum-promo-title .elementor-heading-title { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: .98; text-transform: uppercase; max-width: 210px; }
.yum-promo--pink .yum-promo-title .elementor-heading-title { color: #4A0F33; }
.yum-promo--banana .yum-promo-title .elementor-heading-title { color: #5A3A00; }
.yum-promo-link p { margin: 12px 0 0; }
.yum-promo-link a { font: 700 14px/1 var(--font-body); text-decoration: underline !important; }
.yum-promo--pink .yum-promo-link a { color: #7A1D57 !important; }
.yum-promo--banana .yum-promo-link a { color: #8A5A00 !important; }
.yum-promo-img { position: absolute !important; right: 22px; top: 22px; width: 132px !important; }
.yum-promo-img img { width: 132px; height: 132px; object-fit: cover; border-radius: 20px; display: block; }

/* ====================== 03 CATEGORY RAIL ====================== */
.yum-cats { padding-top: 40px; }
.yum-cats .products, .yum-cats ul.products { display: grid !important; grid-template-columns: repeat(8, 1fr); gap: 14px; margin: 0 !important; }
.yum-cats .product-category, .yum-cats .category-grid-item, .yum-cats .wd-cat {
	width: 100% !important; margin: 0 !important; padding: 0 !important;
	text-align: center; transition: transform .2s; background: transparent !important; border: 0 !important;
}
.yum-cats .product-category:hover, .yum-cats .category-grid-item:hover { transform: translateY(-3px); }
.yum-cats .product-category img, .yum-cats .category-grid-item img {
	width: 100% !important; aspect-ratio: 1/1; height: auto; object-fit: cover;
	border-radius: 50% !important; background: #EFF6EA; display: block;
}
.yum-cats .product-category h2, .yum-cats .woocommerce-loop-category__title,
.yum-cats .wd-entities-title, .yum-cats .category-title {
	font: 700 14px/1.25 var(--font-body) !important; color: var(--color-text) !important;
	margin: 12px 0 0 !important; padding: 0 !important; text-transform: none !important;
}
.yum-cats .product-category h2 mark, .yum-cats .woocommerce-loop-category__title mark { display: none; }
.yum-cats .hover-mask, .yum-cats .wd-cat-content > *:not(img):not(.wd-entities-title) { background: transparent !important; }

/* ======================== 04 USP STRIP ======================== */
.yum-usp { padding-top: 36px; }
.yum-usp-band {
	background: var(--color-primary); border-radius: var(--radius-l) !important;
	padding: 26px 36px !important;
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.yum-usp-band .elementor-icon-box-wrapper { display: flex; gap: 14px; align-items: center; text-align: left; }
.yum-usp-band .elementor-icon-box-icon { margin: 0 !important; }
.yum-usp-band .elementor-icon {
	width: 44px; height: 44px; border-radius: var(--radius-pill);
	background: rgba(162, 246, 116, .16) !important;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px !important; color: var(--color-primary-light) !important;
}
.yum-usp-band .elementor-icon svg { fill: var(--color-primary-light); width: 20px; height: 20px; }
.yum-usp-band .elementor-icon-box-title { font: 700 15px/1.2 var(--font-body) !important; color: #fff !important; margin: 0 0 4px !important; }
.yum-usp-band .elementor-icon-box-title span { font: inherit !important; color: inherit !important; }
.yum-usp-band .elementor-icon-box-description { font: 400 13.5px/1.3 var(--font-body) !important; color: #8FBFAF !important; margin: 0 !important; }

/* ================= 05/06 PRODUCT GRID RESKIN ================== */
.yum-deals { padding-top: 52px; }
.yum-best { padding-top: 56px; }

.yum-prod-grid .products { display: grid !important; gap: 16px; margin: 0 !important; }
.yum-prod-grid--4 .products { grid-template-columns: repeat(4, 1fr) !important; }
.yum-prod-grid--5 .products { grid-template-columns: repeat(5, 1fr) !important; gap: 14px; }

.yum-prod-grid .product-grid-item, .yum-prod-grid li.product {
	width: 100% !important; margin: 0 !important;
	background: #fff; border: 1px solid var(--color-border); border-radius: 22px;
	padding: 16px !important; box-sizing: border-box;
	display: flex; flex-direction: column;
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.yum-best .product-grid-item, .yum-best li.product { background: #FBFAF6; border-color: #F0EFE8; border-radius: 20px; padding: 14px !important; }
.yum-prod-grid .product-grid-item:hover, .yum-prod-grid li.product:hover {
	box-shadow: 0 14px 34px rgba(6, 79, 70, .13); transform: translateY(-3px); border-color: #CFE0CB;
}
.yum-prod-grid .product-element-top, .yum-prod-grid .wd-product-image {
	border-radius: 16px; overflow: hidden; background: var(--color-bg-soft); margin-bottom: 12px;
}
.yum-prod-grid .product-grid-item img { border-radius: 16px; }
.yum-prod-grid .wd-entities-title, .yum-prod-grid .woocommerce-loop-product__title {
	font: 700 17px/1.22 var(--font-body) !important; color: var(--color-text) !important;
	min-height: 42px; margin: 0 0 6px !important; text-align: left !important;
}
.yum-best .wd-entities-title, .yum-best .woocommerce-loop-product__title { font-size: 15.5px !important; min-height: 38px; }
.yum-prod-grid .wd-entities-title a, .yum-prod-grid .woocommerce-loop-product__title a { color: inherit !important; font: inherit !important; }
.yum-prod-grid .price {
	font: 700 22px/1 var(--font-body) !important; color: var(--color-primary) !important;
	display: block; text-align: left; margin-top: auto !important;
}
.yum-best .price { font-size: 18px !important; }
.yum-prod-grid .price ins { color: var(--color-accent-red) !important; text-decoration: none !important; font: inherit !important; }
.yum-prod-grid .price del { font: 400 13px/1 var(--font-body) !important; color: #9AA39B !important; }
.yum-deals .price ins { color: var(--color-accent-red) !important; }
.yum-prod-grid .onsale, .yum-prod-grid .product-label {
	position: absolute; top: 10px; left: 10px; z-index: 3;
	height: 26px; min-height: 26px; padding: 0 12px; border-radius: var(--radius-pill) !important;
	background: var(--color-accent-red) !important; color: #fff !important;
	font: 700 11.5px/26px var(--font-body) !important; text-transform: uppercase; letter-spacing: .06em;
}
.yum-prod-grid .add_to_cart_button, .yum-prod-grid .wd-add-btn a, .yum-prod-grid a.button {
	height: 44px !important; padding: 0 20px !important; border: none !important;
	border-radius: var(--radius-pill) !important;
	background: var(--color-primary) !important; color: var(--color-primary-light) !important;
	font: 700 14px/44px var(--font-body) !important; text-transform: none !important;
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 12px;
}
.yum-prod-grid .add_to_cart_button:hover, .yum-prod-grid a.button:hover { background: var(--color-primary-deep) !important; }
/* hide woodmart extras that fight the card layout */
.yum-prod-grid .wd-product-btns, .yum-prod-grid .quick-view-button, .yum-prod-grid .wd-compare-btn, .yum-prod-grid .wd-wishlist-btn { display: none !important; }
.yum-prod-grid .star-rating { color: var(--color-accent-orange); }

/* deals countdown */
.yum-count { display: flex; align-items: center; gap: 14px; }
.yum-count .elementor-countdown-wrapper { display: flex; gap: 6px; max-width: none !important; }
.yum-count .elementor-countdown-item {
	min-width: 52px; height: 46px; border-radius: 12px; background: var(--color-primary) !important;
	color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 0 6px !important;
}
.yum-count .elementor-countdown-item:last-child { background: var(--color-accent-red) !important; }
.yum-count .elementor-countdown-digits { font: 700 17px/1 var(--font-body) !important; color: #fff; }
.yum-count .elementor-countdown-label { font: 400 9px/1 var(--font-body) !important; color: #8FBFAF; margin-top: 3px; letter-spacing: .08em; text-transform: uppercase; }
.yum-count .elementor-countdown-item:last-child .elementor-countdown-label { color: rgba(255, 255, 255, .7); }

/* bestseller pills */
.yum-pills { text-align: right; }
.yum-pills p { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.yum-pills a {
	height: 40px; padding: 0 20px; border-radius: var(--radius-pill);
	font: 700 14px/40px var(--font-body); color: var(--color-primary) !important;
	background: var(--color-bg-soft); text-decoration: none !important; display: inline-block;
}
.yum-pills a:hover, .yum-pills a.is-active { background: var(--color-primary); color: var(--color-primary-light) !important; }

/* ====================== 07 CAMPAIGN BAND ====================== */
.yum-camp { padding-top: 56px; }
.yum-camp-band {
	background: var(--color-primary-light); border-radius: 26px !important; overflow: hidden;
	display: grid !important; grid-template-columns: 1.1fr 1fr; gap: 0;
}
.yum-camp-left { padding: 52px 56px !important; display: flex; flex-direction: column; justify-content: center; }
.yum-camp-kicker .elementor-heading-title { font: 700 12.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #2E6B22; margin-bottom: 12px; }
.yum-camp-title .elementor-heading-title { font-family: var(--font-display); font-weight: 400; font-size: 46px; line-height: .96; color: var(--color-primary); text-transform: uppercase; }
.yum-camp-body p { font: 400 16.5px/1.55 var(--font-body); color: #1A4A3E; max-width: 430px; margin: 14px 0 0; }
.yum-camp-btns { display: flex !important; flex-direction: row !important; gap: 12px; margin-top: 26px; }
.yum-camp-img { min-height: 340px; }
.yum-camp-img img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }

/* ======================== 08 RECIPES ========================== */
.yum-recipes { padding-top: 56px; }
.yum-recipe-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.yum-recipe-card {
	border-radius: 22px !important; overflow: hidden; background: #FBFAF6; border: 1px solid #F0EFE8;
	transition: box-shadow .2s, transform .2s; padding: 0 !important;
}
.yum-recipe-card:hover { box-shadow: 0 16px 38px rgba(6, 79, 70, .14); transform: translateY(-3px); }
.yum-recipe-card .yum-recipe-img img { width: 100%; height: 210px; object-fit: cover; display: block; border-radius: 0; }
.yum-recipe-pad { padding: 20px 22px 24px !important; }
.yum-recipe-tags p { margin: 0 0 12px; display: flex; gap: 8px; }
.yum-recipe-tags span {
	height: 28px; padding: 0 12px; border-radius: var(--radius-pill);
	background: #EFF6EA; color: var(--color-primary);
	font: 700 12px/28px var(--font-body); display: inline-block;
}
.yum-recipe-title .elementor-heading-title { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.05; color: var(--color-primary); text-transform: uppercase; }
.yum-recipe-desc p { font: 400 14.5px/1.5 var(--font-body); color: var(--color-text-soft); margin: 10px 0 0; }

/* ======================== 09 REVIEWS ========================== */
.yum-reviews { padding-top: 56px; }
.yum-reviews-band {
	background: #EFF6EA; border-radius: 26px !important; padding: 40px 44px !important;
	display: grid !important; grid-template-columns: 280px 1fr; gap: 44px; align-items: center;
}
.yum-rev-score .elementor-heading-title { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1; color: var(--color-primary); }
.yum-stars p { color: var(--color-accent-orange); font-size: 19px; letter-spacing: 2px; margin: 8px 0; }
.yum-rev-sub p { font: 400 15px/1.5 var(--font-body); color: var(--color-text-soft); margin: 0; }
.yum-rev-cards { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yum-rev-card { background: #fff; border-radius: 18px !important; padding: 22px 24px !important; display: flex; flex-direction: column; gap: 0; }
.yum-rev-card .yum-stars p { font-size: 14px; letter-spacing: 1.5px; margin: 0 0 12px; }
.yum-rev-text p { font: 400 15px/1.55 var(--font-body); color: var(--color-text); margin: 0 0 12px; }
.yum-rev-who p { margin: 0; font: 700 14px/1.4 var(--font-body); color: var(--color-text); }
.yum-rev-who span { font: 400 12.5px/1.4 var(--font-body); color: #9AA39B; display: block; }

/* ======================= 10 INSTAGRAM ========================= */
.yum-ugc { padding-top: 56px; }
.yum-ugc-grid { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.yum-ugc-grid .elementor-widget-image { transition: transform .2s; }
.yum-ugc-grid .elementor-widget-image:hover { transform: scale(1.03); }
.yum-ugc-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 16px; display: block; }

/* ======================= 11 NEWSLETTER ======================== */
.yum-news { padding-top: 56px; padding-bottom: 56px; }
.yum-news-band {
	background: var(--color-accent-banana); border-radius: 24px !important;
	padding: 40px 48px !important;
	display: flex !important; flex-direction: row !important; align-items: center; gap: 40px;
}
.yum-news-left { flex: 1; }
.yum-news-title .elementor-heading-title { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.05; color: #5A3A00; text-transform: uppercase; }
.yum-news-sub p { font: 400 16px/1.5 var(--font-body); color: #7A5100; margin: 8px 0 0; }
.yum-news-form { flex: none; min-width: 460px; }
.yum-news-form form { display: flex; gap: 10px; align-items: center; margin: 0; }
.yum-news-form .mc4wp-form-fields { display: flex; gap: 10px; align-items: center; }
.yum-news-form input[type="email"], .yum-news-form input[type="text"] {
	height: 54px; width: 300px; border: none !important; border-radius: var(--radius-pill) !important;
	padding: 0 22px !important; font: 400 15px/1 var(--font-body) !important;
	color: var(--color-text) !important; background: #fff !important; box-sizing: border-box;
}
.yum-news-form input[type="submit"], .yum-news-form button[type="submit"] {
	height: 54px; padding: 0 32px; border: none !important; border-radius: var(--radius-pill) !important;
	background: var(--color-primary) !important; color: var(--color-primary-light) !important;
	font: 700 15px/1 var(--font-body) !important; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
}
.yum-news-form input[type="submit"]:hover { background: var(--color-primary-deep) !important; }

/* ======================= responsive ======================== */
@media (max-width: 1200px) {
	.yum-hero-title .elementor-heading-title { font-size: 56px; max-width: 100%; }
	.yum-hero-sub p, .yum-hero-btns { max-width: 100%; }
	.yum-hero-img { position: relative !important; right: auto; bottom: auto; width: 100% !important; margin-top: 18px; }
	.yum-hero-img img { width: 100%; height: auto; max-height: 340px; border-radius: 24px; }
	.yum-cats .products { grid-template-columns: repeat(4, 1fr) !important; }
	.yum-usp-band { grid-template-columns: repeat(2, 1fr); }
	.yum-prod-grid--4 .products { grid-template-columns: repeat(2, 1fr) !important; }
	.yum-prod-grid--5 .products { grid-template-columns: repeat(3, 1fr) !important; }
	.yum-ugc-grid { grid-template-columns: repeat(3, 1fr); }
	.yum-rev-cards { grid-template-columns: 1fr 1fr; }
	.yum-reviews-band { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
	.yum-sec { padding-left: 16px; padding-right: 16px; }
	.yum-hero-grid { grid-template-columns: 1fr; }
	.yum-hero-main { min-height: 0; padding: 28px !important; }
	.yum-hero-title .elementor-heading-title, .yum-hero-sub p { max-width: 100%; }
	.yum-hero-img { position: relative !important; right: auto; bottom: auto; width: 100% !important; margin-top: 18px; }
	.yum-hero-img img { width: 100%; height: auto; aspect-ratio: 1/1; }
	.yum-hero-btns { max-width: 100%; }
	.yum-cats .products { grid-template-columns: repeat(2, 1fr) !important; }
	.yum-usp-band { grid-template-columns: 1fr; padding: 22px !important; }
	.yum-prod-grid--4 .products, .yum-prod-grid--5 .products { grid-template-columns: repeat(2, 1fr) !important; }
	.yum-camp-band { grid-template-columns: 1fr; }
	.yum-camp-left { padding: 28px !important; }
	.yum-recipe-grid { grid-template-columns: 1fr; }
	.yum-rev-cards { grid-template-columns: 1fr; }
	.yum-ugc-grid { grid-template-columns: repeat(2, 1fr); }
	.yum-news-band { flex-direction: column !important; align-items: flex-start; }
	.yum-news-form { min-width: 0; width: 100%; }
	.yum-news-form .mc4wp-form-fields { flex-direction: column; align-items: stretch; }
	.yum-news-form input[type="email"] { width: 100%; }
	.yum-head-row { flex-wrap: wrap; }
}