/**
 * A gallery whose photos have to be bought.
 *
 * These rules turn off the browser's own "save this picture" affordances. They
 * are a speed bump, not a lock — anything on screen can be captured — but they
 * stop the one-tap save that would otherwise make paying pointless.
 */

.sgp-locked img,
#envirabox-wrap.sgp-locked-box img,
#envirabox-img.sgp-locked-box {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: auto;
}

/* Keeps a long press from selecting the caption instead. */
.sgp-locked .envira-gallery-item,
.sgp-locked figcaption {
	-webkit-user-select: none;
	user-select: none;
}

.sgp-buy-note {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-left: 3px solid currentColor;
	font-size: 15px;
	line-height: 1.45;
	opacity: 0.85;
}

.sgp-buy-note strong {
	font-weight: 600;
}

/*
 * How big the photo looks when it opens.
 *
 * Envirabox shows an image at its own pixel size: it will shrink a large one to
 * fit the screen but never stretch a small one. A photo from a free gallery is
 * 6000px so it always fills the screen; a preview is deliberately small, so it
 * opened as a stamp in a white box while the free galleries went full width.
 *
 * These rules move the decision from the file to the screen, so a preview fills
 * the width the same way a full-size photo does. The preview size setting then
 * decides how sharp it looks rather than how big.
 *
 * The element names are the ones the lightbox actually builds, which are not
 * the ones its own configuration template suggests: the sizing lives on
 * #envirabox-content as an inline width and height, and the image inside it
 * carries no class at all. Overriding only the image is not enough, because it
 * is held to max-width:100% of that box.
 */
#envirabox-wrap.sgp-locked-box {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate( -50%, -50% ) !important;
	width: auto !important;
	height: auto !important;
	max-width: 100vw !important;
	max-height: 100vh !important;
}

/* Sized by what is inside them, rather than by the photo's own dimensions. */
#envirabox-wrap.sgp-locked-box #envirabox-outer,
#envirabox-wrap.sgp-locked-box #envirabox-content {
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
}

/* The white frame, which at 15px is a wide margin on a phone. */
#envirabox-wrap.sgp-locked-box #envirabox-content {
	border-width: 5px !important;
}

/*
 * The size is worked out per photo in sgpea-locked.js and written straight onto
 * this element, because it depends on the shape of the photograph and no rule
 * can know that. Only the ceilings live here.
 *
 * object-fit is a safety net rather than the mechanism: if the size ever fails
 * to be applied, the photo is letterboxed rather than stretched.
 */
#envirabox-wrap.sgp-locked-box #envirabox-img {
	display: block !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
}

/*
 * Buying the photo you are looking at.
 *
 * Pinned to the screen rather than to the frame. The lightbox is centred with a
 * transform, and a transformed ancestor becomes the containing block for
 * anything fixed inside it — the button would follow the photo around instead
 * of staying put.
 */
.sgp-buy.sgp-lb-buy {
	position: fixed !important;
	left: 50% !important;
	bottom: 22px !important;
	right: auto !important;
	top: auto !important;
	transform: translateX( -50% );
	z-index: 999999980;

	padding: 11px 20px;
	font-size: 15px;
	opacity: 1;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.4 );
}

.sgp-buy.sgp-lb-buy:hover {
	background: rgba( 0, 0, 0, 0.88 );
}

.sgp-buy.sgp-lb-buy.is-in:hover {
	background: #15682d;
}

/*
 * The label swaps itself. Which one shows follows the class the cart already
 * puts on every buy button, so there is no second copy of that state to keep
 * in step.
 */
.sgp-buy.sgp-lb-buy .sgp-buy-added {
	display: none;
}

.sgp-buy.sgp-lb-buy.is-in .sgp-buy-text {
	display: none;
}

.sgp-buy.sgp-lb-buy.is-in .sgp-buy-added {
	display: inline;
}

@media ( max-width: 600px ) {
	.sgp-buy.sgp-lb-buy {
		bottom: 16px !important;
		padding: 10px 16px;
		font-size: 14px;
	}
}

/*
 * Actually hidden when hidden.
 *
 * The hidden attribute works through the browser's own [hidden]{display:none},
 * which any stylesheet outranks — and the cart's .sgp-buy sets a display of its
 * own. Setting the attribute therefore did nothing at all, and the button sat
 * over the gallery after the lightbox had closed.
 */
.sgp-buy.sgp-lb-buy[hidden] {
	display: none !important;
}