/*
Theme Name: Prerogatives Child
Theme URI: https://www.prerogatives.online/
Description: Child theme of Hello Elementor for the Prerogatives wholesale store. Holds the wholesale logic (inc/) and the small amount of CSS Elementor cannot do. Layout is built in Elementor.
Author: Prerogatives
Template: hello-elementor
Version: 0.11.4
Requires PHP: 8.1
Text Domain: prerogatives-child
*/

/* Rainbow stripe under the header and above the footer. */
.prg-rainbow {
	height: 3px;
	min-height: 3px;
	width: 100%;
	background: linear-gradient(90deg, #E40303 0 16.66%, #FF8C00 0 33.33%, #FFED00 0 50%, #008026 0 66.66%, #004DFF 0 83.33%, #750787 0);
}

/* Header: the search box fills the space between the logo and the account links. */
.prg-header-search { min-width: 0; }
.prg-header-search .elementor-shortcode { display: flex; }
.prg-header .prg-search { width: 100%; }
.prg-logo a, .prg-logo a:hover { color: inherit; text-decoration: none; }
.prg-header .elementor-shortcode { line-height: 1; }
.prg-topbar .elementor-shortcode { line-height: 1.4; }
.prg-catbar .elementor-heading-title a:hover { color: var(--e-global-color-primary); }

/* Footer links keep the footer colours instead of the site link colour. */
.prg-footer__legal a { color: inherit; }
.prg-footer__legal a:hover { color: var(--e-global-color-prgpapr); }
.prg-footer .elementor-widget-text-editor p { margin: 0; }

/* Component links and buttons keep their own colours over the site link colour. */
body a.prg-btn, body a.prg-btn:hover { color: #fff; text-decoration: none; }
body a.prg-btn--ghost, body a.prg-btn--ghost:hover, body a.prg-btn--outline { color: var(--ink); }
body a.prg-btn--outline:hover { color: #fff; }
body a.prg-btn--danger, body a.prg-btn--danger:hover { color: var(--bad); }
body a.prg-btn--ghost.is-current { color: var(--accent-deep); }
body a.prg-actions__link { color: var(--ink); }
body a.prg-actions__link:hover { color: var(--accent); text-decoration: none; }
body .prg-topbar a { color: #fff; }
body .prg-drawer__links a { color: var(--ink); }
body .prg-search input[type="search"] { border: 0; box-shadow: none; background: transparent; padding: 0; min-height: 0; border-radius: 0; }
body .prg-btn { font-family: inherit; }

/* Elements that only guests or only logged-in customers should see. */
.prg-logged-in .prg-guest-only, .prg-guest .prg-member-only { display: none !important; }

/* The header search field has no border of its own; the wrapper carries it. */
body .prg-search input[type="search"] { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; border-radius: 0 !important; }

/* Placeholder where a client photo goes. Replace the container with an Image widget. */
.prg-photo-ph { background: repeating-linear-gradient(135deg, #f1efeb 0 12px, #e9e6e0 12px 24px); }
.prg-photo-ph__label .elementor-heading-title { display: inline-block; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .9); }

/* Product archive: result count and sort on one row. */
.prg-sortbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.prg-sortbar .woocommerce-result-count, .prg-sortbar .woocommerce-ordering { float: none; margin: 0; }

/* Product rows built with the Loop Item template. */
.prg-row-list .e-loop-item:last-child > .e-con { border-bottom-width: 0; }
.prg-row-list .elementor-loop-container { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.prg-loop-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: repeating-linear-gradient(135deg, #f1efeb 0 6px, #e9e6e0 6px 12px); }
.prg-loop-title .elementor-heading-title a { color: inherit; }
.prg-loop-title .elementor-heading-title a:hover { color: var(--accent); }
.elementor-widget-shortcode .prg-card__meta, .elementor-widget-shortcode .prg-card__codes { margin: 0; }
.prg-loop-price .price { margin: 0; }

/* Product page price: wholesale struck through, large tier price. */
.prg-pdp__price .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.prg-pdp__price .price del { font-size: 16px; font-weight: 500; }
.prg-pdp__price .price small { font-size: 13px; font-weight: 600; color: var(--muted); }
@media (max-width: 767px) {
	.prg-row-list .elementor-loop-container { background: none; border: 0; border-radius: 0; overflow: visible; }
}

/* Home hero: the barcode drawing in the "Scan to find" card. */
.prg-barcode-demo { position: relative; }
.prg-barcode-demo::before { content: ""; position: absolute; inset: 10px 14px; background: repeating-linear-gradient(90deg, #17141f 0 2px, transparent 2px 4px, #17141f 4px 7px, transparent 7px 9px, #17141f 9px 10px, transparent 10px 13px, #17141f 13px 15px, transparent 15px 19px); }
.prg-barcode-demo::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: #e40303; }

/* Cards that are links keep the text colour of their headings. */
a.e-con, a.e-con:hover { text-decoration: none; }
a.e-con:hover { border-color: var(--line-strong); }

/* Product card (grid): the buy area fills the card width. */
.prg-card-buy-wide .prg-card__buy { justify-content: stretch; }
.prg-card-buy-wide .prg-card__buy > * { width: 100%; }
.prg-card-buy-wide .prg-add .prg-btn { flex: 1; }

/* My Account: the two-column layout comes from .prg-account, not from WooCommerce floats. */
html body .prg-account .woocommerce-MyAccount-navigation, html body .prg-account .woocommerce-MyAccount-content { float: none; width: auto; }
html body .prg-el-account .woocommerce::before, html body .prg-el-account .woocommerce::after { content: none; }

/* QA 0.8.0: small screens. */
html body .prg-split > * { min-width: 0; }
@media (max-width: 899px) {
	html body .prg-split { grid-template-columns: minmax(0, 1fr); }
	html body .prg-search .prg-btn--sm { height: 40px; }
	html body .prg-header-search { flex-basis: 100%; }
}
@media (max-width: 767px) {
	html body .prg-footer__legal a { display: inline-block; padding: 12px 2px; }
	html body .prg-loop-title .elementor-heading-title a { display: inline-block; padding: 4px 0; }
}

/*
 * Tablet widths. With the widescreen breakpoint on, Elementor writes a container's desktop
 * width after its tablet width, so the tablet value never applies. These two classes set it.
 */
@media (max-width: 1024px) and (min-width: 768px) {
	html body .elementor .e-con.prg-t-full.prg-t-full { --width: 100%; }
	html body .elementor .e-con.prg-t-half.prg-t-half { --width: calc(50% - 18px); }
}
@media (max-width: 1024px) {
	html body .prg-burger { display: inline-flex; }
}
html body .prg-form fieldset, html body .prg-upload { min-width: 0; }
html body .prg-upload__text { min-width: 0; }

/* QA 0.8.2 */
@media (max-width: 1024px) {
	html body .prg-header .prg-burger { display: inline-flex; }
	html body .prg-header .prg-actions { margin-left: auto; }
}
html body .prg-row-list .elementor-loop-container { grid-template-columns: minmax(0, 1fr); }
html body .prg-row-list .e-loop-item, html body .prg-row-list .e-loop-item .e-con { min-width: 0; }

/* QA 0.8.3: cart coupon button text, filter group headings. */
html body .prg-el-cart .coupon .button, html body .prg-el-cart button[name="apply_coupon"] { color: var(--ink); background: var(--paper); border-color: var(--line-strong); }
html body .prg-filters__group h3 { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }

/* Search box suggestions: recent searches and recommended products. */
html body .prg-search { position: relative; }
html body .prg-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; max-height: 70vh; overflow-y: auto; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); text-align: left; }
html body .prg-suggest[hidden] { display: none; }
html body .prg-suggest__head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
html body .prg-suggest__head button { height: auto; padding: 4px 6px; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
html body .prg-suggest ul { list-style: none; margin: 0 0 4px; padding: 0; }
html body .prg-suggest li a, html body .prg-suggest li button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; height: auto; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 14.5px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; white-space: normal; }
html body .prg-suggest li a:hover, html body .prg-suggest li button:hover, html body .prg-suggest li a:focus-visible, html body .prg-suggest li button:focus-visible { background: var(--accent-soft); color: var(--accent-deep); }
html body .prg-suggest li img { width: 36px; height: 36px; flex: none; border-radius: 6px; object-fit: cover; background: var(--stone); }
html body .prg-suggest li span { flex: 1; min-width: 0; }
html body .prg-suggest li small { flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* 0.10.0: login card, cart and checkout from the theme templates, search panel above the category bar. */
html body .prg-login__card .prg-form .prg-field { flex: 0 0 auto; }
html body .prg-login__card form.login { border: 0; padding: 0; margin: 10px 0 0; border-radius: 0; }
html body .prg-login__card { border-radius: 20px; padding: clamp(22px, 4vw, 34px); gap: 6px; }
html body .prg-login__card h1 { font-size: 28px; letter-spacing: -.6px; }
html body .prg-login__card input[type="text"], html body .prg-login__card input[type="password"] { height: 48px; }
html body .prg-login { margin-top: 24px; }
/* The header rows inherit the header z-index (40); the row with the search box must sit above the category bar. */
html body .elementor .e-con.prg-mainbar { --z-index: 60; position: relative; z-index: 60; }
html body .prg-el-cart .woocommerce, html body .prg-el-checkout .woocommerce { width: 100%; }
html body .prg-el-cart .prg-cart .quantity .qty { width: 100%; min-height: 38px; text-align: center; }
html body .prg-empty__icon svg { width: 34px; height: 34px; }

/* 0.10.2: cart lines, checkout order table, small headings. */
html body .prg-trow .is-main.prg-line { flex-direction: row; align-items: center; justify-content: flex-start; }
html body .h-sm { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
html body .h-xl { font-size: clamp(34px, 5vw, 52px); letter-spacing: -1.4px; line-height: 1.05; }
html body .woocommerce table.shop_table { border: 0; margin: 0; border-radius: 0; }
html body .woocommerce table.shop_table > * > tr > th, html body .woocommerce table.shop_table > * > tr > td { border-width: 0 0 1px; border-style: solid; border-color: var(--line-soft); background: transparent; padding: 10px 0; }
html body .woocommerce table.shop_table .order-total th, html body .woocommerce table.shop_table .order-total td { border-bottom: 0; }
html body .woocommerce-checkout #payment { background: transparent; border-radius: 0; }
html body .woocommerce-checkout #payment ul.payment_methods { border: 0; padding: 0; }

/* 0.11.0: product page. The zoom button stays under the sticky header; quantity stepper; specifications. */
html body .woocommerce-product-gallery { position: relative; z-index: 0; }
html body .woocommerce-product-gallery .woocommerce-product-gallery__trigger { z-index: 2; }
html body .prg-stepper input[type="number"] { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0 !important; padding: 0 !important; text-align: center; }
html body .prg-specs { margin: 0; display: flex; flex-direction: column; }
html body .prg-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
html body .prg-specs div:last-child { border-bottom: 0; padding-bottom: 0; }
html body .prg-specs div:first-child { padding-top: 0; }
html body .prg-specs dt { color: var(--muted); font-weight: 500; }
html body .prg-specs dd { margin: 0; font-weight: 600; text-align: right; color: var(--ink); }
html body .elementor-widget-woocommerce-product-content p:last-child { margin-bottom: 0; }
html body .prg-stepper button { color: var(--ink); background: transparent; border: 0; padding: 0; font-weight: 600; }
html body .prg-stepper button:hover { color: var(--accent); background: var(--stone); }

/* 0.11.2: mobile. Menu button icon, product grids that pushed the page wider than the screen. */
html body .prg-header .prg-burger { padding: 0; border: 0; background: transparent; color: var(--ink); }
html body .prg-burger svg { width: 22px; height: 22px; flex: none; }
html body .prg-icon-btn { padding: 0; color: var(--ink); }
html body .elementor-loop-container > .e-loop-item, html body .e-loop-item .e-con, html body .e-loop-item .elementor-widget { min-width: 0; }
html body .e-loop-item .prg-card__codes { white-space: normal; overflow-wrap: anywhere; }
html body .woocommerce-product-gallery { overflow: hidden; max-width: 100%; }
html body .prg-barcode-demo { overflow: hidden; }

/* 0.11.3: My Account on small screens stays inside the screen. */
html body .prg-account > *, html body .prg-grid-2 > *, html body .prg-account__content > * { min-width: 0; }
@media (max-width: 1099px) {
	html body .prg-account { grid-template-columns: minmax(0, 1fr); }
	html body .prg-acnav { max-width: 100%; overflow: hidden; }
}

/* 0.11.4: WooCommerce's show/hide password button sits inside the field as an eye icon. */
html body .password-input { position: relative; display: block; }
html body .password-input input { width: 100%; padding-right: 48px; }
html body .password-input .show-password-input,
html body .password-input .show-password-input:hover,
html body .password-input .show-password-input:focus {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	width: 36px; height: 36px; min-height: 0; padding: 0; margin: 0;
	border: 0; border-radius: 8px; box-shadow: none; cursor: pointer;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
html body .password-input .show-password-input:hover { background-color: var(--stone); }
html body .password-input .show-password-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html body .password-input .show-password-input.display-password { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E"); }
html body .password-input .show-password-input::before, html body .password-input .show-password-input::after { content: none; }