/* Add to Cart confirmation popup + Buy Now button. Colours come from :root vars set by
   Woo_Dash_Buy_Now_Add_To_Cart::maybe_enqueue() (Settings -> Buy Now -> Add to Cart). */

/* Buy Now button (the separate one beside WooCommerce's own Add to Cart).
   Colours are the ones chosen in Settings -> Buy Now -> Add to Cart. They are
   !important on purpose: themes style ".button.alt" with far more specific
   selectors, and without it the admin's colour choice would silently not apply. */
.wd-buynow-btn {
	background: var(--wd-bn-bg, #7239ea) !important;
	color: var(--wd-bn-text, #fff) !important;
	border: 0;
	cursor: pointer;
	margin-left: 0;
	margin-inline-start: 0;
	transition: opacity .15s ease;
}
/* The button's own typography and size, exactly as before - for every store
   whose profile does not have "Buy Now matches Add to Cart" (body.wd-bn-theme-type).
   :where() keeps the specificity at (0,1,0), the same as the plain .wd-buynow-btn
   rule it replaces, so the cascade against the theme's .button styles is
   unchanged. With the feature on, the button has no typography of its own and
   takes the theme's .button styles, so it always matches Add to Cart. */
:where(body:not(.wd-bn-theme-type)) .wd-buynow-btn {
	font: inherit;
	font-weight: 600;
	text-transform: inherit;
	line-height: 1.2;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 6px;
}
/* "Buy Now on its own line" (body.wd-bn-own-line, store profile feature):
   a full-width button on its own row under the quantity + Add to Cart row.
   Themes lay the product form out as one flex row; flex-basis 100% plus the wrap
   rule pushes it to a second line, and width 100% does the same where the form
   is a plain block. */
body.wd-bn-own-line .wd-buynow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	order: 99;
	/* No extra top margin: the theme's cart-actions row already has a gap between
	   its items (the same space that sits between the quantity box and Add to
	   Cart), so Buy Now sits that same distance below them. */
	margin-top: 0;
}
/* A form without the theme's gapped cart-actions wrapper has no gap of its own,
   so give it the same 10px. */
body.wd-bn-own-line form.cart:not(:has(.ct-cart-actions)) .wd-buynow-btn {
	margin-top: 10px;
}
body.wd-bn-own-line form.cart:has(> .wd-buynow-btn),
body.wd-bn-own-line .woocommerce-variation-add-to-cart:has(> .wd-buynow-btn),
body.wd-bn-own-line .wd-buynow-row { flex-wrap: wrap !important; }
/* Quantity box with the same rounded corners as Add to Cart / Buy Now
   (body.wd-qty-radius, store profile feature "qty_radius"). Blocksy rounds the
   quantity input - and works out the +/- controls' radius - from
   --theme-form-field-border-radius. Pointing that variable, on the quantity
   wrapper only, at the theme's BUTTON radius (the variable the two buttons use)
   makes the box match them exactly, whatever the theme setting is, and lets the
   theme scale the inner controls itself. Other form fields are not affected. */
body.wd-qty-radius form.cart .quantity {
	--theme-form-field-border-radius: var(--theme-button-border-radius, 12px);
}
/* Paw print on the Add to Cart button (body.wd-btn-icons, store profile feature
   "btn_icons"). An absolutely positioned pseudo-element, so the button label stays
   exactly where it was - centred. A single-colour SVG mask painted with the
   button's own text colour. ::after is used because
   Blocksy keeps ::before on every button for its hover-shadow effect. */
body.wd-btn-icons form.cart .single_add_to_cart_button,
body.wd-btn-icons form.cart .wd-buynow-btn {
	position: relative;
}
body.wd-btn-icons form.cart .single_add_to_cart_button::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='4.6' cy='11' rx='2' ry='2.7' transform='rotate(-20 4.6 11)'/%3E%3Cellipse cx='9' cy='5.9' rx='2.1' ry='2.9' transform='rotate(-8 9 5.9)'/%3E%3Cellipse cx='15' cy='5.9' rx='2.1' ry='2.9' transform='rotate(8 15 5.9)'/%3E%3Cellipse cx='19.4' cy='11' rx='2' ry='2.7' transform='rotate(20 19.4 11)'/%3E%3Cpath d='M12 11.2c-3 0-6 2.8-6 5.6 0 2 1.5 3.2 3.2 3.2 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.7 0 3.2-1.2 3.2-3.2 0-2.8-3-5.6-6-5.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='4.6' cy='11' rx='2' ry='2.7' transform='rotate(-20 4.6 11)'/%3E%3Cellipse cx='9' cy='5.9' rx='2.1' ry='2.9' transform='rotate(-8 9 5.9)'/%3E%3Cellipse cx='15' cy='5.9' rx='2.1' ry='2.9' transform='rotate(8 15 5.9)'/%3E%3Cellipse cx='19.4' cy='11' rx='2' ry='2.7' transform='rotate(20 19.4 11)'/%3E%3Cpath d='M12 11.2c-3 0-6 2.8-6 5.6 0 2 1.5 3.2 3.2 3.2 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.7 0 3.2-1.2 3.2-3.2 0-2.8-3-5.6-6-5.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	transition: opacity .15s ease;
}
/* While the add is in flight WooCommerce would put its spinner in ::after; the
   paw steps aside instead (the button itself dims, see .wd-atc-loading). */
