/* Product page extras: a sticky buy bar, a swipe gallery for phones, an inline video player and a
   plain-number quantity field. Each block styles markup the template prints only while its own
   setting is on, so a store with all four off downloads nothing and sees no rule of this file.
   Lengths that a browser has to compute are written twice - a plain value first, the derived one
   after - so a browser without custom properties still lands on a usable layout. */

/* ============================ Sticky buy bar ============================ */

.evo-buybar {
/* Shown by the script once the real buy button has left the screen, never before: a bar that is
   there from the first paint hides part of the page the shopper has not read yet. */
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
/* Deliberately one below the bottom navigation bar (1030). The two never share a strip - the
   script lifts this bar above the navigation - but if a rule ever fails the navigation, which
   leads away from a dead end, must be the one that stays reachable. */
z-index: 1029;
box-sizing: border-box;
align-items: center;
padding: 8px 12px;
/* Clears the home indicator on a phone with a rounded screen. Dropped again once the bar is
   lifted, because then the navigation bar below it already reserves that strip. */
padding-bottom: 8px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-top: 1px solid #e5e5e5;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.evo-buybar--lifted {
padding-bottom: 8px;
}

.evo-buybar__media {
display: none;
align-items: center;
/* Without this the product name would stretch the cell and push the price and the button off the
   line instead of ellipsing itself. */
min-width: 0;
flex: 1 1 auto;
color: #333;
text-decoration: none;
}
.evo-buybar__media:hover,
.evo-buybar__media:focus {
color: #333;
text-decoration: none;
}

.evo-buybar__thumb {
width: 44px;
height: 44px;
flex: 0 0 auto;
margin-right: 10px;
object-fit: contain;
background: #fff;
}

.evo-buybar__name {
overflow: hidden;
font-size: 14px;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
text-overflow: ellipsis;
}

.evo-buybar__price {
flex: 0 0 auto;
margin-right: 10px;
font-size: 17px;
font-weight: bold;
line-height: 1.2;
white-space: nowrap;
color: #dd4b39;
}

.evo-buybar__qty {
display: none;
position: relative;
flex: 0 0 auto;
box-sizing: border-box;
width: 104px;
height: 38px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 2px;
background: #fff;
}
.evo-buybar__qty .evo-buybar__minus,
.evo-buybar__qty .evo-buybar__plus {
position: absolute;
top: 0;
width: 30px;
height: 36px;
padding: 0;
border: 0;
outline: none;
background: #fafafa;
color: inherit;
line-height: 36px;
text-align: center;
cursor: pointer;
}
.evo-buybar__qty .evo-buybar__minus {
left: 0;
font-size: 17px;
}
.evo-buybar__qty .evo-buybar__plus {
right: 0;
font-size: 13px;
}
.evo-buybar__qty .evo-buybar__minus:hover,
.evo-buybar__qty .evo-buybar__plus:hover {
background: #eee;
color: #dd4b39;
}
.evo-buybar__qtyinput {
position: absolute;
top: 0;
left: 30px;
box-sizing: border-box;
width: 44px;
height: 36px;
padding: 0;
border: 0;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
outline: none;
background: #fff;
color: inherit;
font-size: 14px;
text-align: center;
}

.evo-buybar__actions {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: flex-end;
}
.evo-buybar__actions .btn {
margin-left: 8px;
padding: 10px 16px;
border-radius: 2px;
}
.evo-buybar__cart {
flex: 1 1 auto;
}
.evo-buybar__cart .fa {
padding-right: 6px;
}
/* The bar repeats the page's own buy button, so it has to look like that button and not like the
   framework default it inherits from. */
.evo-buybar__cart.btn-primary,
.evo-buybar__cart.btn-primary:focus {
background: #e47364;
border-color: #e47364;
color: #fff;
}
.evo-buybar__cart.btn-primary:hover,
.evo-buybar__cart.btn-primary:active,
.evo-buybar__cart.btn-primary:active:focus {
background: #dd4b39;
border-color: #dd4b39;
color: #fff;
}

@media (max-width: 767px) {
	.evo-buybar--m.evo-buybar--on {
	display: flex;
	/* The bottom navigation bar owns the very bottom of the screen. The script measures it and
	   writes its height here, so the two bars stack instead of covering one another. */
	bottom: 0;
	bottom: var(--evo-pux-lift, 0px);
	}
	.evo-buybar--m.evo-buybar--on .evo-buybar__price {
	margin-left: auto;
	}
}

/* The same answer without waiting for the script, wherever the browser can ask the question. */
@supports selector(:has(*)) {
	@media (max-width: 767px) {
		body:has(.evo-bnav) .evo-buybar--m {
		--evo-pux-lift: calc(var(--evo-bnav-height, 52px) + var(--evo-bnav-safe, 0px));
		}
	}
}

