/*
 * Content components with the class names of the Joomla markup (SP Page Builder sections, ZOO items,
 * RSForm → CF7 forms, articles, Private Label), from the computed styles of the reference pages.
 * Written from scratch (Q25). Per-template refinements come with each template (pilot, Gate 3).
 */

/* ---- Section grid (sppb-*, same geometry as Bootstrap 3) ---------------------------------------- */

/* Static, as on the reference (the z-index only matters where a section is positioned, .home-about1). */
.sppb-section {
	z-index: 1;
}

.sppb-container {
	margin-right: auto;
	margin-left: auto;
	padding-right: 15px;
	padding-left: 15px;
}

.sppb-row {
	margin-right: -15px;
	margin-left: -15px;
}

.sppb-container::before,
.sppb-container::after,
.sppb-row::before,
.sppb-row::after {
	content: " ";
	display: table;
}

.sppb-container::after,
.sppb-row::after {
	clear: both;
}

[class*="sppb-col-"] {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

.sppb-text-center {
	text-align: center;
}

.sppb-text-right {
	text-align: right;
}

.sppb-text-left {
	text-align: left;
}

/* Gaps between addons: 20px, or 50px where the reference page sets it (icf_sppb_space()). */
.sppb-empty-space {
	margin-bottom: 20px;
}

.sppb-empty-space.icf-space-40 {
	margin-bottom: 40px;
}

.sppb-empty-space.icf-space-50 {
	margin-bottom: 50px;
}

/* The template's legacy.css (Bootstrap 2 compat, loaded after Bootstrap 3) gives every .clearfix pseudo-element an
   empty content and no line height; the page builder and Widgetkit clearfixes end up the same (L01, L05b). */
.clearfix::before,
.clearfix::after {
	content: "";
	line-height: 0;
}

@media (min-width: 768px) {
	.sppb-container {
		width: 750px;
	}

	[class*="sppb-col-sm-"] {
		float: left;
	}

	.sppb-col-sm-3 { width: 25%; }
	.sppb-col-sm-4 { width: 33.33333333%; }
	.sppb-col-sm-6 { width: 50%; }
	.sppb-col-sm-8 { width: 66.66666667%; }
	.sppb-col-sm-12 { width: 100%; }
}

@media (min-width: 992px) {
	.sppb-container {
		width: 970px;
	}
}

@media (min-width: 1200px) {
	.sppb-container {
		width: 1170px;
	}
}

/* ---- Section title with the frame and the ice-cream cup ----------------------------------------- */

.sppb-section-title {
	margin: 80px 0 !important;
	text-align: center;
	background: url("../img/divider.svg") no-repeat center 20px;
}

.sppb-section-title .sppb-title-heading {
	display: inline-block;
	margin: 0 auto 15px;
	padding: 0 35px;
	font-size: 36px;
	line-height: 36px;
	text-transform: uppercase;
	background-color: var(--icf-color-white);
}

.sppb-section-title .sppb-title-heading::after {
	content: "";
	display: block;
	position: relative;
	top: 24px;
	width: 123px;
	height: 60px !important;
	margin: 0 auto;
	font-size: 36px; /* stays 36px on phones, where the heading drops to 26px */
	color: var(--icf-color-navy);
	background: var(--icf-color-white) url("../img/section-title-cup.png") center center no-repeat;
}

@media (max-width: 768px) {
	.sppb-section-title {
		background: none !important;
	}
}

@media (max-width: 480px) {
	.sppb-section-title .sppb-title-heading {
		padding: 0 10px;
		font-size: 26px;
		line-height: 30px;
	}

	.sppb-section-title .sppb-title-heading::after {
		top: 10px !important;
	}
}

/* ---- Addons -------------------------------------------------------------------------------------- */

/* Addon titles keep the margins of their heading level (h3 20px/10px, h4 10.5px), as on the reference:
   one English home card is an h3 and sits lower than the h4 cards. */
.sppb-addon-title {
	font-size: 20px !important;
	line-height: 1.1;
}

/* Text block with a title (English home intro). The 50px top margin is the addon's own setting there. */
.sppb-addon-text-block .sppb-addon-title {
	margin: 0 0 40px;
	font-weight: 400;
	text-align: center;
	color: var(--icf-color-text);
}

.icf-intro .sppb-addon-text-block .sppb-addon-title {
	margin-top: 50px;
}

.sppb-img-responsive {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.sppb-text-center .sppb-img-responsive {
	transition: 1s ease-in-out;
}

/* Product category cards: glow and rounded corners on hover. */
.sppb-section.proionta img:hover {
	border-radius: 40px;
	box-shadow: var(--icf-shadow-image-hover);
	transition: 0.3s ease-in-out;
}

.sppb-section.proionta {
	padding: 50px 0;
}

/* ---- CTA band «Συνεργαστείτε μαζί μας» (banner2) ------------------------------------------------ */

.banner2 {
	padding: 50px 0 40px;
	background: var(--icf-color-accent) !important;
}

.banner2 .sppb-addon-cta .sppb-cta-title {
	margin: 0;
	font-size: 30px;
	line-height: 36px;
	text-align: center;
	text-transform: uppercase;
	color: var(--icf-color-black);
	background-color: var(--icf-color-accent) !important;
}

.sppb-btn {
	display: inline-block;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	transition: color 400ms, background-color 400ms, border-color 400ms;
}

/* The band's button: primary blue, text turns navy on hover. */
.banner2 .sppb-addon-cta a.sppb-btn {
	position: relative;
	top: -5px;
	height: 54px;
	margin-left: 45px;
	padding: 0 33px;
	font-family: var(--icf-font-condensed);
	line-height: 54px;
	text-transform: uppercase;
	color: var(--icf-color-white);
	background: var(--icf-color-primary) !important;
	border: none !important;
	border-radius: 0;
}

/* Hover only: on focus the reference keeps the white text. */
.banner2 .sppb-addon-cta a.sppb-btn:hover {
	color: var(--icf-color-navy);
}

@media (min-width: 768px) {
	.sppb-addon-cta .sppb-row {
		display: table-row;
		height: 100%;
	}

	.sppb-addon-cta .sppb-row > div {
		display: table-cell;
		float: none;
		vertical-align: middle;
	}
}

@media (max-width: 1200px) {
	.banner2 .sppb-addon-cta .sppb-cta-title {
		font-size: 22px;
	}
}

@media (max-width: 768px) {
	.banner2 .sppb-addon-cta .sppb-cta-title {
		font-size: 17px !important;
	}

	.banner2 .sppb-addon-cta .sppb-text-right {
		text-align: center;
	}

	.banner2 .sppb-addon-cta a.sppb-btn {
		top: 0;
		height: 45px;
		margin: 15px auto 0;
		padding: 0 30px;
		line-height: 45px;
	}
}

/* ---- Contact details (L02) --------------------------------------------------------------------- */

/* The «Contact Info» module of the contact page: three items in a row, each an icon in a grey circle over the text,
   underlined in blue; on hover the item drops by 23px, the line moves to the top and the circle turns blue with a
   white icon (template.css and preset1.css of the reference). */
#c-info {
	display: table;
	width: 100%;
	margin: 100px 0 105px;
}

#c-info > li {
	float: left;
	width: 33.3333%;
	padding: 0 50px;
	cursor: pointer;
}

