/* ---------------------------------------------------------------
   Lush Food & Drink - homepage
   --------------------------------------------------------------- */

:root{
	--green-900:#1e3b29;
	--green-700:#2c5240;
	--orange:#e0492c;
	--orange-ink:#c0432a;
	--red-deep:#a63428;
	--amber:#d8891c;
	--brown:#8a5a2b;
	--ink:#23231f;
	--muted:#77725f;
	--cream:#f6f0e4;
	--pale:#fbf7ef;
	--beige:#f2eadb;
	--line:#e6dfce;
	--serif:"Playfair Display",Georgia,"Times New Roman",serif;
	--serif-2:"Lora",Georgia,serif;
	--sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
	--script:"Caveat","Segoe Script",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
	margin:0;
	font-family:var(--sans);
	font-size:15px;
	line-height:1.5;
	color:var(--ink);
	background:var(--pale);
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:800;color:var(--green-900)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:1368px;margin:0 auto;padding:0 24px}
.ic{width:16px;height:16px;flex:none}

/* ---- buttons ---------------------------------------------------- */
.btn{
	display:inline-flex;align-items:center;gap:8px;
	white-space:nowrap;
	font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.2;
	padding:11px 18px;border-radius:9px;color:#fff;
	transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn .ic{width:15px;height:15px}
.btn--orange{background:var(--orange);font-size:15px;padding:13px 22px}
.btn--green{background:var(--green-700)}
.btn--red{background:var(--red-deep)}
.btn--amber{background:var(--amber)}
.btn--cta{flex:none;background:var(--orange);font-size:13px;padding:9px 16px;gap:10px}
.btn--cta .ic{width:17px;height:17px}

.link-arrow{
	display:inline-flex;align-items:center;gap:7px;
	font-size:13px;font-weight:600;color:var(--orange-ink);
}
.link-arrow .ic{width:14px;height:14px}

/* ---- media slots ------------------------------------------------ */
.l-media{position:relative;overflow:hidden;background:#efe7d8;display:block}
.l-media img{width:100%;height:100%;object-fit:cover}
.l-media--ph{
	display:grid;place-items:center;
	background:linear-gradient(135deg,#f1e8d7 0%,#e4d7bf 100%);
	color:#bda98a;
}
.l-media--ph .ic{width:20px;height:20px;stroke-width:1.4}
.l-media--fill{position:absolute;inset:0;height:100%}

/* ---- header ----------------------------------------------------- */
.site-head{background:#fff;border-bottom:1px solid var(--line)}
.head-top{display:flex;align-items:center;gap:36px;height:66px}

.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand-mark{width:38px;height:35px;flex:none}
.brand-words{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--serif);font-weight:900;font-size:27px;color:var(--green-900);letter-spacing:-.01em}
.brand-kicker{font-family:var(--serif-2);font-weight:600;font-size:11.5px;color:var(--green-900);margin-top:3px}

.head-search{
	position:relative;flex:1;min-width:0;display:flex;align-items:center;
	height:42px;padding:0 48px 0 16px;
	background:#f7f4ec;border:1px solid var(--line);border-radius:10px;
}
.head-search input{
	width:100%;border:0;background:transparent;outline:none;
	font-family:var(--sans);font-size:12.5px;color:var(--ink);
}
.head-search input::placeholder{color:#9a947f}
.head-search button{
	position:absolute;right:5px;top:5px;
	width:32px;height:32px;border:0;border-radius:999px;cursor:pointer;
	background:var(--orange);color:#fff;display:grid;place-items:center;
}
.head-search button .ic{width:15px;height:15px;stroke-width:2.2}

.head-navbar{border-top:1px solid #f0ebdd}
.head-nav{display:flex;align-items:center;gap:26px;height:40px}
.head-nav a{font-size:13px;font-weight:600;color:#2b2b26;white-space:nowrap}
.head-nav a:hover{color:var(--orange-ink)}

/* ---- hero ------------------------------------------------------- */
.hero{position:relative;background:var(--cream);overflow:hidden}
.hero-shot{position:absolute;top:0;right:0;bottom:0;width:57%}
.hero-shot .l-media{height:100%}
.hero-in{position:relative;z-index:2}
.hero-copy{width:52%;min-width:430px;padding:24px 0 22px}

.eyebrow{
	font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	color:#4e4c41;
}
.eyebrow b{color:var(--orange);margin:0 4px}

.hero-title{font-size:44px;line-height:1.1;letter-spacing:-.015em;margin:10px 0 0}
.hero-title em{font-style:normal;color:var(--orange)}
.hero-sub{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:#4d4b40}
.hero .btn--orange{margin-top:18px}

.trust{display:flex;align-items:center;gap:20px;margin-top:22px}
.trust li{display:flex;align-items:center;gap:9px}
.trust li + li{border-left:1px solid #ddd4c0;padding-left:20px}
.trust-ic .ic{width:19px;height:19px}
.trust-ic--green{color:#4c8c3f}
.trust-ic--ink{color:#33322b}
.trust-ic--red{color:var(--orange)}
.trust span span,.trust li > span:last-child{display:flex;flex-direction:column}
.trust b{
	font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:#23231f;line-height:1.4;
}
.trust li > span:last-child{font-size:11.5px;color:#6f6a5b;line-height:1.35}

/* ---- bands & rows ----------------------------------------------- */
.band{padding:16px 0}
.band--pale{background:var(--pale)}
.band--beige{background:var(--beige)}

.row{display:flex;align-items:center;gap:22px}
.row-head{width:214px;flex:none}
.row-head h2{font-size:22.5px;line-height:1.16}
.row-head p{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.row-head .btn,.row-head .link-arrow{margin-top:14px}

.grid{display:grid;flex:1;min-width:0}
.grid--6{grid-template-columns:repeat(6,1fr);gap:14px}
.grid--4{grid-template-columns:repeat(4,1fr);gap:16px}
.grid--3{grid-template-columns:repeat(3,1fr);gap:12px}

/* ---- cards ------------------------------------------------------ */
.card{
	display:block;background:#fff;border:1px solid #ece4d4;border-radius:10px;
	overflow:hidden;box-shadow:0 1px 2px rgba(40,32,12,.05);
	transition:box-shadow .15s ease,transform .15s ease;
}
.card:hover{box-shadow:0 6px 16px rgba(40,32,12,.1);transform:translateY(-2px)}
.card-body{display:block;position:relative;padding:11px 13px 13px}
.card-title{display:block;font-family:var(--serif-2);font-weight:700;color:var(--ink);line-height:1.25}
.card-tag{display:block;margin-top:3px;color:#807a68;line-height:1.35}

.card--cat .l-media{height:95px}
.card--cat .card-body{padding:9px 12px 11px}
.card--cat .card-title{font-size:13.5px}
.card--cat .card-tag{font-size:10.5px}
.card--cat .card-body{padding-right:26px}
.card-chev{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--orange)}
.card-chev .ic{width:14px;height:14px;stroke-width:2.2}

.card--guide .card-shot{display:block;position:relative}
.card--guide .l-media{height:100px}
.card--guide .card-title{font-size:15.5px}
.card--guide .card-tag{font-size:11.5px}
.card-cta{
	display:inline-flex;align-items:center;gap:6px;margin-top:7px;
	font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--orange-ink);
}
.card-cta .ic{width:12px;height:12px}

.badge{
	position:absolute;top:9px;left:9px;
	padding:4px 10px;border-radius:999px;
	font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;
}
.badge--red{background:#d8362a}
.badge--orange{background:#e07c2a}
.badge--brown{background:var(--brown)}
.badge--amber{background:var(--amber)}
.badge--green{background:var(--green-700)}

.card--recipe .l-media{height:70px}
.card--recipe .card-body{padding:9px 11px 11px}
.card--recipe .card-title{font-size:12px}
.meta{display:flex;align-items:center;gap:11px;margin-top:5px;font-size:10px;color:#7d7765}
.meta span{display:inline-flex;align-items:center;gap:4px}
.meta .ic{width:11px;height:11px}

.card--how .l-media{height:48px}
.card--how .card-body{padding:9px 11px 11px}
.card--how .card-title{font-size:12.5px}

.card--ing .l-media{height:40px}
.card--ing .card-body{padding:8px 10px 10px}
.card--ing .card-title{font-size:11.5px}
.card--ing .card-tag{font-size:9.5px;margin-top:2px}

/* ---- split row (how-to + ingredients) --------------------------- */
.row--split{gap:20px}
.row--split .grid--3{flex:none;width:462px}
.row-divider{width:1px;align-self:stretch;background:#ded5c1;margin:0 4px}
.row-head--inline{width:218px}
.row-head--inline h2{font-size:20px}
.row--split .grid--tight{flex:none;width:330px;gap:10px}

/* ---- footer ----------------------------------------------------- */
.site-foot{position:relative;background:var(--green-900);color:#fff;overflow:hidden}
.foot-leaf{position:absolute;right:-18px;top:6px;color:#fff;opacity:.09}
.foot-leaf .ic{width:150px;height:150px}
.foot-in{position:relative;z-index:2;display:flex;align-items:center;gap:22px;padding:20px 24px 16px}
.brand--light .brand-name,.brand--light .brand-kicker{color:#fff}
.foot-rule{width:1px;height:38px;background:rgba(255,255,255,.22);flex:none}
.foot-tagline{flex:none;font-size:13.5px;font-weight:600;line-height:1.35}

.foot-nav{display:flex;align-items:center;gap:26px;margin-left:24px}
.foot-nav a{font-size:12.5px;color:rgba(255,255,255,.88)}
.foot-nav a:hover{color:#fff;text-decoration:underline}

.foot-social{display:flex;align-items:center;gap:14px;margin-left:auto;color:rgba(255,255,255,.9)}
.foot-social .ic{width:17px;height:17px}

.foot-script{
	flex:none;display:inline-flex;align-items:center;gap:7px;
	font-family:var(--script);font-size:21px;color:#fff;
}
.ic--heart{color:#f0a24e;fill:#f0a24e;width:15px;height:15px}
.trust-ic--red .ic{fill:currentColor}

.foot-base{
	position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
	border-top:1px solid rgba(255,255,255,.12);padding-top:11px;padding-bottom:14px;
	font-size:11px;color:rgba(255,255,255,.62);
}
.foot-base__note{font-style:italic}

/* ---- inner pages ------------------------------------------------ */
.prose{max-width:760px;padding-top:30px;padding-bottom:50px}
.prose h1{font-size:34px;margin-bottom:14px}
.prose p{margin:0 0 16px}

/* ---- responsive ------------------------------------------------- */
@media (max-width:1240px){
	.head-top{gap:20px}
	.head-nav{gap:18px}
	.head-nav a{font-size:12.5px}
}
@media (max-width:1100px){
	.head-navbar{overflow-x:auto}
	.head-nav{gap:16px}
	.row{flex-direction:column;align-items:stretch}
	.row-head{width:auto}
	.row--split .grid--3,.grid--tight{width:auto;flex:1}
	.row-divider{display:none}
	.hero-copy{width:100%;min-width:0}
	.hero-shot{position:relative;width:100%;height:220px}
	.hero-in{padding-bottom:0}
	.grid--6{grid-template-columns:repeat(3,1fr)}
	.grid--4{grid-template-columns:repeat(2,1fr)}
	.foot-in{flex-wrap:wrap}
	.foot-nav{margin-left:0}
}
@media (max-width:720px){
	.hero-title{font-size:33px}
	.trust{flex-direction:column;align-items:flex-start;gap:12px}
	.trust li + li{border-left:0;padding-left:0}
	.grid--6,.grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
	.foot-base{flex-direction:column;gap:6px;align-items:flex-start}
}

/* Hero art bleeds behind the copy, so fade its left edge into the page ground. */
.hero-shot::after,.g-hero__shot::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(90deg,var(--cream) 0%,rgba(246,240,228,.92) 12%,rgba(246,240,228,0) 44%);
}
@media (max-width:1100px){
	.hero-shot::after,.g-hero__shot::after{
		background:linear-gradient(0deg,var(--cream) 0%,rgba(246,240,228,0) 42%);
	}
}