/**
 * Icons of the demo, drawn as CSS masks instead of the OceanWP icon fonts.
 *
 * functions.php dequeues the Font Awesome 6.7.2 and Simple Line Icons 2.4.0
 * stylesheets that OceanWP loads (two stylesheets and up to three webfonts,
 * about 238 KB as transferred) and loads this file after the OceanWP
 * stylesheets instead.
 * The colour comes from currentColor and the size from em, so the icons keep
 * the look they had with the fonts.
 *
 * Icons reach the page two ways and both are covered here:
 * - classes in the markup (icon-eye, icon-home, fa-angle-*),
 * - rules in the OceanWP and WooCommerce stylesheets that draw a glyph through
 *   content: "\fXXX" in an icon font family. A scan by class names does not see
 *   these; they are overridden below with the same selectors, so this file has
 *   to load after those stylesheets.
 * Icons that stay hidden on the demo (the old navbar, grid/list switch) are
 * left out and draw nothing.
 *
 * Adding an icon: add a row to ICONS in scripts/build-icons.py (repo root) and
 * run python3 scripts/build-icons.py. It rewrites only the block between the
 * build-icons markers below. Then write the rule that uses
 * var(--fibo-icon-NAME) and var(--fibo-icon-NAME-width). A class added to a
 * template alone draws nothing.
 *
 * Masks: the viewBox of every shape is the glyph's em box and its width the
 * glyph's advance, so a mask 1em high sits where the font drew the glyph.
 * An inline glyph took a box as tall as its line (1lh) with the em box in
 * the middle, and reached 0.125em (Font Awesome) or 0.0625em (Simple Line
 * Icons) below the baseline; the inline rules below rebuild that box, so the
 * lines keep their height. The first height and vertical-align are the
 * fallback for browsers without the lh unit.
 *
 * Licences: Font Awesome Free icons CC BY 4.0 (fontawesome.com/license/free),
 * Simple Line Icons MIT (github.com/thesabbir/simple-line-icons).
 */