#c-info .ci-inner {
	padding: 0 0 23px;
	border-top: 1px solid transparent;
	border-bottom: 1px solid var(--icf-color-primary);
	transition: 0.4s;
}

#c-info .ci-inner:hover {
	padding: 23px 0 0;
	border-top-color: var(--icf-color-primary);
	border-bottom-color: transparent;
	transition: 0.6s;
}

#c-info .ci-inner > i {
	display: table;
	width: 78px;
	height: 78px;
	margin: 0 auto;
	font-size: 36px;
	line-height: 78px;
	text-align: center;
	color: var(--icf-color-text);
	background: #e7e9eb;
	border-radius: 50%;
	transition: 0.4s;
}

#c-info .ci-inner:hover > i {
	color: var(--icf-color-white);
	background: var(--icf-color-primary);
}

#c-info .ci-inner > i > b {
	display: none;
}

#c-info .ci-inner > p {
	margin: 5px 0 0;
	font-size: 16px;
	text-align: center;
	color: var(--icf-color-text);
}

@media (max-width: 768px) {
	#c-info > li {
		width: 100%;
		margin-bottom: 50px;
	}
}

@media (max-width: 320px) {
	#c-info > li {
		padding: 0 5px;
	}

	#c-info .ci-inner > i {
		width: 60px;
		height: 60px;
		font-size: 24px;
		line-height: 60px;
	}

	#c-info .ci-inner > p {
		font-size: 14px;
	}
}

