/* GADGET5 — Single Product (unified v1.0). Namespace: .g5p-* only. Brand colors only. */
:root{
	--g5-white:#FFFFFF;
	--g5-bg:#F0F8FF;
	--g5-turquoise:#40E0D0;
	--g5-turquoise-deep:#2bb8ab;
	--g5-text:#2F4F4F;
	--g5-gold:#FFCC33;
	--g5p-strike:#2F4F4F; /* strike-through uses text color, not a 6th color */
	--g5p-line:rgba(47,79,79,.10);
	--g5p-ease:cubic-bezier(.22,1,.36,1);
	--g5p-shadow:0 2px 6px rgba(47,79,79,.06), 0 20px 48px rgba(47,79,79,.12);
}

/* ---------- breadcrumb / default badge / LEGACY subtotal cleanup ----------
   The site has an older/other subtotal renderer somewhere (classes seen
   in the original v38 code: .g5-subtotal-line, .g5-old-calculation,
   .subtotal, .g5c-subtotal) that duplicates the subtotal shown in the
   screenshot. This card is the single source of truth going forward —
   everything else with these classes inside the summary is hidden. */
body.single-product .woocommerce-breadcrumb,
body.single-product nav.woocommerce-breadcrumb,
body.single-product .breadcrumbs,
body.single-product .generate-breadcrumbs,
body.single-product .astra-breadcrumbs,
body.single-product .onsale:not(.g5p-badge),
body.single-product .woocommerce-message,
body.single-product .woocommerce-info,
body.single-product .woocommerce-error,
body.single-product .woocommerce-notices-wrapper,
body.single-product .summary.entry-summary .g5-subtotal-line,
body.single-product .summary.entry-summary .g5-old-calculation,
body.single-product .summary.entry-summary .g5-subtotal-box,
body.single-product .summary.entry-summary .g5-subtotal-wrap,
body.single-product .summary.entry-summary .g5c-subtotal,
body.single-product .summary.entry-summary > div.subtotal,
body.single-product .summary.entry-summary .subtotal:not(.g5p-subtotal-row *),
body.single-product .summary.entry-summary .g5p-subtotal-row ~ .g5p-subtotal-row{
	display:none!important;height:0!important;margin:0!important;padding:0!important;border:0!important;
}

/* ---------- gallery shell ---------- */
body.single-product .woocommerce-product-gallery{position:relative!important;isolation:isolate}

@media(min-width:768px){
	body.single-product .woocommerce-product-gallery__wrapper{
		border-radius:20px!important;overflow:hidden!important;box-shadow:var(--g5p-shadow)!important;
	}
}

.g5p-badge{
	position:absolute!important;top:16px;left:16px;z-index:20;
	display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;
	background:rgba(255,204,51,.92);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	box-shadow:0 10px 22px rgba(255,204,51,.4), inset 0 1px 0 rgba(255,255,255,.6);
	color:var(--g5-text);font-size:12px;font-weight:900;letter-spacing:.01em;white-space:nowrap;
	pointer-events:none;
}