:root {
	/* build-icons:start */
	--fibo-icon-sli-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix%281 0 0 -1 0 960%29' d='M515.472 638.592c-106.032 0 -192 -85.9678 -192 -192c0 -106.016 85.9678 -192 192 -192s192 85.9678 192 192s-85.9678 192 -192 192zM515.472 318.592c-70.5762 0 -129.473 58.8164 -129.473 129.393c0 70.5766 57.4238 128 128 128c70.5918 0 128 -57.4238 128 -128 s-55.9355 -129.393 -126.527 -129.393zM1023.68 455.424c-0.368164 1.61621 -0.207031 3.3252 -0.6875 4.90918c-0.208008 0.671875 -0.624023 1.05566 -0.864258 1.64746c-0.335938 0.912109 -0.255859 1.98438 -0.719727 2.86426 c-93.0723 213.104 -293.664 335.76 -507.424 335.76s-418.368 -122.432 -511.488 -335.552c-0.400391 -0.896484 -0.335938 -1.82422 -0.65625 -2.84863c-0.223633 -0.624023 -0.6875 -0.975586 -0.895508 -1.56738 c-0.496094 -1.61621 -0.303711 -3.2959 -0.607422 -4.92773c-0.591797 -2.87988 -1.13574 -5.67969 -1.13574 -8.5918c0 -2.94434 0.543945 -5.66406 1.13574 -8.5918c0.320312 -1.59961 0.112305 -3.34375 0.608398 -4.87988 c0.208008 -0.719727 0.671875 -1.02344 0.895508 -1.67969c0.335938 -0.879883 0.255859 -1.96777 0.65625 -2.84766c93.1357 -213.056 295.744 -333.712 509.504 -333.712c213.776 0 416.336 120.4 509.44 333.505c0.463867 0.912109 0.368164 1.87207 0.719727 2.87988 c0.223633 0.55957 0.655273 0.975586 0.847656 1.59961c0.496094 1.56836 0.335938 3.28027 0.6875 4.91211c0.55957 2.86426 1.08789 5.66406 1.08789 8.62402c0 2.81641 -0.52832 5.60059 -1.10426 8.49705zM512 159.405c-181.296 0 -359.743 95.5684 -447.423 287.681 c86.8477 191.472 267.68 289.504 449.424 289.504c181.68 0 358.496 -98.1436 445.376 -289.712c-86.8164 -191.408 -265.633 -287.473 -447.377 -287.473z'/%3E%3C/svg%3E");
	--fibo-icon-sli-eye-width: 1em;
	--fibo-icon-sli-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix%281 0 0 -1 0 960%29' d='M1016.7 446.64l-480.369 503.168c-6.03223 6.30371 -14.3682 9.83984 -23.0879 9.83984c-8.7041 0 -17.04 -3.55176 -23.0879 -9.83984l-482.848 -503.152c-12.2402 -12.752 -11.8086 -32.9922 0.943359 -45.248c12.752 -12.2236 32.9922 -11.8721 45.248 0.944336 l43.0078 44.832v-478.832c0 -17.6797 14.3359 -32 32 -32h223.552c17.6318 0 31.9355 14.2559 32 31.9043l1.00781 319.664h254.992v-319.568c0 -17.6797 14.3203 -32 32 -32h223.472c17.6797 0 32 14.3203 32 32v478.992l42.9922 -45.04 c6.28809 -6.52832 14.6885 -9.83984 23.0889 -9.83984c7.96777 0 15.9678 2.94434 22.1602 8.94434c12.7363 12.2236 13.1523 32.4795 0.928711 45.2314zM863.535 505.184v-504.831h-159.472v319.552c0 17.6797 -14.3203 32 -32 32h-318.88 c-17.6318 0 -31.9355 -14.2559 -32 -31.9043l-1.00781 -319.664h-159.664v504.848c0 2.63965 -0.416016 5.16797 -1.00781 7.63184l353.76 368.624l351.424 -368.208c-0.688477 -2.5918 -1.15234 -5.26367 -1.15234 -8.04785z'/%3E%3C/svg%3E");
	--fibo-icon-sli-home-width: 1em;
	--fibo-icon-sli-close-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix%281 0 0 -1 0 960%29' stroke='black' stroke-width='42' d='M512 960c-282.768 0 -512 -229.232 -512 -512c0 -282.784 229.232 -512 512 -512c282.784 0 512 229.216 512 512c0 282.768 -229.216 512 -512 512zM512 -1.00781c-247.024 0 -448 201.984 -448 449.009c0 247.025 200.976 448 448 448s448 -200.976 448 -448 s-200.976 -449.009 -448 -449.009zM693.008 629.008c-12.4961 12.4961 -32.752 12.4961 -45.248 0l-135.76 -135.76l-135.76 135.76c-12.4961 12.4961 -32.752 12.4961 -45.2637 0c-12.4961 -12.4961 -12.4961 -32.752 0 -45.248l135.76 -135.76l-135.76 -135.76 c-12.4961 -12.4805 -12.4961 -32.7686 0 -45.249c12.4961 -12.4961 32.752 -12.4961 45.2637 0l135.76 135.76l135.76 -135.76c12.4961 -12.4961 32.752 -12.4961 45.248 0c12.4961 12.4805 12.4961 32.7686 0 45.249l-135.76 135.76l135.76 135.76 c12.5117 12.5117 12.5117 32.7676 0 45.248z'/%3E%3C/svg%3E");
	--fibo-icon-sli-close-bold-width: 1em;
	--fibo-icon-fa-angle-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z'/%3E%3C/svg%3E");
	--fibo-icon-fa-angle-up-width: 0.875em;
	--fibo-icon-fa-angle-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
	--fibo-icon-fa-angle-down-width: 0.875em;
	--fibo-icon-fa-angle-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
	--fibo-icon-fa-angle-left-width: 0.625em;
	--fibo-icon-fa-angle-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");
	--fibo-icon-fa-angle-right-width: 0.625em;
	--fibo-icon-fa-magnifying-glass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
	--fibo-icon-fa-magnifying-glass-width: 1em;
	--fibo-icon-fa-eye-regular: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/svg%3E");
	--fibo-icon-fa-eye-regular-width: 1.125em;
	--fibo-icon-fa-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
	--fibo-icon-fa-check-width: 0.875em;
	--fibo-icon-fa-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z'/%3E%3C/svg%3E");
	--fibo-icon-fa-info-width: 0.375em;
	--fibo-icon-fa-xmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
	--fibo-icon-fa-xmark-width: 0.75em;
	--fibo-icon-fa-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z'/%3E%3C/svg%3E");
	--fibo-icon-fa-spinner-width: 1em;
	/* build-icons:end */
}


/* Classes in the markup */

.icon-eye,
.icon-home,
.fa.fa-angle-up,
.fa.fa-angle-left,
.fa.fa-angle-right {
	display: inline-block;
	line-height: 1;
	height: 1em;
	height: 1lh;
	background-color: currentColor;
	-webkit-mask: var(--fibo-icon) center / auto 1em no-repeat;
	mask: var(--fibo-icon) center / auto 1em no-repeat;
}

.icon-eye,
.icon-home,
/* OceanWP hover style sets vertical-align: inherit on the quick view icon. */
.woocommerce ul.products li.product .woo-entry-buttons li a.owp-quick-view i.icon-eye {
	vertical-align: -0.0625em;
	vertical-align: calc(-0.0625em - (1lh - 1em) / 2);
}

.fa.fa-angle-up,
.fa.fa-angle-left,
.fa.fa-angle-right {
	vertical-align: -0.125em;
	vertical-align: calc(-0.125em - (1lh - 1em) / 2);
}

.icon-eye {
	--fibo-icon: var(--fibo-icon-sli-eye);
	width: var(--fibo-icon-sli-eye-width);
}

.icon-home {
	--fibo-icon: var(--fibo-icon-sli-home);
	width: var(--fibo-icon-sli-home-width);
}

.fa.fa-angle-up {
	--fibo-icon: var(--fibo-icon-fa-angle-up);
	width: var(--fibo-icon-fa-angle-up-width);
}