/* ---- Partners (L03) ------------------------------------------------------------------------------ */

/* The row of the partners: 50px above and below (the reference's inline padding). The Greek page's single column is
   white (its inline background colour; its inline "padding:50" has no unit and does nothing on the reference). */
.icf-partners {
	padding: 50px 0;
}

.icf-partners .sppb-col-sm-12 > .sppb-addon-container {
	background-color: var(--icf-color-white);
}

/* English page: the template's rules for the glued column class (K19) turn every partner into an orange box. */
.sppb-addon-containerantiprosopoi .sppb-addon {
	min-height: 344px !important;
	margin: 30px;
	padding: 20px 22px;
	font-size: 18px;
	background: #f7941e;
	border: 4px solid #ffa335;
	border-radius: 15px;
}

.sppb-addon-containerantiprosopoi .sppb-addon-title {
	font-size: 22px !important;
	background: var(--icf-color-white) !important;
}

/* ---- Forms (RSForm markup rendered by Contact Form 7, inc/forms.php) ---------------------------- */

/* CF7's own elements around the RSForm markup. CF7's stylesheet is off (snippet fix-cf7-rsform-markup):
   what it hid or sized is handled here, so the form keeps the geometry of the reference. */
.wpcf7 .screen-reader-response {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

.wpcf7 .hidden-fields-container,
.wpcf7 .wpcf7-spinner,
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7.js .wpcf7-not-valid-tip {
	display: none;
}

/* The responsive layout of RSForm (front.css of the component) with the template's #userForm rules (full
   width, no border), from the computed styles of the unsubscribe page (layout L12). The contact page (L02)
   overrides the widths and the button further down (F22). */
.formResponsive {
	display: inline-block;
	width: 100%;
	margin: 0 0 30px;
	padding: 20px;
	border: 0;
}

.formResponsive fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.formResponsive .rsform-block {
	margin: 0 0 18px;
}

.formResponsive .rsform-block::before,
.formResponsive .rsform-block::after {
	content: "";
	display: table;
}

.formResponsive .rsform-block::after {
	clear: both;
}

.formResponsive .formControlLabel {
	float: left;
	width: 140px;
	padding: 5px 0 0;
	text-align: right;
}

.formResponsive .formControls {
	margin-left: 160px;
}

.formResponsive .formRequired {
	margin-left: 3px;
	font-weight: 700;
}

.formResponsive input.rsform-input-box,
.formResponsive textarea,
.formResponsive select {
	display: inline-block;
	height: 34px !important;
	padding: 4px;
	font-size: 13px;
	line-height: 18px;
	color: #555;
	background-color: var(--icf-color-white);
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	transition: border 0.2s linear, box-shadow 0.2s linear;
}

.formResponsive input.rsform-input-box {
	width: 210px;
	margin: 0 0 9px;
}

.formResponsive textarea {
	width: 210px;
	margin: 0;
}

.formResponsive input.rsform-input-box:focus,
.formResponsive textarea:focus,
.formResponsive select:focus {
	border-color: rgba(82, 168, 236, 0.8);
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

/* RSForm's submit button (the Bootstrap 2 .btn-primary of its front.css). The prefixed gradient is
   deliberate: the computed background-image must read like the reference's. */
.formResponsive .rsform-submit-button {
	display: inline-block;
	padding: 4px 10px;
	font-size: 13px;
	line-height: 18px;
	color: var(--icf-color-white);
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	vertical-align: middle;
	cursor: pointer;
	background-color: #0074cc;
	background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
	background-repeat: repeat-x;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom-color: rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.formResponsive .rsform-submit-button:hover {
	background-color: #0055cc;
	background-position: 0 -15px;
	transition: background-position 0.1s linear;
}

.formResponsive .rsform-submit-button:focus {
	box-shadow: none; /* the template's input[type=submit]:focus; the outline is the browser's (A19) */
}

.formResponsive .formValidation {
	display: inline-block; /* the error message sits beside the field (front.css .formHorizontal .formValidation) */
	margin-bottom: 0;
}

.formResponsive .formNoError {
	display: none;
}

.formResponsive .formDescription {
	margin: 9px 0 0;
	line-height: 30px;
}

/* Checkbox groups (forms 4/5, «agree»): RSForm's input + label, produced by the snippet from CF7's
   markup. RSForm's front.css makes the label one line high (18px): a longer text runs onto a second line that
   overflows into the gap below, and the submit button sits that much higher (checked with the contact page QA,
   stage 4). */
.formResponsive .formBody input[type="checkbox"] {
	float: left;
	width: auto;
	margin: 3px 5px 3px 0;
	cursor: pointer;
}

.formResponsive .formBody label {
	float: left;
	height: 18px;
	margin: 3px 5px 3px 0;
	padding: 0;
	font-weight: 400;
	color: #898989;
}

/* Error state (forms.js reproduces RSForm's classes after CF7's answer): the ErrorMessage line of RSForm
   (<p class="formRed">, here CF7's response output placed by [response]), the field message and the red
   control. CF7's own tip is shown only without JavaScript. */
.formResponsive .wpcf7-response-output {
	margin: 0 0 10px;
	font-weight: 700;
	line-height: 30px;
	color: red;
}

.formResponsive .formError,
.formResponsive .wpcf7-not-valid-tip {
	display: block;
	height: 18px;
	margin: 3px 5px 3px 0;
	padding-left: 5px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.42857143; /* Bootstrap's unitless value: 18.57px at 13px, as computed on the reference */
	color: #b94a48;
	vertical-align: middle;
}

/* Checkboxes keep their look: RSForm marks only text fields, text areas and selects (the «agree» box of forms 4/5). */
.formResponsive input.rsform-error,
.formResponsive textarea.rsform-error,
.formResponsive select.rsform-error,
.formResponsive .wpcf7-not-valid:not([type="checkbox"]):not([type="radio"]) {
	color: #b94a48;
	border-color: #b94a48;
}

.formResponsive input.rsform-error:focus,
.formResponsive textarea.rsform-error:focus,
.formResponsive select.rsform-error:focus {
	border-color: #953b39;
	box-shadow: 0 0 6px #d59392;
}

/* RSForm's responsive breakpoint (front.css): labels above the fields, fields full width, the button keeps
   its width. */
@media (max-width: 650px) {
	.formResponsive .rsform-block {
		text-align: left;
	}

	.formResponsive .formControlLabel {
		float: none;
		width: auto;
		padding: 0;
		text-align: left;
	}

	.formResponsive .formControls {
		margin-left: 0;
	}

	.formResponsive input.rsform-input-box,
	.formResponsive textarea,
	.formResponsive select {
		width: 100%;
	}
}

/* Contact page (L02, RSForm forms 4/5): the template widens the fields to 304px and makes the button a flat blue
   304×40 (rules scoped by the page's body class there, .contact-fino-pagota / .contact-us; here by the template's,
   the slug being editable, R17). Under 650px RSForm's front.css makes the fields full width (!important) but not the
   button, which keeps 304px, and 280px under 340px (F22, checked against the reference in stage 4). */
.tpl-contact .formResponsive input.rsform-input-box,
.tpl-contact .formResponsive textarea {
	width: 304px;
}

.tpl-contact .formResponsive .rsform-submit-button {
	width: 304px;
	height: 40px;
	background-color: var(--icf-color-secondary);
	background-image: -webkit-linear-gradient(top, var(--icf-color-secondary), var(--icf-color-secondary));
}

@media (max-width: 650px) {
	.tpl-contact .formResponsive input.rsform-input-box,
	.tpl-contact .formResponsive textarea {
		width: 100%;
	}
}

@media screen and (max-width: 340px) {
	.tpl-contact .formResponsive .rsform-submit-button {
		width: 280px;
	}
}

/* ---- News / product items (ZOO markup) ----------------------------------------------------------- */

#yoo-zoo .details h1.title {
	margin: 0 0 5px;
	font-size: 35px;
	line-height: 50px;
	letter-spacing: -1px;
	color: #505050;
}

#yoo-zoo .items {
	position: relative;
}

#yoo-zoo .items .row {
	margin: 0;
	padding: 5px 5px 15px;
	overflow: hidden;
}