@media (min-width: 768px) {
	.evo-buybar--d.evo-buybar--on {
	display: flex;
	/* On a wide screen the bar belongs at the top, under whichever header is pinned there; the
	   script measures that header, because its height depends on the merchant's own settings. */
	top: 0;
	top: var(--evo-pux-top, 0px);
	bottom: auto;
	padding-top: 9px;
	padding-bottom: 9px;
	border-top: 0;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}
	.evo-buybar--d.evo-buybar--on .evo-buybar__media {
	display: flex;
	}
	.evo-buybar--d.evo-buybar--on .evo-buybar__price {
	/* Pushed away from the name, so the price, the quantity and the buttons keep one place on the
	   line whatever the length of the name. */
	margin-left: auto;
	font-size: 19px;
	}
	.evo-buybar--d.evo-buybar--on .evo-buybar__qty {
	display: block;
	}
	.evo-buybar--d.evo-buybar--on .evo-buybar__actions {
	flex: 0 0 auto;
	}
	.evo-buybar--d.evo-buybar--on .evo-buybar__cart {
	flex: 0 0 auto;
	}
}

/* A printed page has no bar that follows the reader. */
@media print {
	.evo-buybar {
	display: none !important;
	}
}

/* ========================= Swipe gallery on phones ====================== */

/* Off screen at every width but a phone's: the desktop layout with the zoomed main image and the
   thumbnail strip is left exactly as it was. */
.evo-mgallery {
display: none;
}

@media (max-width: 767px) {
	/* The gallery replaces the main image and the thumbnail strip rather than joining them, or a
	   phone would scroll past the same pictures twice. Marked important because the carousel
	   script writes `display` straight onto the thumbnail strip as an inline style. */
	.thumbnails.evo-has-gallery > .main_img_box,
	.thumbnails.evo-has-gallery > .images-additional {
	display: none !important;
	}

	.evo-mgallery {
	display: block;
	position: relative;
	margin-bottom: 12px;
	}

	.evo-mgallery__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* The dots already say where the shopper is; a scrollbar over the picture only takes room. */
	scrollbar-width: none;
	}
	.evo-mgallery__track::-webkit-scrollbar {
	display: none;
	}

	.evo-mgallery__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	}
	.evo-mgallery__slide > a {
	display: block;
	position: relative;
	}
	.evo-mgallery__slide img {
	display: block;
	width: 100%;
	height: auto;
	}

	.evo-mgallery__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 9px;
	}
	.evo-mgallery__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	margin: 0 3px;
	border: 0;
	border-radius: 50%;
	background: #d0d0d0;
	cursor: pointer;
	}
	.evo-mgallery__dot.is-active {
	width: 18px;
	border-radius: 4px;
	background: #dd4b39;
	}

	/* Play badge over the poster of a video that still opens in the lightbox. It must not swallow
	   the tap that belongs to the link underneath it. */
	.evo-mgallery__video > span {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none;
	}
	.evo-mgallery__video > span::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 54px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(20, 20, 20, 0.55);
	}
	.evo-mgallery__video > span::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
	}
}

/* Every slide holds a real link and every dot is a real button, so the tab key already walks the
   gallery and the browser scrolls the focused slide into view. That only helps while the focus
   ring stays visible, which is what these rules guarantee against a theme that hides outlines. */
.evo-mgallery__track:focus,
.evo-mgallery__slide > a:focus,
.evo-mgallery__dot:focus,
.evo-video__player:focus {
outline: 2px solid #4c85d3;
outline-offset: 2px;
}

/* A shopper who asked for less movement gets the jump without the slide. */
@media (prefers-reduced-motion: reduce) {
	.evo-mgallery__track {
	scroll-behavior: auto;
	}
}

/* ============================= Inline video ============================= */

.evo-video {
margin-bottom: 12px;
}

.evo-video__player {
display: block;
width: 100%;
height: auto;
background: #000;
}

/* Inside the swipe gallery the player is a slide of its own and fills it. */
.evo-mgallery__slide > .evo-video__player {
width: 100%;
}

/* ========================= Quantity field: number ======================= */

/* The plain-number variant of the quantity field. The stepper buttons are laid out on top of the
   input by absolute positioning, so switching the look means undoing that positioning as well as
   hiding the buttons - an input left absolutely placed would sit over its neighbours. */
.evo-qty-field .product-info .frame-change-count {
display: none;
}
.evo-qty-field .product-info .number {
width: auto;
height: auto;
max-height: none;
border: 0;
line-height: normal;
vertical-align: middle;
}
.evo-qty-field .product-info input.plus-minus {
position: static;
left: auto;
top: auto;
box-sizing: border-box;
width: 62px;
height: 34px;
padding: 4px 6px;
border: 1px solid #ddd;
border-radius: 3px;
background: #fff;
text-align: center;
}
/* The bar stands outside the page content, so it carries the setting as a modifier of its own
   rather than inheriting it from a wrapper. */
.evo-buybar--qtyfield .evo-buybar__qty {
width: auto;
height: auto;
border: 0;
}
.evo-buybar--qtyfield .evo-buybar__minus,
.evo-buybar--qtyfield .evo-buybar__plus {
display: none;
}
.evo-buybar--qtyfield .evo-buybar__qtyinput {
position: static;
box-sizing: border-box;
width: 64px;
height: 38px;
padding: 4px 6px;
border: 1px solid #ddd;
border-radius: 3px;
}