.fa.fa-angle-left {
	--fibo-icon: var(--fibo-icon-fa-angle-left);
	width: var(--fibo-icon-fa-angle-left-width);
}

.fa.fa-angle-right {
	--fibo-icon: var(--fibo-icon-fa-angle-right);
	width: var(--fibo-icon-fa-angle-right-width);
}


/* Glyphs drawn by OceanWP and WooCommerce rules through content */

/* Inline glyphs: show password, WooCommerce notices, quick view gallery arrows. */
.woocommerce form .show-password-input::after,
.woocommerce-message::before,
ul.woocommerce-message li::before,
.woocommerce-error::before,
ul.woocommerce-error li::before,
.woocommerce-info::before,
ul.woocommerce-info li::before,
#owp-qv-wrap .flex-direction-nav a::before {
	content: "";
	display: inline-block;
	height: 1em;
	height: 1lh;
	vertical-align: -0.125em;
	vertical-align: calc(-0.125em - (1lh - 1em) / 2);
	background-color: currentColor;
	-webkit-mask: var(--fibo-icon) center / auto 1em no-repeat;
	mask: var(--fibo-icon) center / auto 1em no-repeat;
}

.woocommerce form .show-password-input::after {
	--fibo-icon: var(--fibo-icon-fa-eye-regular);
	width: var(--fibo-icon-fa-eye-regular-width);
}

.woocommerce-message::before,
ul.woocommerce-message li::before {
	--fibo-icon: var(--fibo-icon-fa-check);
	width: var(--fibo-icon-fa-check-width);
}

.woocommerce-error::before,
ul.woocommerce-error li::before {
	--fibo-icon: var(--fibo-icon-fa-xmark);
	width: var(--fibo-icon-fa-xmark-width);
}

.woocommerce-info::before,
ul.woocommerce-info li::before {
	--fibo-icon: var(--fibo-icon-fa-info);
	width: var(--fibo-icon-fa-info-width);
}

/* The display above would undo these OceanWP rules. */
ul.woocommerce-message::before,
ul.woocommerce-error::before,
ul.woocommerce-info::before {
	display: none;
}

@media only screen and (max-width: 767px) {
	.woocommerce-message::before {
		display: none;
	}
}

/* OceanWP sets content on these two with more specific selectors. */
#owp-qv-wrap .flex-direction-nav a.flex-prev::before {
	--fibo-icon: var(--fibo-icon-fa-angle-left);
	content: "";
	width: var(--fibo-icon-fa-angle-left-width);
}

#owp-qv-wrap .flex-direction-nav a.flex-next::before {
	--fibo-icon: var(--fibo-icon-fa-angle-right);
	content: "";
	width: var(--fibo-icon-fa-angle-right-width);
}

/* Product gallery zoom, a 32px block with the glyph centred. */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	--fibo-icon: var(--fibo-icon-fa-magnifying-glass);
	content: "";
	height: 32px;
	background-color: currentColor;
	-webkit-mask: var(--fibo-icon) center / auto 1em no-repeat;
	mask: var(--fibo-icon) center / auto 1em no-repeat;
}

/* Select arrow. ::after keeps its box and left border (a mask would hide the
   border too), the arrow moves to ::before in the same place. */
.theme-select::after {
	content: "";
}

.theme-select::before {
	--fibo-icon: var(--fibo-icon-fa-angle-down);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 31px;
	height: 32px;
	font-size: 11px;
	background-color: #929292;
	-webkit-mask: var(--fibo-icon) center / auto 1em no-repeat;
	mask: var(--fibo-icon) center / auto 1em no-repeat;
	pointer-events: none;
}

/* "Clear" next to the variations, an inline-block aligned to the top of the
   line. The font drew it with synthetic bold, hence the bold variant. */
.woocommerce div.product form.cart .variations .reset_variations::before {
	--fibo-icon: var(--fibo-icon-sli-close-bold);
	content: "";
	width: var(--fibo-icon-sli-close-bold-width);
	height: 1.8em;
	height: 1lh;
	background-color: currentColor;
	-webkit-mask: var(--fibo-icon) center / auto 1em no-repeat;
	mask: var(--fibo-icon) center / auto 1em no-repeat;
}

/* Ticked checkbox, a 16 x 14px float inside the box. */
input[type="checkbox"]:checked::before {
	--fibo-icon: var(--fibo-icon-fa-check);
	content: "";
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--fibo-icon) center / auto 1em no-repeat;
	mask: var(--fibo-icon) center / auto 1em no-repeat;
}

/* Spinners: the block overlay (a 30px block) and buttons while loading. */
.blockUI::before,
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce #respond input#submit.loading::after {
	--fibo-icon: var(--fibo-icon-fa-spinner);
	content: "";
	background-color: currentColor;
	-webkit-mask: var(--fibo-icon) center / contain no-repeat;
	mask: var(--fibo-icon) center / contain no-repeat;
}

.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce #respond input#submit.loading::after {
	width: 1em;
	height: 1em;
}

/* The overlay spins with the keyframes that came with Font Awesome. */
@keyframes fa-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}