#yoo-zoo .width33 {
	float: left;
	width: 33.333%;
}

#yoo-zoo .teaser-item {
	padding: 0 10px;
	overflow: hidden;
}

#yoo-zoo .teaser-item .pos-media.media-center {
	text-align: center; /* news teasers only: the product image on the left keeps text-align start (L07b) */
}

#yoo-zoo .teaser-item .pos-title {
	margin: 5px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
}

#yoo-zoo .teaser-item .element-itempublish_up {
	margin: 7px 0 0;
}

#yoo-zoo .teaser-item .pos-links {
	margin: 7px 0 0;
}

@media (max-width: 767px) {
	#yoo-zoo .width33 {
		width: 100%;
	}
}

/* ---- Private Label (L06) ---------------------------------------------------------------------- */

/* The landing page of the EN menu: the reference's custom module 157 inside article 13, which the template styles
   with «.private-label section#sp-main-body …» (its menu page class). Keyed on the template's body class (R17);
   the page offsets are in layout.css. The styleguide renders the same partials inside a .tpl-private-label box. */
.tpl-private-label .item-page .entry-header {
	margin: 0;
}

.tpl-private-label .row.row1 {
	margin: 0;
}

.tpl-private-label .row.row2 {
	padding-top: 80px;
}

.tpl-private-label .row2-title {
	padding: 10px 50px;
	font-size: 25px;
	color: var(--icf-color-white);
	background-color: #f7941e;
}

