/*
 * Rules adopted from the child theme's style.css.
 *
 * WHY THIS FILE EXISTS. style.css in flatsome-child was written to design the
 * pages this plugin has since taken over, and the two had grown entangled: the
 * plugin's own stylesheets were quietly depending on declarations that lived over
 * there. Moving that file aside to find out what still needed it produced 94
 * measured differences across five page types, and the ones below are the subset
 * this plugin is responsible for.
 *
 * Each block records the selector it came from, so the original can be deleted
 * from the child theme without guessing what it was holding up.
 *
 * WHAT IS NOT HERE. Rules for pages this plugin has never touched: the home page
 * review slider, the mobile menu, the cart page's row spacing. Those are reported
 * rather than adopted, because adopting them would make this plugin responsible
 * for parts of the site it does not own.
 *
 * @package Pearlory_Checkout
 */

/* ==========================================================================
 * The cart drawer
 * ========================================================================== */

/*
 * From: .off-canvas-right .mfp-content, .off-canvas-left .mfp-content
 *       { background-color: #fff !important }
 *
 * The most consequential line in the file. Without it the drawer has no
 * background of its own and the page shows straight through it: the promotional
 * banner and the words SHOP NOW were legible behind the cart contents. Flatsome
 * paints the off canvas panel from a theme option this site does not set, so the
 * child theme was supplying it.
 *
 * !important is carried over because Flatsome's own rule uses one.
 */
body .off-canvas-right .mfp-content,
body .off-canvas-left .mfp-content {
	background-color: #fff !important;
}

/*
 * From: .off-canvas-cart { width: 90% !important }
 *
 * Declared twice in the original, 395px first and then 90%, so the later one
 * won. 90% of the viewport on a phone, which is what every measurement in the
 * mini cart work was taken against.
 */
body .off-canvas-cart {
	width: 90% !important;
}

/* --------------------------------------------------------------------------
 * The free shipping and free gift progress bar
 *
 * From: .minicart_container, .steps, .step, .step.completed, .progress
 *
 * This whole component was the child theme's. The plugin restyles its colours,
 * its labels and its message, and never set the geometry, so with style.css gone
 * the two milestone markers stopped being circles on a line and became a pair of
 * squares adrift in the panel: measured 14x14 at 146,160 and 10x10 at 340,174,
 * against a .steps box collapsed to zero height.
 * -------------------------------------------------------------------------- */
body .minicart_container {
	position: relative;
}

body .minicart_container .steps {
	position: relative;
	display: flex;
}

body .minicart_container .step {
	position: absolute;
	top: -9.5px;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 2px solid #acaca6;
	border-radius: 50%;
}

