/* RecipeUI v1.6.0 — Premium redesign */

/* ─── Meta panel ─────────────────────────────────────────────── */
.recipeui-meta{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:stretch;
	margin:16px 0 20px;
}
.recipeui-meta__item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:12px 16px;
	border:1px solid rgba(0,0,0,.07);
	border-radius:14px;
	background:#fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
	min-width:160px;
	flex:1 1 160px;
	transition: box-shadow .18s ease, border-color .18s ease;
}
.recipeui-meta__item:hover{
	box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.07);
	border-color: rgba(0,0,0,.11);
}
.recipeui-meta__icon{
	font-size:20px;
	line-height:1;
	flex:0 0 auto;
}
.recipeui-meta__text{
	display:flex;
	flex-direction:column;
	gap:1px;
	line-height:1.2;
}
.recipeui-meta__label{
	font-size:11px;
	font-weight:600;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:#9ca3af;
}
.recipeui-meta__value{
	font-size:15px;
	font-weight:700;
	color:#111827;
}

/* ─── Ingredients spoiler ─────────────────────────────────────── */
.recipeui-ingredients{
	margin:16px 0 22px;
	border:0;
	background:transparent;
}
.recipeui-ingredients > summary{
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	width:100%;
	padding:13px 20px;
	border-radius:14px;
	background: linear-gradient(135deg, #e8630a 0%, #f08a24 100%);
	color:#fff;
	font-size:15px;
	font-weight:700;
	letter-spacing:.01em;
	user-select:none;
	box-shadow: 0 3px 10px rgba(240,138,36,.30), 0 1px 3px rgba(0,0,0,.08);
	transition: box-shadow .16s ease, filter .16s ease;
}
.recipeui-ingredients > summary:hover{
	filter: brightness(1.04);
	box-shadow: 0 6px 20px rgba(240,138,36,.35), 0 2px 6px rgba(0,0,0,.08);
}
.recipeui-ingredients > summary::-webkit-details-marker{ display:none; }
.recipeui-ingredients > summary::after{
	content:"";
	width:18px;
	height:18px;
	flex:0 0 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center/18px 18px;
	opacity:.9;
	transition: transform .22s ease;
}
.recipeui-ingredients[open] > summary::after{
	transform: rotate(180deg);
}

.recipeui-ingredients__body{
	margin-top:12px;
	padding:18px 20px;
	border:1px solid rgba(0,0,0,.07);
	border-radius:16px;
	background:#fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.recipeui-ingredients__body ul,
.recipeui-ingredients__body ol{
	margin:0;
	padding-left:1.2em;
}
.recipeui-ingredients__body li{
	margin:7px 0;
	line-height:1.5;
}

/* ─── Steps / Preparation ─────────────────────────────────────── */
.recipeui-steps{
	margin:16px 0 22px;
	border:1px solid rgba(0,0,0,.07);
	border-radius:18px;
	background:#fff;
	overflow:hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.recipeui-steps__body{
	padding:4px 20px 12px;
}
.recipeui-steps__list{
	list-style:none;
	padding:0;
	margin:0;
	counter-reset:recipeuiStep;
}
.recipeui-steps__list > li{
	display:flex;
	gap:16px;
	padding:18px 0;
	border-bottom:1px solid rgba(0,0,0,.06);
	align-items:flex-start;
}
.recipeui-steps__list > li:last-child{ border-bottom:0; }
.recipeui-steps__list > li::before{
	counter-increment:recipeuiStep;
	content:counter(recipeuiStep);
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:10px;
	background: linear-gradient(135deg, #e8630a 0%, #f08a24 100%);
	color:#fff;
	font-size:13px;
	font-weight:800;
	flex:0 0 32px;
	margin-top:1px;
	box-shadow: 0 3px 8px rgba(240,138,36,.28);
}
.recipeui-step__row{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	flex:1 1 auto;
	min-width:0;
}
.recipeui-step__text{
	flex:1 1 320px;
	min-width:0;
}
.recipeui-step__media{
	flex:0 0 240px;
	max-width:240px;
	width:100%;
	margin-left:auto;
}
.recipeui-step__media img{
	display:block;
	width:100%;
	height:160px;
	object-fit:cover;
	border-radius:12px;
}
.recipeui-steps__body img{
	max-width:100%;
	height:160px;
	object-fit:cover;
}

@media (max-width: 768px){
	.recipeui-step__media{
		flex:1 1 100%;
		max-width:100%;
		margin-left:0;
	}
}

.recipeui-step__media{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.recipeui-step__thumb img{
	display:block;
	width:100%;
	height:160px;
	object-fit:cover;
	border-radius:12px;
}

/* Lightbox for step thumbnails */
.recipeui-lightbox{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.72);
	display:none;
	align-items:center;
	justify-content:center;
	padding:16px;
	z-index:99999;
}
.recipeui-lightbox[aria-hidden="false"]{ display:flex; }
.recipeui-lightbox__panel{
	position:relative;
	max-width:min(1100px, 96vw);
	max-height:92vh;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.recipeui-lightbox__img{
	max-width:100%;
	max-height:92vh;
	width:auto;
	height:auto;
	border-radius:14px;
	box-shadow:0 10px 30px rgba(0,0,0,.35);
	background:#fff;
}
.recipeui-lightbox__close{
	position:absolute;
	top:-10px;
	right:-10px;
	width:40px;
	height:40px;
	border-radius:999px;
	border:0;
	cursor:pointer;
	background:#fff;
	box-shadow:0 6px 18px rgba(0,0,0,.25);
	font-size:20px;
	line-height:40px;
}
.recipeui-ingredients__imgs{
	margin:8px 0 10px;
}
.recipeui-ingredients__imgs img{
	max-width:100%;
	height:auto;
	border-radius:12px;
	display:block;
}

.recipeui-lightbox__nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:44px;
	height:44px;
	border-radius:999px;
	border:0;
	cursor:pointer;
	background:#fff;
	box-shadow:0 6px 18px rgba(0,0,0,.25);
	font-size:22px;
	line-height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.recipeui-lightbox__prev{ left:-10px; }
.recipeui-lightbox__next{ right:-10px; }
@media (max-width: 768px){
	.recipeui-lightbox__prev{ left:0; }
	.recipeui-lightbox__next{ right:0; }
}

/* Hover magnifier icon on step images */
.recipeui-step__thumb{
	position:relative;
}
.recipeui-step__thumb::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:12px;
	background:rgba(0,0,0,.0);
	opacity:0;
	transition:opacity .15s ease, background .15s ease;
	pointer-events:none;
}
.recipeui-step__thumb::after{
	content:"";
	position:absolute;
	right:10px;
	top:10px;
	width:34px;
	height:34px;
	border-radius:999px;
	background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27/%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27/%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27/%3E%3C/svg%3E") no-repeat center/18px 18px;
	opacity:0;
	transform:scale(.95);
	transition:opacity .15s ease, transform .15s ease;
	pointer-events:none;
}
.recipeui-step__thumb:hover::before,
.recipeui-step__thumb:focus-within::before{
	opacity:1;
	background:rgba(0,0,0,.12);
}
.recipeui-step__thumb:hover::after,
.recipeui-step__thumb:focus-within::after{
	opacity:1;
	transform:scale(1);
}

/* Robust hover magnifier: works even if images aren't wrapped */
.recipeui-steps .recipeui-step__media{ position:relative; }
.recipeui-steps .recipeui-step__media::after{
	content:"";
	position:absolute;
	right:10px;
	top:10px;
	width:34px;
	height:34px;
	border-radius:999px;
	background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27/%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27/%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27/%3E%3C/svg%3E") no-repeat center/18px 18px;
	opacity:0;
	transform:scale(.95);
	transition:opacity .15s ease, transform .15s ease;
	pointer-events:none;
}
.recipeui-steps .recipeui-step__media:hover::after{
	opacity:1;
	transform:scale(1);
}
/* Also show magnifier when hovering each thumb wrapper (if present) */
.recipeui-step__thumb{ position:relative; }
.recipeui-step__thumb::after{
	content:"";
	position:absolute;
	right:10px;
	top:10px;
	width:34px;
	height:34px;
	border-radius:999px;
	background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27/%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27/%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27/%3E%3C/svg%3E") no-repeat center/18px 18px;
	opacity:0;
	transform:scale(.95);
	transition:opacity .15s ease, transform .15s ease;
	pointer-events:none;
}
.recipeui-step__thumb:hover::after{ opacity:1; transform:scale(1); }

/* Visual cue that step images are zoomable */
.recipeui-steps img.recipeui-zoomable{
	cursor:zoom-in;
}

/* On touch devices (no hover), always show the magnifier icon so it's obvious */
@media (hover: none), (pointer: coarse){
	.recipeui-steps .recipeui-step__media::after,
	.recipeui-step__thumb::after{
		opacity:1 !important;
		transform:scale(1) !important;
	}
}


/* On touch devices (no hover), keep icon visible */
@media (hover: none), (pointer: coarse){
	.recipeui-zoomicon{ opacity:1 !important; transform:scale(1) !important; }
}

/* Zoom cue (v1.3.9) */
.recipeui-steps .recipeui-zoomlink{
	position:relative;
	display:block;
	cursor:zoom-in !important;
}
.recipeui-steps a.recipeui-zoomlink{ cursor:zoom-in !important; }
.recipeui-steps .recipeui-zoomlink img{
	display:block;
	width:100%;
	height:auto;
	cursor:inherit !important;
}
.recipeui-steps .recipeui-zoomicon{
	position:absolute;
	right:10px;
	top:10px;
	width:44px;
	height:44px;
	border-radius:999px;
	background:rgba(0,0,0,.65) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27/%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27/%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27/%3E%3C/svg%3E") no-repeat center/22px 22px;
	box-shadow:0 6px 18px rgba(0,0,0,.25);
	pointer-events:none;
	opacity:1;                 /* base: visible (mobile-safe) */
	transform:scale(1);
	transition:opacity .15s ease, transform .15s ease;
}

/* Desktop: hide until hover */
@media (hover: hover) and (pointer: fine){
	.recipeui-steps .recipeui-zoomicon{
		opacity:0;
		transform:scale(.92);
	}
	.recipeui-steps .recipeui-zoomlink:hover .recipeui-zoomicon,
	.recipeui-steps .recipeui-zoomlink:focus-visible .recipeui-zoomicon{
		opacity:1;
		transform:scale(1);
	}
}

.recipeui-lightbox__hint{display:none !important;}

/* force zoom icon on mobile/tablet regardless of hover/pointer reporting */
@media (max-width: 992px){
	.recipeui-steps .recipeui-zoomicon{
		opacity:1 !important;
		transform:scale(1) !important;
	}
}
/* JS touch marker (extra safety) */
.recipeui-touch .recipeui-steps .recipeui-zoomicon{
	opacity:1 !important;
	transform:scale(1) !important;
}

/* Zoom badge via ::after (v1.4.2) — works even if <span class="recipeui-zoomicon"> is missing/overridden */
.recipeui-steps .recipeui-zoomlink{ position:relative !important; }

.recipeui-steps .recipeui-zoomlink::after{
	content:"";
	position:absolute;
	right:10px;
	top:10px;
	width:44px;
	height:44px;
	border-radius:999px;
	background:rgba(0,0,0,.65) url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27/%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27/%3E%3Cline%20x1%3D%2711%27%20y1%3D%278%27%20x2%3D%2711%27%20y2%3D%2714%27/%3E%3Cline%20x1%3D%278%27%20y1%3D%2711%27%20x2%3D%2714%27%20y2%3D%2711%27/%3E%3C/svg%3E") no-repeat center/22px 22px;
	box-shadow:0 6px 18px rgba(0,0,0,.25);
	pointer-events:none;
	opacity:1;               /* default visible (mobile-safe) */
	transform:scale(1);
	transition:opacity .15s ease, transform .15s ease;
	z-index:5;
}

/* Desktop: show only on hover/focus */
@media (hover: hover) and (pointer: fine){
	.recipeui-steps .recipeui-zoomlink::after{
		opacity:0;
		transform:scale(.92);
	}
	.recipeui-steps .recipeui-zoomlink:hover::after,
	.recipeui-steps .recipeui-zoomlink:focus-visible::after{
		opacity:1;
		transform:scale(1);
	}
}

/* Mobile/tablet: always visible */
@media (max-width: 992px){
	.recipeui-steps .recipeui-zoomlink::after{
		opacity:1 !important;
		transform:scale(1) !important;
	}
}

/* If the legacy span exists, keep it visible too (belt & suspenders) */
.recipeui-steps .recipeui-zoomicon{
	display:block !important;
	z-index:6 !important;
}

/* === Hero main photo (v1.5.4) - DOM wrap, non-destructive === */
.recipeui-hero{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  margin: 10px 0 16px;
  background:#f4f4f4;
}
.recipeui-hero img{
  display:block;
  width:100%;
  height:auto;
}
.recipeui-hero__overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.recipeui-hero__pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:10px 14px;
  font-weight:600;
  font-size:14px;
  text-decoration:none !important;
  line-height:1;
  border:1px solid rgba(255,255,255,.22);
  color:#fff !important;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.recipeui-hero__pill--tg{
  background: rgba(34,158,217,.95);
  border-color: rgba(255,255,255,.25);
}
.recipeui-hero__pill svg{ width:18px; height:18px; display:block; flex:0 0 auto; }
.recipeui-hero__icons{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.recipeui-hero__iconbtn{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  color:#fff !important;
  text-decoration:none !important;
}
.recipeui-hero__iconbtn svg{ width:22px; height:22px; display:block; }

.recipeui-hero__bar{
  display:flex;
  gap:10px;
  padding:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  margin:10px 0 16px;
  flex-wrap:wrap;
}
.recipeui-hero__bar .recipeui-hero__pill{
  color:#111 !important;
  background:#f3f3f3;
  border-color: rgba(0,0,0,.06);
  backdrop-filter:none;
}
.recipeui-hero__bar .recipeui-hero__pill--tg{
  color:#fff !important;
  background: rgba(34,158,217,1);
  border-color: rgba(34,158,217,1);
}
.recipeui-hero__menu{
  position:absolute;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.35);
}
.recipeui-hero__menu.is-open{ display:flex; }
.recipeui-hero__menubox{
  width:min(520px, 100%);
  border-radius:16px;
  background:#fff;
  padding:12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.recipeui-hero__shareitem{
  display:inline-flex;
  gap:10px;
  align-items:center;
  border-radius:12px;
  padding:10px 12px;
  background:#f3f3f3;
  border:1px solid rgba(0,0,0,.06);
  color:#111 !important;
  text-decoration:none !important;
  font-weight:600;
  font-size:14px;
}
.recipeui-hero__shareitem svg{ width:18px; height:18px; display:block; }

@media (max-width: 640px){
  .recipeui-hero{ border-radius:14px; }
  .recipeui-hero__overlay{ padding:12px; gap:8px; }
  .recipeui-hero__pill{ font-size:13px; padding:10px 12px; }
  .recipeui-hero__icons{ flex-direction:row; top:auto; bottom:12px; right:12px; }
  .recipeui-hero__iconbtn{ width:42px; height:42px; border-radius:14px; }
}

/* === Hero meta pills (added for improved usability) === */
.recipeui-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.recipeui-hero-meta .recipeui-meta__item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  box-shadow:0 2px 6px rgba(0,0,0,.20);
  color:#fff;
}
.recipeui-hero-meta .recipeui-meta__icon{
  font-size:14px;
  line-height:1;
  margin-top:0;
}
.recipeui-hero-meta .recipeui-meta__label{
  display:none;
}
.recipeui-hero-meta .recipeui-meta__value{
  font-weight:600;
  font-size:13px;
  margin:0;
}

/* === Hero: side layout — Premium 2025 redesign === */
.recipeui-hero--side{
  margin: 0 0 24px;
}

.recipeui-hero--side .recipeui-hero__side{
  display:flex;
  gap:0;
  align-items:stretch;
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

.recipeui-hero--side .recipeui-hero__media{
  flex: 1 1 auto;
  min-width: 0;
  position:relative;
  overflow:hidden;
}

.recipeui-hero--side .recipeui-hero__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  min-height:280px;
  transition: transform .4s ease;
}

.recipeui-hero--side .recipeui-hero__media:hover img{
  transform: scale(1.02);
}

.recipeui-hero--side .recipeui-hero__panel{
  flex: 0 0 220px;
  width:220px;
  display:flex;
  background: #fafafa;
  border-left: 1px solid rgba(0,0,0,.06);
}

.recipeui-hero--side .recipeui-hero__sidebuttons{
  display:flex;
  flex-direction:column;
  gap:0;
  width:100%;
  padding:16px 14px;
}

/* Section label inside the panel */
.recipeui-hero--side .recipeui-hero__sidebuttons::before{
  content: "Поделиться";
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9ca3af;
  margin-bottom:10px;
  padding:0 2px;
}

.recipeui-hero--side .recipeui-hero__sidebtn{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px 14px;
  border-radius:12px;
  border:0;
  text-decoration:none !important;
  cursor:pointer;
  color:#fff !important;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  position:relative;
  margin-bottom:8px;
}

.recipeui-hero--side .recipeui-hero__sidebtn:last-child{
  margin-bottom:0;
}

.recipeui-hero--side .recipeui-hero__sidebtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  filter: brightness(1.06);
  text-decoration:none !important;
}

.recipeui-hero--side .recipeui-hero__sidebtn:active{
  transform: translateY(0);
  box-shadow: none;
}

.recipeui-hero--side .recipeui-hero__sidebtn svg{
  width:17px;
  height:17px;
  flex: 0 0 17px;
  fill: currentColor;
  opacity:.95;
}

/* Telegram Share */
.recipeui-hero--side .recipeui-hero__sidebtn--tg{
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  box-shadow: 0 3px 12px rgba(34,158,217,.30);
}

/* WhatsApp Share */
.recipeui-hero--side .recipeui-hero__sidebtn--wa{
  background: linear-gradient(135deg, #25D366 0%, #1ebe5d 100%);
  box-shadow: 0 3px 12px rgba(37,211,102,.28);
}

/* Copy link */
.recipeui-hero--side .recipeui-hero__sidebtn--copy{
  background: #fff;
  color: #374151 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.recipeui-hero--side .recipeui-hero__sidebtn--copy svg{
  color:#6b7280;
}

.recipeui-hero--side .recipeui-hero__sidebtn--copy:hover{
  background: #f9fafb;
  border-color: rgba(0,0,0,.15) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
}

/* Telegram Channel (green) */
.recipeui-hero--side .recipeui-hero__sidebtn--channel{
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 3px 12px rgba(22,163,74,.28);
  margin-top:auto;
}

/* VK */
.recipeui-hero--side .recipeui-hero__sidebtn--vk{
  background: linear-gradient(135deg, #4680c2 0%, #3d76bb 100%);
  box-shadow: 0 3px 12px rgba(70,128,194,.28);
}

/* Odnoklassniki */
.recipeui-hero--side .recipeui-hero__sidebtn--ok{
  background: linear-gradient(135deg, #f7931e 0%, #f07d10 100%);
  box-shadow: 0 3px 12px rgba(247,147,30,.28);
}

/* Pinterest */
.recipeui-hero--side .recipeui-hero__sidebtn--pi{
  background: linear-gradient(135deg, #e60023 0%, #d0001f 100%);
  box-shadow: 0 3px 12px rgba(230,0,35,.24);
}

.recipeui-hero--side .recipeui-hero__sidebtn[disabled]{
  opacity:.7;
  cursor:default;
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}

/* "Show more" expand button — minimal style */
.recipeui-hero--side .recipeui-hero__showmore{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 2px;
  border:0;
  background:transparent;
  color:#9ca3af;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:color .14s ease;
  margin-bottom:6px;
}
.recipeui-hero--side .recipeui-hero__showmore:hover{ color:#6b7280; }

@media (max-width: 900px){
  .recipeui-hero--side .recipeui-hero__panel{
    flex-basis:200px;
    width:200px;
  }
}

@media (max-width: 640px){
  .recipeui-hero--side .recipeui-hero__side{
    flex-direction:column;
    border-radius:16px;
  }
  .recipeui-hero--side .recipeui-hero__media img{
    min-height:220px;
    max-height:340px;
  }
  .recipeui-hero--side .recipeui-hero__panel{
    flex-basis:auto;
    width:100%;
    border-left:0;
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .recipeui-hero--side .recipeui-hero__sidebuttons{
    flex-direction:row;
    flex-wrap:wrap;
    padding:12px;
    gap:8px;
  }
  .recipeui-hero--side .recipeui-hero__sidebuttons::before{
    width:100%;
    margin-bottom:0;
  }
  .recipeui-hero--side .recipeui-hero__sidebtn{
    flex:1 1 calc(50% - 4px);
    margin-bottom:0;
    justify-content:center;
    padding:10px 12px;
  }
  .recipeui-hero--side .recipeui-hero__sidebtn--channel{
    flex: 1 1 100%;
    margin-top:0;
  }
}

/* ============================================================
   2026-06-04 FIX: info-page hero (culinary-tips) — share panel
   localization + stacked layout so the photo isn't cramped.
   Scoped: label by lang (EN everywhere), layout only .rcp-info-page.
   ============================================================ */
/* (1) EN label for the share panel header (was hardcoded RU "поделиться") */
html[lang^="en"] .recipeui-hero--side .recipeui-hero__sidebuttons::before { content: "Share"; }

/* (2) Info-page hero: stack image on top (full width), share row below */
.rcp-info-page .recipeui-hero--side .recipeui-hero__side { flex-direction: column; border-radius:16px; }
.rcp-info-page .recipeui-hero--side .recipeui-hero__media img { width:100%; height:auto; max-height:380px; object-fit:cover; min-height:auto; }
.rcp-info-page .recipeui-hero--side .recipeui-hero__panel { flex-basis:auto; width:100%; border-left:0; border-top:1px solid rgba(0,0,0,.06); }
.rcp-info-page .recipeui-hero--side .recipeui-hero__sidebuttons { flex-direction:row; flex-wrap:wrap; padding:12px 14px; gap:8px; }
.rcp-info-page .recipeui-hero--side .recipeui-hero__sidebuttons::before { width:100%; margin-bottom:2px; }
.rcp-info-page .recipeui-hero--side .recipeui-hero__sidebtn { flex:1 1 calc(50% - 4px); justify-content:center; margin-bottom:0; padding:10px 12px; }
.rcp-info-page .recipeui-hero--side .recipeui-hero__sidebtn--channel { flex:1 1 100%; }


/* ============================================================
   2026-06-04 FIX: info-section step-list badge overlap.
   recipeui converts <ol> into .recipeui-steps__list. When that list sits
   inside .rcp-info-section__body, the template's plain-<ol> counter rules
   (.rcp-info-section__body ol li{position:relative} + ol li::before{position:absolute})
   take over the number badge, while recipeui's li reset removes the gutter,
   so the orange badge lands ON TOP of the first letters of each line.
   Fix: restore recipeui's native in-flow flex badge (identical to the 13
   intro-area step lists that already render fine) ONLY for this case.
   Scope = .rcp-info-page + .rcp-info-section__body + .recipeui-steps__list,
   so intro-area step lists and every real recipe are untouched.
   ============================================================ */
.rcp-info-page .rcp-info-section__body ol.recipeui-steps__list > li { position: static; padding-left: 0; }
.rcp-info-page .rcp-info-section__body ol.recipeui-steps__list > li::before { position: static; top: auto; left: auto; }