.tpl-private-label .row2-break {
	margin: 50px;
}

.tpl-private-label .row2 li {
	padding: 20px 0;
	font-size: 18px;
}

/* The check mark in front of each point: the reference's images/fino/general/check-box.png, copied into the theme. */
.tpl-private-label .row.row2 li::before {
	display: inline-block;
	float: left;
	width: 25px;
	height: 30px;
	margin-right: 5px;
	content: "";
	background-image: url("../img/check-box.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* The light-blue diagonal behind the band and the cards: a rotated box three times as wide as the page, cut off by
   the template's overflow-x:hidden wrapper. */
.tpl-private-label .row.row3 {
	position: relative;
	z-index: -1;
	height: 200px;
}

.tpl-private-label .blue-box {
	position: absolute;
	right: -155%;
	width: 320%;
	height: 500px;
	overflow: hidden;
	background: #8cc0d5;
	transform: rotate(-20deg);
}

.tpl-private-label .row.row4 {
	padding: 100px 80px 50px;
	background: #f7941e;
}

.tpl-private-label span.row4-text {
	margin-left: 50px;
	font-size: 60px;
}

/* The «+» sits 50px below the top of the product: the column's margin. (The template's own margin-top for .plus-img,
   compiled to calc(-69%), loses to the inline «margin: 0 auto» of the module's <img> and is not carried over.) */
.tpl-private-label .row4 .col-md-2 {
	margin-top: 50px;
}

.tpl-private-label .row4 .col-md-5.etiketa {
	margin-top: 35px;
}

/* «Τα Προϊόντα Μας»: a label, not a link (as on the reference), pulled up over the band's lower edge. */
.tpl-private-label .row5 .our-products {
	position: relative;
	top: -68.5px;
	width: 100%;
	max-width: 50%;
	margin: 0 auto;
	padding: 40px;
	font-size: 40px;
	text-align: center;
	color: var(--icf-color-white);
	background: #f15922;
	border-radius: 10px;
}

.tpl-private-label .row.row6 {
	text-align: center;
}

/* A11: the card images sit in a square box (object-fit), so a non-square image, such as the replacement of the
   missing «Παγωτό Οικογενειακό» (1378×920), keeps the four titles on one line; the square ones are unchanged. */
.tpl-private-label .row.row6 img {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.tpl-private-label span.row6-pagwto-title {
	font-size: 35px;
}

.tpl-private-label .row.private-label-form {
	padding: 100px 150px 0;
}

.tpl-private-label .row.private-label-form h1 {
	margin-bottom: 50px;
	text-align: center;
}

@media (max-width: 1200px) {
	.tpl-private-label .row.row1 {
		margin-right: -15px;
		margin-left: -15px;
	}

	.tpl-private-label span.row6-pagwto-title {
		font-size: 25px;
	}
}

@media (max-width: 992px) {
	.tpl-private-label .row2-break {
		margin: 0;
	}

	.tpl-private-label .row.row4 {
		padding-bottom: 150px;
	}

	.tpl-private-label .row.row4 .col-md-12 {
		margin-bottom: 25px;
		text-align: center;
	}

	.tpl-private-label span.row4-text {
		margin-left: 0;
	}

	.tpl-private-label span.row6-pagwto-title {
		font-size: 5vw;
	}

	.tpl-private-label .row.private-label-form {
		padding: 100px 0 0;
	}

	.tpl-private-label .row.private-label-form h1 {
		margin-bottom: 0;
	}

	/* The reference's rule for the paragraphs of the form row also centres RSForm's error message (p.formRed), whose
	   Contact Form 7 counterpart is a div (F26). */
	.tpl-private-label .row.private-label-form .col-md-6 p,
	.tpl-private-label .row.private-label-form .col-md-6 .wpcf7-response-output {
		text-align: center;
	}
}

@media (max-width: 767px) {
	.tpl-private-label .row2-title {
		margin-right: -15px;
		margin-left: -15px;
		padding: 10px;
		font-size: 4.5vw;
	}

	.tpl-private-label .row2 li {
		font-size: 4vw;
	}

	.tpl-private-label .row.row4 {
		padding: 100px 0 150px;
	}

	.tpl-private-label span.row4-text {
		font-size: 9vw;
	}

	.tpl-private-label .row5 .our-products {
		font-size: 5vw;
	}
}

@media (max-width: 650px) {
	.tpl-private-label .row.private-label-form h1 {
		margin-right: 15px;
		margin-left: 15px;
	}

	.tpl-private-label .row.private-label-form .rsform-block-koumpi .rsform-submit-button {
		width: 100%;
	}
}

/* ---- Carousel (SP Page Builder carousel markup; Owl Carousel 2 moves the stage, Δ4) ------------- */

.sppb-carousel {
	position: relative;
}

.sppb-carousel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Until Owl has initialised, the first slide shows alone (no layout shift before window load). */
.sppb-carousel-inner.owl-carousel {
	display: block;
	z-index: auto;
}

.sppb-carousel-inner:not(.owl-loaded) > .sppb-item:not(:first-child) {
	display: none;
}

/* No permanent GPU layers (Owl's translate3d/backface hints): with them Chrome draws the text below
   the carousel without subpixel antialiasing, unlike the reference. carousel.js keeps the stage on a
   2D translate; moving slides are still composited while they animate. */
.sppb-carousel .owl-carousel .owl-stage-outer,
.sppb-carousel .owl-carousel .owl-item {
	-webkit-transform: none;
	transform: none;
}

.sppb-carousel .owl-carousel .owl-stage,
.sppb-carousel .owl-carousel .owl-item {
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

.sppb-carousel .sppb-item {
	position: relative;
	padding: 0;
	transition: left 0.6s ease-in-out; /* reference value; the Owl stage does the moving */
}

/* Natural size up to the carousel width, as on the reference (Owl's own CSS would stretch to 100%). */
.sppb-carousel .sppb-carousel-inner .sppb-item > img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	line-height: 1;
}

.sppb-carousel .sppb-carousel-item-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px 50px;
}

.sppb-carousel .sppb-carousel-caption {
	display: table;
	height: 100%;
}

.sppb-carousel .sppb-carousel-pro-text {
	display: table-cell;
	vertical-align: middle;
}

/* Arrows: full-height 40px strips with a thin chevron (our SVGs in place of the template's PNGs, Q25). */
.sppb-carousel-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 40px;
	font-size: 24px;
	text-align: center;
	color: var(--icf-color-white);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	background: url("../img/carousel-prev.svg") center center no-repeat;
	opacity: 0.8;
	cursor: pointer;
}

.sppb-carousel-arrow.right {
	right: 0;
	left: auto;
	background-image: url("../img/carousel-next.svg");
}

.sppb-carousel-arrow:hover,
.sppb-carousel-arrow:focus {
	color: var(--icf-color-white);
	opacity: 0.9;
}

.sppb-carousel-arrow i {
	display: none;
}

/* Indicators (English home): navy dots, the active one a ring 1px higher and without side margins. */
.sppb-carousel-indicators {
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 15;
	width: 60%;
	margin: 0 0 0 -30%;
	padding-left: 0;
	text-align: center;
	list-style: none;
}

.sppb-carousel-indicators li {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 9px;
	padding: 0;
	font-size: 0;
	text-indent: -999px;
	background: url("../img/carousel-dot.svg") no-repeat;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}

.sppb-carousel-indicators li.active {
	position: relative;
	top: 0;
	height: 19px;
	margin: 0;
	background: url("../img/carousel-dot-active.svg");
}

/* ---- Home sections (L01) ------------------------------------------------------------------------ */

/* Greek home, second row: white band. */
.sppb-section.home-about1 {
	position: relative;
	padding: 35px 0;
	background-color: var(--icf-color-white);
}

/* Empty band before the footer (Greek home). */
.sppb-section.icf-plbanner {
	padding: 50px 0 0;
}

.icf-plbanner .sppb-container {
	width: 100%;
	padding: 0;
}

/* ---- Map (Google Maps embed, Δ7) ------------------------------------------------------------------ */

/* The canvas of the page-builder gmap addon (L02) takes the height of the reference inline; the embed fills it. The
   reference's canvas is filled by the Maps script (A7), which makes it relative and clips its content. */
.sppb-addon-gmap-canvas {
	position: relative;
	overflow: hidden;
}

.sppb-addon-gmap-canvas > iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- Article (L05: com_content single article, article.item.item-page) ------------------------ */

/* The template gives every article 50px below and takes it back for the single view. */
article.item.item-page {
	margin-bottom: 0;
}

.item-page .entry-header {
	position: relative;
	margin-top: 30px;
	margin-bottom: 30px;
}

.item-page .entry-header h2 {
	margin: 8px 0 0;
	font-size: 24px;
	line-height: 1;
}

/* Full-width article image above the title (article «ΣΗΜΕΙΑ ΠΩΛΗΣΗΣ»). */
.item-page .entry-image {
	margin-bottom: 30px;
}

.item-page .entry-image img {
	width: 100%;
}

/* Empty gallery carousel above the title («Ασφάλεια Τροφίμων», bug-for-bug K21): the template's Bootstrap
   carousel with one image whose src is the site root, so only the two arrows show. Bootstrap (vendored) gives
   .carousel, .carousel-inner and .item; the template forces the wrappers open and styles the arrows. */
.carousel-gallery-block > div,
.carousel-gallery-block > div > div {
	height: 100% !important;
	overflow: visible !important;
	margin: 0 !important;
}

/* The reference's Bootstrap 3.3.2 gives the carousel items one transition; the vendored 3.4.1 adds the prefixed
   ones to the list (computed-style difference only, L05d). */
.carousel-gallery-block .carousel-inner > .item {
	transition: transform 0.6s ease-in-out;
}

.entry-gallery {
	margin-bottom: 30px;
}

.carousel-left,
.carousel-right {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	font-size: 24px;
	line-height: 36px;
	text-align: center;
	color: var(--icf-color-white);
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	transition: 400ms;
}

.carousel-left {
	left: 10px;
}

.carousel-right {
	right: 10px;
}

/* ---- Widgetkit «wall» gallery ([icf_gallery], article «ΣΗΜΕΙΑ ΠΩΛΗΣΗΣ») ---------------------------- */

/* Written from the computed styles of the reference (the Widgetkit CSS is not copied, Q25). The reference
   adds .spotlight, the inline position/overflow and the overlay with jQuery; here they are static. */
.wk-gallery img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.wk-gallery-wall > * {
	display: block;
	float: left;
}

.wk-gallery-wall.margin {
	margin: 0 -15px -15px 0;
}

.wk-gallery-wall.margin > * {
	margin: 0 15px 15px 0;
}

.wk-gallery-wall.round > *,
.wk-gallery-wall.round > * > img {
	border-radius: 10px;
	overflow: hidden;
}

.wk-gallery-wall > a.spotlight {
	position: relative;
	overflow: hidden;
	max-width: 100%;
}

/* Spotlight hover: a dark overlay with a magnifier (our SVG in place of the Widgetkit magnifier.png, Q25),
   faded in over 300ms as the Widgetkit script animates it. */
.spotlight .overlay {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	color: var(--icf-color-white);
	background: rgba(0, 0, 0, 0.5);
	transition: opacity 300ms, visibility 0s 300ms;
}

.spotlight .overlay-default {
	background: rgba(0, 0, 0, 0.5) url(../img/magnifier.svg) 50% 50% no-repeat;
}

.spotlight .overlay > div {
	padding: 10px;
}

.spotlight .overlay a {
	color: var(--icf-color-white);
	text-decoration: underline;
}

.spotlight:hover .overlay {
	visibility: visible;
	opacity: 1;
	transition: opacity 300ms;
}

/* ---- Catalogues (L11: the FlippingBook «HTML version», template-parts/catalogue/viewer.php) ------ */

/* The values of the component's white.css (the file itself is not reused, Q25). The reference loads it only when a book
   is shown, so the message of an unpublished book keeps the plain text style (K32). */
.tpl-catalogue #altmsg {
	padding: 5px 0;
}

