/**
 * Single beer (Elementor single template 126): the brewer row on all widths,
 * then the page on phones, after Figma's
 * "Beer Detailed page - Mobile" (848:17224): the photo comes first, then the
 * title; the text is Figma's phone size (Text LG 19/26 rather than the kit's
 * 22/30); Χρώμα and EBC sit side by side, and so do "Παλαιωμένη" and the
 * vegan / gluten-free icons. The title's own phone size is in archive.css,
 * with the brewery title's.
 *
 * Elementor's post CSS for 126 comes first, so rules as strong as its own
 * (0,3,0) for containers, (0,4,0) inside widgets, win. Containers are set
 * through Elementor's own variables (--order, --gap, ...).
 *
 * Loaded on every front-end request, including the Elementor preview.
 */

/* A beer made for others (or a brewer without a logo) has no logo before the
   name: the name starts at the left edge, without the 12px kept for the
   logo. */
.elementor-126 .elementor-element.elementor-element-6245bd8:first-child {
	--padding-left: 0px;
}

@media (max-width: 767px) {
	/* The photo (the tablet/phone copy of the gallery, or the featured image
	   when there's no gallery) above the title, in Figma's 362px-high box:
	   tall photos (cans at full width were 700px high) fit inside it. Then 44px
	   down to the title, of which the carousel keeps 30 for its dots, even
	   with a single photo and no dots. */
	.elementor-126 .elementor-element.elementor-element-a8be541 {
		--order: -1;
	}

	.elementor-126 .elementor-element.elementor-element-8b04ec7 .swiper-slide-image,
	.elementor-126 .elementor-element.elementor-element-f7244ec img {
		display: block;
		width: 100%;
		height: 362px;
		object-fit: contain;
	}

	.elementor-126 .elementor-element.elementor-element-8b04ec7 {
		margin-bottom: 14px;
	}

	.elementor-126 .elementor-element.elementor-element-f7244ec {
		margin-bottom: 44px;
	}

	/* Title, beer style, brewer: 8px between the title and the style, 16 above
	   the brewer and 16 below it, down to the line. */
	.elementor-126 .elementor-element.elementor-element-48c465f {
		--padding-bottom: 16px;
	}

	.elementor-126 .elementor-element.elementor-element-ff064a0 > .elementor-widget-container {
		margin-top: 8px;
	}

	.elementor-126 .elementor-element.elementor-element-ff064a0 .elementor-heading-title,
	.elementor-126 .elementor-element.elementor-element-7d2464d {
		font-size: 19px;
		line-height: 26px;
	}

	.elementor-126 .elementor-element.elementor-element-e38301f {
		--padding-top: 10px;
		--column-gap: 6px;
	}

	/* The logo keeps its width (up to 72px): the row used to squeeze its box
	   to 55px and let the logo stick out into the old 36px gap. */
	.elementor-126 .elementor-element.elementor-element-08f68db {
		flex: none;
		width: auto;
	}

	.elementor-126 .elementor-element.elementor-element-6245bd8 {
		--padding-left: 0px;
	}

	.elementor-126 .elementor-element.elementor-element-867f279 .jet-listing-dynamic-field__content {
		font-size: 19px;
		line-height: 26px;
	}

	/* ABV, IBU, Plato: 33px apart, as on desktop. */
	.elementor-126 .elementor-element.elementor-element-4f63696 {
		--gap: 33px 24px;
		--row-gap: 33px;
	}

	/* Χρώμα and EBC side by side; the colour's name 14px below its label, as
	   on desktop, so it sits level with the EBC number. */
	.elementor-126 .elementor-element.elementor-element-131ed0c {
		--e-con-grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.elementor-126 .elementor-element.elementor-element-22e32b7 {
		--gap: 14px 14px;
		--row-gap: 14px;
	}

	/* "Παλαιωμένη" on the left, the vegan / gluten-free icons on the right.
	   Without the barrel there's only the icons, on the left. */
	.elementor-126 .elementor-element.elementor-element-7c48174 {
		--e-con-grid-template-columns: minmax(0, 1fr) auto;
	}

	/* Συστατικά and Άρωμα / γεύση: 40px apart. */
	.elementor-126 .elementor-element.elementor-element-1deace2 {
		--gap: 40px 24px;
		--row-gap: 40px;
	}
}