/* ---------- thumbnail rail + directional arrows ---------- */
.g5p-thumb-container{
	position:relative!important;display:flex!important;align-items:center!important;width:100%!important;
	margin:14px 0 0!important;padding:0 38px!important;box-sizing:border-box!important;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs{
	display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:10px!important;
	list-style:none!important;margin:0!important;padding:4px 2px!important;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;width:100%!important;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{display:none!important}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li{flex:0 0 72px!important;width:72px!important;margin:0!important;scroll-snap-align:start}
body.single-product .woocommerce-product-gallery .flex-control-thumbs img{
	display:block!important;width:72px!important;height:72px!important;object-fit:cover!important;border-radius:14px!important;
	background:var(--g5-white)!important;border:1.5px solid var(--g5p-line)!important;opacity:.65!important;
	cursor:pointer!important;transition:opacity .2s ease, transform .2s var(--g5p-ease), border-color .2s ease!important;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1!important}
body.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{
	opacity:1!important;border-color:var(--g5-turquoise)!important;
	box-shadow:0 8px 20px rgba(64,224,208,.4)!important;transform:translateY(-2px)!important;
}

.g5p-thumb-arrow{
	position:absolute!important;top:50%!important;transform:translateY(-50%)!important;z-index:90!important;
	width:28px!important;height:54px!important;border-radius:10px!important;
	display:flex!important;align-items:center!important;justify-content:center!important;
	background:rgba(255,255,255,.96)!important;border:1.8px solid var(--g5-turquoise)!important;
	box-shadow:0 6px 16px rgba(47,79,79,.18), inset 0 1px 0 var(--g5-white)!important;
	cursor:pointer!important;color:var(--g5-text)!important;transition:all .2s ease!important;padding:0!important;
}
.g5p-thumb-arrow:hover{
	background:var(--g5-turquoise)!important;color:var(--g5-white)!important;
	transform:translateY(-50%) scale(1.08)!important;box-shadow:0 8px 22px rgba(64,224,208,.45)!important;
}
.g5p-thumb-arrow--prev{left:0!important}
.g5p-thumb-arrow--next{right:0!important}
.g5p-thumb-arrow svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* ---------- desktop magnifier (side panel zoom — replaces in-place scale zoom) ---------- */
.g5p-magnifier{
	position:fixed;z-index:9999;border-radius:20px;pointer-events:none;background-color:var(--g5-white);
	background-repeat:no-repeat;border:2.5px solid var(--g5-turquoise);
	box-shadow:0 24px 64px rgba(47,79,79,.32), 0 0 0 1px rgba(255,255,255,.9), inset 0 1px 0 rgba(255,255,255,.9);
	opacity:0;visibility:hidden;transition:opacity .15s ease;
	-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.g5p-magnifier.is-visible{opacity:1;visibility:visible}
@media(max-width:992px){.g5p-magnifier{display:none!important}}

/* ================================================================
   PURCHASE PANEL — premium redesign
   Solid white card (not glass), refined radius (not an oversized pill),
   clear visual hierarchy: quantity → primary CTA → secondary CTA →
   subtotal, generous but disciplined spacing throughout.
   ================================================================ */
body.single-product div.product .summary.entry-summary form.cart:not(.variations_form),
body.single-product div.product .summary.entry-summary .woocommerce-variation-add-to-cart{
	position:relative!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
	align-items:stretch!important;gap:12px!important;
	background:var(--g5-white)!important;border:1px solid var(--g5p-line)!important;
	box-shadow:0 1px 2px rgba(47,79,79,.04), 0 18px 40px rgba(47,79,79,.08)!important;
	border-radius:22px!important;padding:22px!important;box-sizing:border-box!important;
	width:100%!important;max-width:460px!important;margin:0 auto!important;
}

/* quantity — refined stepper row */
body.single-product div.product .summary.entry-summary form.cart .quantity{
	order:10!important;display:flex!important;align-items:center!important;
	justify-content:space-between!important;height:52px!important;min-height:52px!important;
	background:var(--g5-bg)!important;border:1px solid var(--g5p-line)!important;
	border-radius:14px!important;padding:0 6px!important;box-sizing:border-box!important;
}
body.single-product form.cart .quantity input.qty{
	width:64px!important;height:100%!important;border:0!important;background:transparent!important;
	font-size:17px!important;font-weight:800!important;text-align:center!important;color:var(--g5-text)!important;
	letter-spacing:-.01em!important;
}

/* Add to Cart — PRIMARY action: confident but not oversized, refined
   radius rather than a full pill, icon + label clearly legible.
   Luxury touch: a soft top highlight (inset glass sheen) + deeper
   layered shadow, GPU-cheap (opacity/transform + static gradient
   only — no continuous animation). */
body.single-product div.product .summary.entry-summary form.cart .single_add_to_cart_button{
	order:20!important;position:relative!important;isolation:isolate;
	display:flex!important;align-items:center;justify-content:center;gap:10px;
	width:100%!important;height:58px!important;min-height:58px!important;padding:0 20px!important;
	border-radius:16px!important;overflow:hidden!important;box-sizing:border-box!important;
	background:linear-gradient(160deg,var(--g5-turquoise) 0%,var(--g5-turquoise-deep) 100%)!important;
	border:0!important;
	box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 22px rgba(64,224,208,.34)!important;
	color:transparent!important;font-size:0!important;
	transition:transform .16s var(--g5p-ease), box-shadow .16s ease, filter .16s ease!important;
}
body.single-product form.cart .single_add_to_cart_button::before{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 55%);
}
.g5p-cart-label{position:relative;z-index:1;color:var(--g5-white)!important;font-size:15.5px!important;font-weight:850!important;letter-spacing:-.01em!important}
body.single-product form.cart .single_add_to_cart_button:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 14px 28px rgba(64,224,208,.42)!important;filter:saturate(1.05)}
body.single-product form.cart .single_add_to_cart_button:active{transform:translateY(0) scale(.985)}
body.single-product form.cart .single_add_to_cart_button:focus-visible{outline:3px solid var(--g5-gold);outline-offset:3px}
.g5p-cart-icon{
	position:relative;z-index:1;width:22px;height:22px;background:var(--g5-white);flex:0 0 22px;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18h10l4.6 7'/%3E%3Cpath d='M30.6 25l8.6 42.6a5.6 5.6 0 0 0 5.5 4.5h27.6a5.6 5.6 0 0 0 5.5-4.5L83.5 34H34'/%3E%3Ccircle cx='43' cy='87' r='6'/%3E%3Ccircle cx='71' cy='87' r='6'/%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 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18h10l4.6 7'/%3E%3Cpath d='M30.6 25l8.6 42.6a5.6 5.6 0 0 0 5.5 4.5h27.6a5.6 5.6 0 0 0 5.5-4.5L83.5 34H34'/%3E%3Ccircle cx='43' cy='87' r='6'/%3E%3Ccircle cx='71' cy='87' r='6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
	transition:transform .3s var(--g5p-ease);
}
body.single-product form.cart .single_add_to_cart_button.g5p-is-added .g5p-cart-icon{
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20 52l18 18 42-42' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%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 100 100'%3E%3Cpath d='M20 52l18 18 42-42' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	transform:scale(1.08);
}
body.single-product form.cart .single_add_to_cart_button.g5p-is-loading{opacity:.65;pointer-events:none}

/* Buy Now — SECONDARY action: same footprint/rhythm as the primary
   button (same radius, same height family) so the pair reads as one
   deliberate system, not two mismatched shapes. Luxury touch: a
   slightly deeper border + faint inner shadow so it doesn't read as
   a plain outline button.
   Class is .g5pro-buy-now (kept from the original source) because
   g5-loop-buy-now-popup.php's own JS listens for that exact class —
   do not rename it. JS also guarantees this button is always a direct
   child of form.cart so this layout can never be escaped by a theme
   wrapper. */
body.single-product div.product .summary.entry-summary form.cart > .g5pro-buy-now{
	order:30!important;position:relative!important;
	display:flex!important;align-items:center;justify-content:center;gap:8px;
	width:100%!important;height:54px!important;min-height:54px!important;padding:0 20px!important;
	border-radius:16px!important;box-sizing:border-box!important;
	background:var(--g5-white)!important;border:1.5px solid rgba(47,79,79,.7)!important;
	box-shadow:0 1px 3px rgba(47,79,79,.05)!important;
	color:var(--g5-text)!important;font-size:15px!important;font-weight:800!important;letter-spacing:-.01em!important;
	white-space:nowrap;cursor:pointer;
	transition:transform .16s var(--g5p-ease), background .16s ease, color .16s ease, border-color .16s ease!important;
}
body.single-product form.cart > .g5pro-buy-now:hover{background:var(--g5-text)!important;border-color:var(--g5-text)!important;color:var(--g5-white)!important;transform:translateY(-1px)}
body.single-product form.cart > .g5pro-buy-now:active{transform:translateY(0) scale(.985)}
body.single-product form.cart > .g5pro-buy-now:focus-visible{outline:3px solid var(--g5-gold);outline-offset:3px}
body.single-product form.cart > .g5pro-buy-now.g5p-is-loading{opacity:.6;pointer-events:none}

/* ---------- subtotal card — ONE line, professional layout. Label on
   the left; old (struck) + final price sit inline together on the
   right, not stacked — single source of truth. Renders via
   woocommerce_after_add_to_cart_form, so it's a sibling of form.cart,
   not nested inside it — same max-width/centering so the two read as
   one connected system. ---------- */
.g5p-subtotal-row{
	display:flex!important;align-items:baseline!important;justify-content:space-between;
	width:100%!important;max-width:460px!important;box-sizing:border-box!important;
	margin:12px auto 0!important;padding:14px 16px!important;border-radius:14px!important;
	background:var(--g5-bg)!important;border:1px solid var(--g5p-line)!important;
}
.g5p-subtotal-row .g5p-sub-label{font-size:13px;font-weight:750;color:rgba(47,79,79,.7);flex:0 0 auto}
.g5p-subtotal-row .g5p-sub-amounts{display:flex!important;align-items:baseline!important;gap:8px;flex:0 0 auto}
.g5p-subtotal-row .g5p-sub-old{
	font-size:13px;font-weight:700;color:rgba(47,79,79,.45);
	text-decoration:line-through;text-decoration-color:var(--g5p-strike);text-decoration-thickness:1.5px;
}
.g5p-subtotal-row .g5p-sub-final{font-size:20px;font-weight:900;color:var(--g5-turquoise-deep);letter-spacing:-.02em}

/* ---------- stock status — brand-safe (turquoise/gold/dark-slate only,
   no red) — sits right under the price, before the purchase panel ---------- */
.g5p-stock{
	display:inline-flex!important;align-items:center;gap:7px;
	margin:6px 0 14px!important;padding:0;
	font-size:13px;font-weight:750;letter-spacing:-.005em;
}
.g5p-stock-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.g5p-stock--in{color:var(--g5-turquoise-deep)}
.g5p-stock--in .g5p-stock-dot{background:var(--g5-turquoise);box-shadow:0 0 0 3px rgba(64,224,208,.18)}
.g5p-stock--low{color:#a9791f} /* darker gold for text legibility on white, dot stays brand gold */
.g5p-stock--low .g5p-stock-dot{background:var(--g5-gold);box-shadow:0 0 0 3px rgba(255,204,51,.25)}
.g5p-stock--out{color:rgba(47,79,79,.55)}
.g5p-stock--out .g5p-stock-dot{background:rgba(47,79,79,.35)}

/* ---------- toast ---------- */
.g5p-toast{
	position:fixed;z-index:99999;left:50%;bottom:max(22px,env(safe-area-inset-bottom));
	transform:translate(-50%,14px);max-width:min(360px,calc(100% - 28px));padding:11px 18px;border-radius:999px;
	background:rgba(47,79,79,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
	color:var(--g5-white);font-size:13px;font-weight:800;text-align:center;
	opacity:0;pointer-events:none;transition:opacity .2s ease, transform .24s var(--g5p-ease);
}
.g5p-toast.g5p-is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
	.single_add_to_cart_button,.g5pro-buy-now,.g5p-cart-icon{transition-duration:.01ms!important}
}

/* ---------- mobile: zero side gaps, full-bleed ---------- */
@media(max-width:767px){
	body.single-product .site-content,
	body.single-product .content-area,
	body.single-product #primary,
	body.single-product .site-main,
	body.single-product .inside-article,
	body.single-product .entry-content,
	body.single-product .grid-container{
		padding-left:0!important;padding-right:0!important;margin:0!important;max-width:100%!important;width:100%!important;
	}
	body.single-product div.product{margin:0!important;padding:0!important}

	body.single-product .woocommerce-product-gallery,
	body.single-product .woocommerce-product-gallery__wrapper{
		margin:0!important;padding:0!important;border-radius:0!important;width:100%!important;
	}
	body.single-product .woocommerce-product-gallery__image img{
		width:100%!important;height:auto!important;border-radius:0!important;display:block!important;
	}

	.g5p-badge{top:12px;left:12px;height:27px;padding:0 12px;font-size:11px}

	.g5p-thumb-container{padding:0 32px!important;margin:10px 0 0!important}
	body.single-product .woocommerce-product-gallery .flex-control-thumbs li{flex:0 0 60px!important;width:60px!important}
	body.single-product .woocommerce-product-gallery .flex-control-thumbs img{width:60px!important;height:60px!important;border-radius:12px!important}

	body.single-product div.product .summary.entry-summary{
		padding:20px 16px 24px!important;margin:0!important;background:var(--g5-white)!important;
		border-top:1px solid var(--g5p-line)!important;
	}
	body.single-product div.product .summary.entry-summary form.cart{
		max-width:100%!important;padding:14px!important;border-radius:20px!important;
	}
	.g5p-subtotal-row{max-width:100%!important;margin:10px 0 6px!important;padding:14px 16px!important;border-radius:16px!important}

	body.single-product .woocommerce-tabs,
	body.single-product .woocommerce-Tabs-panel,
	body.single-product #tab-description,
	body.single-product #tab-additional_information,
	body.single-product #tab-reviews,
	body.single-product div.product > .entry-content{
		padding:24px 18px 32px!important;margin:18px 14px 34px!important;background:var(--g5-white)!important;
		border-radius:22px!important;border:1px solid var(--g5p-line)!important;
		box-shadow:0 6px 24px rgba(47,79,79,.05)!important;line-height:1.75!important;font-size:14.5px!important;
		box-sizing:border-box!important;
	}
}