.tpl-catalogue #nav_bar {
	padding: 20px 0;
}

.tpl-catalogue #nav_bar a:link,
.tpl-catalogue #nav_bar a:visited,
.tpl-catalogue #nav_bar a:active {
	padding: 2px 4px;
	color: #000;
	text-decoration: none;
	background-color: #eee;
}

/* K33: white text on the light grey on hover, as on the live site. */
.tpl-catalogue #nav_bar a:hover {
	color: #fff;
	background-color: #eee;
}

/* The description boxes under the viewer (only /en/product-menu-2): the component's book_list_bg.png (10×100px,
   #e6e5e6 at the top to white at 88px) as a gradient. */
.tpl-catalogue .fb_bookDescription,
.tpl-catalogue .fb_leftPageDescription,
.tpl-catalogue .fb_rightPageDescription {
	margin: 0;
	padding: 10px;
	color: #333;
	border: 1px solid #e6e6e6;
	background: #fff linear-gradient(to bottom, #e6e5e6, #fff 88px) 0 0 / 100% 100px repeat-x;
}

.tpl-catalogue .fb_bookDescription {
	clear: both;
}

.tpl-catalogue .fb_leftPageDescription,
.tpl-catalogue .fb_rightPageDescription {
	display: none;
}

/* A3: the flipbook (assets/js/flipbook.js) lies over the page image, transparent at rest, and shows while a page
   turns; at rest the visitor sees the page image as on the reference. No permanent GPU layer (StPageFlip's
   translateZ(0): the antialiasing change of the Owl carousel, L01) and pinch zoom kept on phones. */
.tpl-catalogue .icf-flipbook {
	position: absolute;
	opacity: 0;
}

.tpl-catalogue .icf-flipbook.is-turning {
	opacity: 1;
}

.tpl-catalogue .icf-flipbook.stf__parent {
	transform: none;
	touch-action: pan-y pinch-zoom;
}

.tpl-catalogue .icf-flipbook-page img {
	width: 100%;
	max-width: none;
	height: 100%;
}