body .minicart_container .step.completed {
	background: var(--fs-color-primary, #009b9b);
	border-color: var(--fs-color-primary, #009b9b);
}

body .minicart_container .progress {
	position: absolute;
	z-index: 0;
	width: 100%;
	border-bottom: 3px solid #acaca6;
	border-radius: 5px;
}

/*
 * From: .percent, .label_mini, .labeltop, .labelbottom
 *
 * The rest of the same progress bar: .percent is the filled portion of the line,
 * and the three label rules position the FREE SHIPPING and FREE GIFT captions
 * under their dots. Adopted with the geometry above so the whole component lives
 * in one place instead of half here and half in the child theme.
 */
body .minicart_container .percent {
	position: absolute;
	z-index: 1;
	border-bottom: 3px solid var(--fs-color-primary, #009b9b);
}

body .minicart_container .label_mini {
	position: relative;
	right: 40px;
	width: 150px;
	font-size: 12px;
	font-weight: 600;
}

body .minicart_container .labeltop {
	bottom: 20px;
}

body .minicart_container .labelbottom {
	top: 20px;
}

/*
 * From: .expand-one { display: flex; padding-left: 10px; padding-top: 10px;
 *       font-size: .9em }
 *
 * The heading row above the drawer's upsell cards. This plugin already styles the
 * h5 inside it and never set the row itself.
 */
body .ux-mini-cart-footer .expand-one {
	display: flex;
	padding-top: 10px;
	padding-left: 10px;
	font-size: 0.9em;
}

/*
 * From: .progress-outer, .progress-inner
 *
 * The second bar the drawer can render, used by the other progress template in
 * the child theme's custom_functions. Kept because either template may be the
 * one enabled.
 */
body .progress-outer {
	width: 100%;
	height: 5px;
	margin: auto;
	background-color: #eef1f3;
	border-radius: 5px;
}

body .progress-inner {
	height: 5px;
	background-image: linear-gradient(to right, #75b800, #75b800);
	border-radius: 5px;
	transition: width 1.5s;
}

/* --------------------------------------------------------------------------
 * The drawer's upsell row
 *
 * From: .side-cart__upsells-items ul,
 *       .side-cart__upsells-items ul.list-none li.upsell-item,
 *       .upsell-item .upsell-image, .upsell-details, .upsell-title,
 *       .upsell-item__add-to-bag--mobile
 *
 * The plugin sets this row's widths, its price layout, its image crop and its
 * button size, and all of that assumed a flex row it never declared. With the
 * child theme gone the cards became list items complete with bullet markers, the
 * thumbnails collapsed to 0x0 because the box is a span that went back to
 * inline, the product names turned into teal links, and the Add button took the
 * theme's teal.
 *
 * Only the declarations the plugin depends on are adopted. The original's fixed
 * 115px image, 94px column height and 260px card width are deliberately left
 * behind: the plugin sets all three itself and had to override them.
 * -------------------------------------------------------------------------- */
/*
 * From: .mini-cart-upsell { padding: 0 10px; margin: 0 -30px 20px }
 *
 * The panel's own inset, and the negative margin that lets it run to the edges
 * of the drawer rather than sitting inside the drawer's 30px gutter. Without it
 * the panel kept a 30px inset from somewhere further up, which took the scroll
 * track from 315px to 255px, and since the cards are sized as 70% of the track
 * they came out 179px instead of 221px: narrow enough that the price stacked
 * again and the product name truncated.
 *
 * Scoped to the footer instance. The banner at the top of the drawer shares the
 * class .mini-cart-upsell and has its own margin set elsewhere.
 */
body .ux-mini-cart-footer .mini-cart-upsell {
	margin: 0 -30px 20px;
	padding: 0 10px;
}

body .side-cart__upsells-items ul {
	display: flex;
}

body .side-cart__upsells-items ul.list-none li.upsell-item,
body .mini-cart-upsell li.upsell-item {
	display: flex;
	/* The bullet the list marker put back when display stopped being flex. */
	list-style: none;
}

body .upsell-item .upsell-image {
	display: block;
	position: relative;
}

body .upsell-item .upsell-image img {
	position: absolute;
}

body .upsell-item .upsell-details {
	position: relative;
}

body .upsell-item .upsell-title {
	display: -webkit-box;
	overflow: hidden;
	color: #111;
	font-size: 12px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

body .upsell-item .upsell-item__add-to-bag--mobile {
	background-color: #161616;
	border: none;
	font-size: 11px;
}

/* ==========================================================================
 * The product page
 * ========================================================================== */

/*
 * From: .product-summary .single_add_to_cart_button
 *       { min-width: 100%; border-radius: 9px }
 *
 * The main Add to cart button. Measured full width at 345px with style.css in
 * place and 151px without it, so the page's one conversion critical control
 * became a small button beside empty space. Flatsome sizes that button to its
 * label; the full width came from here.
 */
body .product-summary .single_add_to_cart_button {
	min-width: 100%;
	border-radius: 9px;
}

/*
 * From: .product-summary .woocommerce-Price-currencySymbol { all: unset }
 *
 * WooCommerce wraps the currency symbol in its own span, and something in the
 * stack renders it smaller and raised, so the product page price read as CA$
 * floating above and left of 81.42 rather than as one figure. "all: unset" is
 * blunt and it is what was there; it works because the symbol should inherit
 * from the price around it and nothing else.
 *
 * This matters more than it looks: the currency symbol is part of every price on
 * a store selling in both CAD and USD.
 */
body .product-summary .woocommerce-Price-currencySymbol {
	all: unset;
}

/*
 * From: .product-stacked-info .breadcrumbs { display: none }
 *
 * The product page carries two breadcrumb trails: Flatsome's in the stacked info
 * block, and the one above the title. With this gone both rendered, so the page
 * opened with Jewelry then Necklaces twice over in different type.
 */
body .product-stacked-info .breadcrumbs {
	display: none;
}

/*
 * From: .product-stacked-info .woocommerce-Price-amount { font-size: 20px },
 *       .product-stacked-info .product-title,
 *       .product-stacked-info .woocommerce-product-rating
 *         { margin: unset !important },
 *       .product-summary .quantity { display: inline-flex !important }
 */
body .product-stacked-info .woocommerce-Price-amount {
	font-size: 20px;
}

body .product-stacked-info .product-title,
body .product-stacked-info .woocommerce-product-rating {
	margin: unset !important;
}

body .product-summary .quantity {
	display: inline-flex !important;
}

/* ==========================================================================
 * Checkout and cart, things that should stay hidden
 * ========================================================================== */

/*
 * From: .ppcp-messages, .woocommerce-additional-fields, .woocs_add_field
 *
 * Three blocks other plugins insert into the checkout that this store does not
 * use: PayPal's pay later messaging, WooCommerce's additional fields area, and
 * the currency switcher's extra field. The last one measured 100x50 and appeared
 * on both the cart and the checkout once the child theme stopped hiding it.
 *
 * Adopted because the checkout is what this plugin is for. Hidden rather than
 * unhooked, as the original did it, because the markup belongs to those plugins
 * and an upgrade may rename the hook but will keep the class.
 */
body .ppcp-messages,
body .woocommerce-additional-fields,
body .woocs_add_field {
	display: none !important;
}