body.wd-btn-icons form.cart .single_add_to_cart_button.loading::after,
body.wd-btn-icons form.cart .single_add_to_cart_button.wd-atc-loading::after {
	opacity: 0;
}
/* (The running dog on Buy Now was removed - only the paw on Add to Cart remains.) */
.wd-buynow-btn:hover { opacity: .88; }
.wd-buynow-btn:focus-visible { outline: 3px solid var(--wd-bn-bg, #7239ea); outline-offset: 2px; }
/* Mirrors WooCommerce's "disabled" look while no variation is chosen; still clickable. */
.wd-buynow-btn.disabled { opacity: .55; }
/* WooCommerce's own add-to-cart button while the request is in flight. */
.wd-atc-loading { opacity: .6; cursor: progress; pointer-events: none; }
/* Popup */
html.wd-atc-lock { overflow: hidden; }
.wd-atc-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, .55);
	animation: wd-atc-fade .15s ease;
}
.wd-atc-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 22px 20px 20px;
	background: #fff;
	color: #111827;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
	animation: wd-atc-pop .18s ease;
}
.wd-atc-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #6b7280;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.wd-atc-head { display: flex; align-items: center; gap: 10px; margin: 0 28px 16px 0; }
.wd-atc-heading { margin: 0; font-size: 18px; font-weight: 700; color: #111827; }

.wd-atc-product {
	display: flex;
	gap: 12px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}
.wd-atc-product-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; background: #f3f4f6; }
.wd-atc-product-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wd-atc-product-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.wd-atc-product-variation { font-size: 12.5px; color: #6b7280; }
.wd-atc-product-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-top: auto; }
.wd-atc-product-qty { color: #6b7280; }
.wd-atc-product-price { font-weight: 600; }

.wd-atc-summary {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 14px 2px 0;
	font-size: 13.5px;
	color: #4b5563;
}

.wd-atc-summary-count { color: #6b7280; }
.wd-atc-summary-total strong { color: #111827; font-weight: 700; }

.wd-atc-paw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff4e0;
	color: #d97706;
}
.wd-atc-paw::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='4.6' cy='11' rx='2' ry='2.7' transform='rotate(-20 4.6 11)'/%3E%3Cellipse cx='9' cy='5.9' rx='2.1' ry='2.9' transform='rotate(-8 9 5.9)'/%3E%3Cellipse cx='15' cy='5.9' rx='2.1' ry='2.9' transform='rotate(8 15 5.9)'/%3E%3Cellipse cx='19.4' cy='11' rx='2' ry='2.7' transform='rotate(20 19.4 11)'/%3E%3Cpath d='M12 11.2c-3 0-6 2.8-6 5.6 0 2 1.5 3.2 3.2 3.2 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.7 0 3.2-1.2 3.2-3.2 0-2.8-3-5.6-6-5.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='4.6' cy='11' rx='2' ry='2.7' transform='rotate(-20 4.6 11)'/%3E%3Cellipse cx='9' cy='5.9' rx='2.1' ry='2.9' transform='rotate(-8 9 5.9)'/%3E%3Cellipse cx='15' cy='5.9' rx='2.1' ry='2.9' transform='rotate(8 15 5.9)'/%3E%3Cellipse cx='19.4' cy='11' rx='2' ry='2.7' transform='rotate(20 19.4 11)'/%3E%3Cpath d='M12 11.2c-3 0-6 2.8-6 5.6 0 2 1.5 3.2 3.2 3.2 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.7 0 3.2-1.2 3.2-3.2 0-2.8-3-5.6-6-5.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.wd-atc-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	/* A fixed element centred with left:50% is only offered half the screen to be
	   as wide as its text, so it wrapped into a narrow column. Size it to its
	   content instead, up to a comfortable maximum. */
	width: max-content;
	max-width: min(440px, calc(100vw - 32px));
	box-sizing: border-box;
}
.wd-atc-toast::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: #fbbf24;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='4.6' cy='11' rx='2' ry='2.7' transform='rotate(-20 4.6 11)'/%3E%3Cellipse cx='9' cy='5.9' rx='2.1' ry='2.9' transform='rotate(-8 9 5.9)'/%3E%3Cellipse cx='15' cy='5.9' rx='2.1' ry='2.9' transform='rotate(8 15 5.9)'/%3E%3Cellipse cx='19.4' cy='11' rx='2' ry='2.7' transform='rotate(20 19.4 11)'/%3E%3Cpath d='M12 11.2c-3 0-6 2.8-6 5.6 0 2 1.5 3.2 3.2 3.2 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.7 0 3.2-1.2 3.2-3.2 0-2.8-3-5.6-6-5.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='black'%3E%3Cellipse cx='4.6' cy='11' rx='2' ry='2.7' transform='rotate(-20 4.6 11)'/%3E%3Cellipse cx='9' cy='5.9' rx='2.1' ry='2.9' transform='rotate(-8 9 5.9)'/%3E%3Cellipse cx='15' cy='5.9' rx='2.1' ry='2.9' transform='rotate(8 15 5.9)'/%3E%3Cellipse cx='19.4' cy='11' rx='2' ry='2.7' transform='rotate(20 19.4 11)'/%3E%3Cpath d='M12 11.2c-3 0-6 2.8-6 5.6 0 2 1.5 3.2 3.2 3.2 1 0 1.8-.5 2.8-.5s1.8.5 2.8.5c1.7 0 3.2-1.2 3.2-3.2 0-2.8-3-5.6-6-5.6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.wd-atc-limit-text { margin: 0 2px; font-size: 15px; line-height: 1.5; color: #374151; }
.wd-atc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.wd-atc-btn-secondary,
.wd-atc-btn-primary {
	flex: 1 1 120px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.wd-atc-btn-secondary { background: #fff; color: #111827; border: 1px solid #d1d5db; }
.wd-atc-btn-secondary:hover { background: #f9fafb; }
.wd-atc-btn-primary { background: var(--wd-atc-accent, #7239ea); color: var(--wd-atc-accent-text, #fff); border: 1px solid var(--wd-atc-accent, #7239ea); }
.wd-atc-btn-primary:hover { opacity: .9; }
.wd-atc-close:focus-visible,
.wd-atc-btn-secondary:focus-visible,
.wd-atc-btn-primary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* Error toast */
.wd-atc-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 2147483000; /* above the theme's off-canvas panels (side cart, menu) */
	max-width: calc(100% - 32px);
	padding: 12px 18px;
	background: #1f2937;
	color: #fff;
	font-size: 14px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	transform: translate(-50%, 20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.wd-atc-toast-show { opacity: 1; transform: translate(-50%, 0); }

@keyframes wd-atc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wd-atc-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.wd-atc-overlay, .wd-atc-modal { animation: none; }
	.wd-atc-toast { transition: none; }
}
@media (max-width: 480px) {
	.wd-atc-overlay { align-items: flex-end; padding: 0; }
	.wd-atc-modal { max-width: none; border-radius: 16px 16px 0 0; }
}

/* Reviews tab as a cute bone (body.wd-bone-tab, store-profile feature "bone_tab").
   The tab label is the shaft; two big knobs at each end are masked circles painted
   with the shaft's own background (theme colour), so no colour is hard-coded. A
   chunky offset shadow, a slight tilt and a springy hover keep it playful. */
body.wd-bone-tab .woocommerce-tabs ul.tabs li.reviews_tab,
body.wd-bone-tab .woocommerce-tabs ul.tabs li.reviews_tab.active {
	overflow: visible !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 12px 0 16px !important;
	margin: 0 !important;
	transform: rotate(-.7deg);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
body.wd-bone-tab .woocommerce-tabs ul.tabs li.reviews_tab:hover {
	transform: rotate(.7deg) scale(1.025);
}
body.wd-bone-tab li.reviews_tab::before,
body.wd-bone-tab li.reviews_tab::after {
	display: none !important;
}
body.wd-bone-tab li.reviews_tab > a {
	position: relative;
	margin: 0 22px !important;
	height: 42px !important;
	min-height: 0 !important;
	padding: 0 !important;
	line-height: 42px !important;
	border-radius: 9px !important;
	text-align: center;
	font-weight: 800;
	letter-spacing: .06em;
	box-shadow: none;
	filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2));
}
body.wd-bone-tab li.reviews_tab > a::before,
body.wd-bone-tab li.reviews_tab > a::after {
	content: "";
	display: block !important;
	position: absolute;
	top: -8px !important;
	width: 32px;
	height: 58px !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 1 !important;
	transform: none !important;
	background-color: inherit;
	-webkit-mask: radial-gradient(circle 16px at 16px 16px, #000 97%, transparent 100%), radial-gradient(circle 16px at 16px 42px, #000 97%, transparent 100%);
	mask: radial-gradient(circle 16px at 16px 16px, #000 97%, transparent 100%), radial-gradient(circle 16px at 16px 42px, #000 97%, transparent 100%);
}
body.wd-bone-tab li.reviews_tab > a::before { left: -16px !important; right: auto !important; }
body.wd-bone-tab li.reviews_tab > a::after { right: -16px !important; left: auto !important; }
@media (prefers-reduced-motion: reduce) {
	body.wd-bone-tab .woocommerce-tabs ul.tabs li.reviews_tab { transition: none; }
	body.wd-bone-tab .woocommerce-tabs ul.tabs li.reviews_tab:hover { transform: rotate(-.7deg); }
}

/* The reviews section has no title at all on this store profile: the summary
   label is hidden and, when Reviews is the only tab, so is the bone tab strip
   (the panel itself stays visible; rating, stars, bars and reviews remain). */
body.wd-bone-tab .woocommerce-tabs ul.tabs:not(:has(> li:nth-child(2))) { display: none !important; }

/* Even spacing around the Blocksy content block (description) and the reviews:
   a fixed 23px above the block, and the reviews sit 15px (+8px block padding = 23px) below it (the theme's
   60px tabs padding + 40px panel padding stacked into a ~110px hole). */
body.wd-bone-tab .product-entry-wrapper { margin-bottom: 23px; }
body.wd-bone-tab .woocommerce-tabs.wc-tabs-wrapper { padding-top: 15px !important; }
body.wd-bone-tab .woocommerce-tabs .woocommerce-Tabs-panel { padding-top: 0 !important; margin-top: 0 !important; }