/* connect-product.css — Connect single-product (D1, owner-approved 2026-07-30)
 *
 * WOO-INTEGRATED cascade-override. Woostify + WooCommerce core CSS stays loaded
 * (no dequeue); this file layers the approved D1 design on top of the native
 * Woostify single-product DOM. Native gallery, add-to-cart, variations, tabs,
 * related and cart AJAX keep working — only presentation is overridden.
 *
 * Design source: 05-design/mockups/product-page/2026-07-30-D1-approved/connect-product-D1.html
 *                Every rule below maps to a selector that exists in the RENDERED
 *                mockup MARKUP (never its unused CSS — see
 *                INCIDENT-PRODUCT-D1-PHANTOM-SPEC-01).
 * Brand tokens:  .claude/skills/connect-website-page-builder/references/01-brand-tokens.md
 *
 * Scoping: rules are namespaced under body.single-product / .connect-product-wrap
 * so they never leak to shop, cart, checkout, or blog. !important is used only
 * to beat Woostify's own specific selectors (same convention as connect-shop.css).
 *
 * @package Connect\Product
 * @version  1.1.0
 */

/* =========================================================
   CONNECT BRAND TOKENS — verbatim from 01-brand-tokens.md
   (connect-home.css already defines these; repeated here so this
   file is self-documenting and robust if load order shifts.)
   ========================================================= */
:root {
	--base:    #F7F2E9;
	--surface: #EFE8DA;
	--elev:    #FCF8F0;
	--neon:    #C8902F;
	--amber:   #C8902F;
	--grad-top: #B97338;
	--grad-mid: #C67E34;
	--grad-bot: #D49445;
	--logo-grad: linear-gradient(180deg,#B97338,#C67E34 55%,#D49445);
	--node-l: #E7B86A;
	--node-d: #AB5E2A;
	--w:   #563F25;
	--w70: #64492B;
	--w50: #7F5E39;
	--w30: rgba(86,63,37,.42);
	--line: rgba(86,63,37,.20);
	--neon-glow:   rgba(200,144,47,.28);
	--neon-dim:    rgba(200,144,47,.12);
	--neon-border: rgba(200,144,47,.45);
	--amber-glow:  rgba(200,144,47,.26);
	--amber-dim:   rgba(200,144,47,.12);
	--bd:   1.5px;
	--r:    16px;
	--r-sm: 12px;
}

/* =========================================================
   ROOT FONT-SIZE — the D1 mockup renders at the browser-default
   16px root; Woostify sets a 14px root, silently deflating EVERY
   rem-based size on the page by 12.5% (measured 2026-08-01:
   price 30.1px vs 34.4px, section H2 35px vs 40px, etc.).
   html.connect-pdp is stamped by single-product.php's early inline
   script; :has() covers the no-JS path on modern browsers.
   ========================================================= */
html.connect-pdp{font-size:16px!important}
html:has(body.single-product){font-size:16px!important}

/* =========================================================
   PAGE BACKGROUND + TYPE BASE
   Woostify ships a white/grey product page (D0 capture 2026-07-28)
   and paints .product-page-container #f3f3f3 via customizer CSS;
   override to the locked warm cream + Connect fonts.
   ========================================================= */
body.single-product{
	background:var(--base)!important;
	color:var(--w)!important;
	font-family:'Outfit',sans-serif!important;
}
body.single-product .content-top,
body.single-product .product-page-container{background-color:transparent!important}
/* Mockup main{padding-top:126px} — clear the fixed Connect nav. */
body.single-product #content.site-content{padding-top:126px!important}
/* Woostify's site container caps content at 1170px; the D1 layout is built
   on the 1240px wrap (1192px content). Each Connect section carries its own
   max-width, so the generic container must not constrain them. */
body.single-product #content .woostify-container,
body.single-product #primary.content-area{
	max-width:none!important;width:100%!important;
	padding-left:0!important;padding-right:0!important;
}

/* =========================================================
   NAV — canonical Connect chrome, ported VERBATIM from
   connect-shop.css (proven against the Woostify stack there;
   connect-home.css alone leaves .nav-tools mispositioned on
   Woo-integrated pages — measured 2026-08-01: search pill and
   icons rendered over the gallery). px values on purpose:
   immune to root font-size differences.
   ========================================================= */
body.single-product .nav-bg{position:fixed;inset:0 0 auto 0;height:74px;z-index:99;
	transition:background .3s,border-color .3s}
body.single-product .nav-bg.scrolled{background:rgba(247,242,233,.95)}

body.single-product.nav-shrink nav[aria-label="Primary"]{height:60px}
body.single-product.nav-shrink .nav-bg{height:60px;box-shadow:0 10px 30px -20px rgba(86,63,37,.5)}

body.single-product nav[aria-label="Primary"]{
	position:fixed;top:0;left:0;right:0;height:74px;z-index:100;
	display:grid;grid-template-columns:auto 1fr auto;align-items:center;
	gap:24px;padding:0 24px;max-width:1240px;margin:0 auto;
	transition:height .3s cubic-bezier(.4,0,.2,1);
}
body.single-product .logo svg{height:clamp(44px,4.5vw,54px);width:auto;display:block}

body.single-product .nav-links{display:flex;gap:35.2px;align-items:center;justify-content:center}
body.single-product .nav-links a{
	font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:14.4px;
	letter-spacing:.14em;text-transform:uppercase;color:var(--w);
	text-decoration:none;transition:color .2s;position:relative;
}
body.single-product .nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1.5px;
	background:var(--neon);transition:width .3s}
body.single-product .nav-links a:hover,
body.single-product .nav-links a.current{color:var(--neon)}
body.single-product .nav-links a:hover::after,
body.single-product .nav-links a.current::after{width:100%}

body.single-product .nav-tools{display:flex;align-items:center;gap:11.2px}
body.single-product .nav-search{
	display:flex;align-items:center;gap:6.4px;border-radius:999px;background:var(--elev);
	border:var(--bd) solid var(--line);padding:5.6px 12.8px;
	width:188px;transition:width .3s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .25s;
}
body.single-product .nav-search:focus-within{width:248px;border-color:var(--neon-border);
	box-shadow:0 0 0 4px var(--neon-dim)}
body.single-product .nav-search svg{width:16px;height:16px;stroke:var(--w50);stroke-width:2;fill:none;flex-shrink:0}
body.single-product .nav-search input[type="search"]{
	background:transparent;border:none;outline:none;font-family:'Outfit',sans-serif;
	font-size:13.6px;color:var(--w);width:100%;
}
body.single-product .nav-search input::placeholder{color:var(--w50)}

body.single-product .nav-ic{
	width:40px;height:40px;border-radius:50%;border:var(--bd) solid var(--line);
	background:var(--elev);display:flex;align-items:center;justify-content:center;
	color:var(--w);transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;
}
body.single-product .nav-ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
body.single-product .nav-ic:hover{border-color:var(--neon);transform:translateY(-2px);box-shadow:0 8px 18px -10px var(--neon-glow)}

body.single-product .nav-badge{
	position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:50%;
	background:var(--neon);color:#231A0A;font-family:'Space Grotesk',sans-serif;
	font-size:9.6px;font-weight:700;display:flex;align-items:center;justify-content:center;
	border:2px solid var(--elev);animation:cp-navpop .5s cubic-bezier(.34,1.56,.64,1) .35s both;
}
@keyframes cp-navpop{0%{transform:scale(0)}100%{transform:scale(1)}}

body.single-product .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:101}
body.single-product .hamburger span{display:block;width:24px;height:2.5px;background:var(--w);border-radius:2px;transition:transform .3s,opacity .3s}
body.single-product .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.single-product .hamburger.open span:nth-child(2){opacity:0}
body.single-product .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

body.single-product .mobile-menu{display:none;position:fixed;inset:0;background:rgba(247,242,233,.98);
	z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:38.4px}
body.single-product .mobile-menu.open{display:flex}
body.single-product .mobile-menu a{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;
	color:var(--w);text-decoration:none}
body.single-product .mobile-menu a:hover{color:var(--neon)}
body.single-product .mm-search{display:flex;align-items:center;gap:6.4px;border-radius:999px;background:var(--elev);
	border:var(--bd) solid var(--line);padding:8px 16px;width:280px}
body.single-product .mm-search svg{width:16px;height:16px;stroke:var(--w50);stroke-width:2;fill:none}
body.single-product .mm-search input[type="search"]{background:transparent;border:none;outline:none;font-family:'Outfit',sans-serif;font-size:14.4px;color:var(--w);width:100%}

@media(max-width:920px){
	body.single-product .nav-links,
	body.single-product .nav-tools{display:none}
	body.single-product .hamburger{display:flex}
}

/* =========================================================
   PRODUCT LAYOUT — D1 two-column grid (gallery | summary)
   Woostify emits .product-page-container wrapping .product-gallery +
   .product-summary > .summary.entry-summary (DOMAIN FACT). We grid it
   into the D1 split WITHOUT touching the native hook order.
   Mockup: .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
   gap:44px} → 560px | 588px at the 1192px content width.
   ========================================================= */
.connect-product-wrap .connect-buy-box .product-page-container{
	display:grid!important;
	grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important;
	gap:44px!important;
	align-items:start!important;
	max-width:1240px!important;
	margin:0 auto!important;
	padding:0 1.5rem 30px!important;
	float:none!important;
	width:auto!important;
}
/* Dissolve the single intermediate .woostify-container so gallery+summary
   become direct grid children (v1.0.1 technique, kept from prior parity). */
.connect-product-wrap .connect-buy-box .product-page-container > *{display:contents!important}
.connect-product-wrap .product-gallery{
	position:sticky!important;
	top:120px!important;
	width:auto!important;
	max-width:none!important;
	float:none!important;
}

/* =========================================================
   GALLERY — D1 cover card + thumbs BELOW (mockup .pdp-cover /
   .pdp-thumbs). Woostify's vertical-style slider puts thumbs in a
   left column; reflow to the mockup's column layout. Flickity and
   PhotoSwipe stay fully functional — only layout is overridden.
   ========================================================= */
.connect-product-wrap .product-gallery{
	display:flex!important;
	flex-direction:column!important;
	gap:12px!important;
}
.connect-product-wrap .product-gallery .product-images{
	width:100%!important;
	max-width:none!important;
	order:1!important;
	border-radius:var(--r)!important;
	border:var(--bd) solid var(--line)!important;
	background:var(--elev)!important;
	overflow:hidden!important;
}
.connect-product-wrap .product-gallery .product-images img{
	width:100%!important;height:auto!important;
	object-fit:cover!important;
}
/* Thumbs — horizontal row under the cover (mockup .pdp-thumbs). */
.connect-product-wrap .product-gallery .product-thumbnail-images{
	order:2!important;
	width:100%!important;
	max-width:none!important;
	margin:0!important;
	padding:0!important;
}
.connect-product-wrap .product-gallery .product-thumbnail-images .product-thumbnail-images-container{
	display:flex!important;gap:10px!important;
	flex-wrap:wrap!important;
	width:100%!important;
	transform:none!important;
}
.connect-product-wrap .product-gallery .thumbnail-item{
	flex:1 1 0!important;
	/* Mockup .pdp-thumb: 4 tiles filling the 560px column = 132px each. */
	width:auto!important;max-width:132px!important;
	aspect-ratio:1/1!important;
	border-radius:var(--r-sm)!important;
	border:var(--bd) solid var(--line)!important;
	background:var(--surface)!important;
	overflow:hidden!important;
	cursor:pointer!important;
	opacity:.7!important;
	transition:border-color .3s,box-shadow .3s,opacity .3s!important;
	margin:0!important;
}
.connect-product-wrap .product-gallery .thumbnail-item img{
	width:100%!important;height:100%!important;object-fit:cover!important;
}
.connect-product-wrap .product-gallery .thumbnail-item.is-nav-selected,
.connect-product-wrap .product-gallery .thumbnail-item.active,
.connect-product-wrap .product-gallery .thumbnail-item:hover{
	border-color:var(--neon-border)!important;
	box-shadow:0 0 0 3px var(--neon-dim)!important;
	opacity:1!important;
}
/* The mockup buy-box carries no sale flash — the price row's Save pill
   replaces it (functions.php appends .save to the main price html). */
.connect-product-wrap .onsale{display:none!important}

/* =========================================================
   SUMMARY — D1 right column (.pdp-sum rhythm)
   ========================================================= */
.connect-product-wrap .product-summary,
.connect-product-wrap .summary.entry-summary{
	width:auto!important;max-width:none!important;float:none!important;
	padding:0!important;margin:0!important;
}
.connect-product-wrap .summary.entry-summary > *{margin-top:0}

/* Eyebrow — primary category above the H1 (mockup .pdp-sum .eyebrow).
   Base .eyebrow atom comes from connect-home.css; restate so this file
   stands alone if load order shifts. */
.connect-product-wrap .cp-eyebrow{
	font-family:'Space Grotesk',sans-serif!important;
	font-size:.82rem!important;font-weight:700!important;
	letter-spacing:.26em!important;text-transform:uppercase!important;
	color:var(--neon)!important;display:block!important;
	margin:0 0 .6rem!important;line-height:1.6!important;
}

/* Product title — mockup .pdp-sum h1: Outfit 700,
   clamp(1.9rem,3.4vw,2.6rem) (41.6px at 1440), -.02em, var(--w). */
.connect-product-wrap .product_title.entry-title{
	font-family:'Outfit',sans-serif!important;
	font-weight:700!important;
	font-size:clamp(1.9rem,3.4vw,2.6rem)!important;
	line-height:1.1!important;
	letter-spacing:-.02em!important;
	color:var(--w)!important;
	margin:0 0 .7rem!important;
	float:none!important;
	text-transform:none!important;
}

/* Kill Poppins leakage on this template only: force brand fonts for headings */
.connect-product-wrap h1,
.connect-product-wrap .product_title.entry-title{font-family:'Outfit',sans-serif!important}
.connect-product-wrap h2,
.connect-product-wrap h3,
.connect-product-wrap .woocommerce-tabs .wc-tabs li a,
.connect-product-wrap .related.products > h2{font-family:'Space Grotesk',sans-serif!important}

/* Rating row — mockup .pdp-rating */
.connect-product-wrap .woocommerce-product-rating{
	display:flex!important;align-items:center!important;gap:.55rem!important;
	font-family:'Outfit',sans-serif!important;font-size:.9rem!important;
	color:var(--w50)!important;margin:0 0 1rem!important;float:none!important;
}
.connect-product-wrap .woocommerce-product-rating .star-rating{
	color:var(--neon)!important;letter-spacing:2px!important;
}
.connect-product-wrap .woocommerce-product-rating a{color:var(--w50)!important}

/* PRICE — mockup .pdp-price: gold NOW first, struck WAS second, Save pill
   last. WooCommerce emits <del><ins>; flex order restores the mockup order. */
.connect-product-wrap .summary .price{
	display:flex!important;align-items:baseline!important;gap:.8rem!important;
	flex-wrap:wrap!important;
	font-family:'Space Grotesk',sans-serif!important;
	font-size:1rem!important;font-weight:400!important;
	letter-spacing:normal!important;line-height:1.6!important;
	margin:.4rem 0 1rem!important;
	color:var(--w)!important;
	background:none!important;
}
.connect-product-wrap .summary .price ins{
	order:1!important;
	text-decoration:none!important;color:var(--neon)!important;
	font-size:2.15rem!important;font-weight:700!important;
	letter-spacing:-.01em!important;background:none!important;
}
.connect-product-wrap .summary .price del{
	order:2!important;
	color:var(--w30)!important;text-decoration:line-through!important;
	font-size:1rem!important;font-weight:400!important;opacity:1!important;
}
/* Non-sale price (no <ins>/<del>): the bare amount takes the NOW style. */
.connect-product-wrap .summary .price > .amount{
	color:var(--neon)!important;font-size:2.15rem!important;font-weight:700!important;
	letter-spacing:-.01em!important;
}
.connect-product-wrap .summary .price ins .amount{color:var(--neon)!important}
.connect-product-wrap .summary .price del .amount{color:var(--w30)!important;font-size:1rem!important}
/* Save pill — appended by connect_product_save_pill() (mockup .save). */
.connect-product-wrap .summary .price .save{
	order:3!important;
	font-family:'Space Grotesk',sans-serif!important;
	font-size:.66rem!important;font-weight:700!important;
	letter-spacing:.1em!important;text-transform:uppercase!important;
	color:#231A0A!important;background:var(--neon)!important;
	padding:.28rem .6rem!important;border-radius:999px!important;
	align-self:center!important;line-height:1.2!important;
}

/* Short description — mockup .pdp-short */
.connect-product-wrap .woocommerce-product-details__short-description{
	font-family:'Outfit',sans-serif!important;
	color:var(--w70)!important;font-size:1.06rem!important;line-height:1.7!important;
	margin-bottom:1.1rem!important;
}
.connect-product-wrap .woocommerce-product-details__short-description p{margin:0 0 .6rem}
.connect-product-wrap .woocommerce-product-details__short-description p:last-child{margin:0}

/* Included checklist — mockup .pdp-inc (rendered by connect_product_inc_list). */
.connect-product-wrap .cp-inc{
	list-style:none!important;margin:0 0 4rem!important;padding:0!important;
	display:grid!important;gap:.65rem!important;
}
.connect-product-wrap .cp-inc li{
	display:flex!important;gap:.6rem!important;align-items:flex-start!important;
	font-family:'Outfit',sans-serif!important;font-size:.95rem!important;
	color:var(--w70)!important;margin:0!important;
}
.connect-product-wrap .cp-inc svg{
	width:18px;height:18px;stroke:var(--neon);stroke-width:2.4;fill:none;
	flex-shrink:0;margin-top:2px;
}

/* =========================================================
   CART FORM + ADD-TO-CART — mockup .pdp-cta: OUTLINE .btn-cyber
   (transparent bg, gold border + text; gold fill sweeps in on
   hover) + 54px wishlist square. The native <form class="cart">
   and its AJAX handler stay fully intact.
   ========================================================= */
.connect-product-wrap form.cart{
	display:flex!important;flex-wrap:wrap!important;gap:.8rem!important;
	align-items:stretch!important;margin:0 0 1.1rem!important;
}
.connect-product-wrap form.cart .quantity{
	float:none!important;margin:0!important;flex:0 0 auto!important;
}
.connect-product-wrap form.cart .quantity input.qty{
	width:64px!important;height:auto!important;min-height:54px!important;
	border:var(--bd) solid var(--w30)!important;border-radius:0!important;
	background:transparent!important;color:var(--w)!important;
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	font-size:1rem!important;text-align:center!important;
}
.connect-product-wrap form.cart .quantity input.qty:focus{
	border-color:var(--neon)!important;box-shadow:0 0 0 3px var(--neon-dim)!important;outline:none!important;
}

/* The add-to-cart button — mockup .btn-cyber base (NOT the .fill variant):
   transparent, gold text/border; hover fills gold via ::before sweep. */
.connect-product-wrap .single_add_to_cart_button.button.alt,
.connect-product-wrap .single_add_to_cart_button.button{
	flex:1 1 auto!important;justify-content:center!important;
	position:relative!important;z-index:0!important;isolation:isolate!important;
	background:transparent!important;color:var(--neon)!important;
	border:var(--bd) solid var(--neon)!important;border-radius:0!important;
	padding:1rem 2.5rem!important;min-height:57px!important;
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	font-size:.88rem!important;letter-spacing:.05em!important;text-transform:uppercase!important;
	overflow:hidden!important;cursor:pointer!important;
	transition:color .3s,box-shadow .3s!important;
	display:inline-flex!important;align-items:center!important;gap:.55rem!important;line-height:1.2!important;
}
.connect-product-wrap .single_add_to_cart_button.button::before{
	content:'';position:absolute;inset:0;background:var(--neon);
	transform:scaleX(0);transform-origin:right;
	transition:transform .45s cubic-bezier(.77,0,.18,1);z-index:-1;
}
.connect-product-wrap .single_add_to_cart_button.button.alt:hover,
.connect-product-wrap .single_add_to_cart_button.button:hover{
	color:#231A0A!important;box-shadow:0 0 26px var(--neon-glow)!important;
}
.connect-product-wrap .single_add_to_cart_button.button:hover::before{
	transform:scaleX(1);transform-origin:left;
}
.connect-product-wrap .single_add_to_cart_button.button.alt:disabled,
.connect-product-wrap .single_add_to_cart_button.button:disabled{
	opacity:.55!important;cursor:not-allowed!important;
}

/* PayPal "Pay Later" promo message — the approved D1 buy-box has no such
   row (the .cp-pay secure-checkout row takes its place). Presentation-only:
   PayPal checkout, buttons and gateway config are untouched. Delete this
   one rule to bring the message back. */
.connect-product-wrap .ppcp-messages{display:none!important}

/* Wishlist heart — mockup .pdp-wish (54px square, brand-line border). */
.connect-product-wrap .cp-wish{
	width:54px!important;min-height:57px!important;flex:0 0 54px!important;
	border:var(--bd) solid var(--w30)!important;border-radius:0!important;
	background:transparent!important;color:var(--w)!important;
	display:grid!important;place-items:center!important;
	cursor:pointer!important;padding:0!important;margin:0!important;
	transition:border-color .25s,color .25s!important;
}
.connect-product-wrap .cp-wish svg{width:20px;height:20px}
.connect-product-wrap .cp-wish:hover{border-color:var(--neon)!important;color:var(--neon)!important}
.connect-product-wrap .cp-wish.active{
	border-color:var(--neon)!important;color:var(--neon)!important;
}
.connect-product-wrap .cp-wish.active svg{fill:var(--neon)}

/* Payment row — mockup .pdp-pay (Secure checkout + processor pills). */
.connect-product-wrap .cp-pay{
	display:flex!important;align-items:center!important;gap:.45rem!important;
	flex-wrap:wrap!important;margin:-.2rem 0 1.4rem!important;
}
.connect-product-wrap .cp-pay .lk{
	display:flex;align-items:center;gap:.35rem;
	font-family:'Space Grotesk',sans-serif;font-size:.68rem;font-weight:700;
	letter-spacing:.08em;text-transform:uppercase;color:var(--w50);margin-right:.35rem;
}
.connect-product-wrap .cp-pay .lk svg{width:14px;height:14px;stroke:var(--neon);stroke-width:2;fill:none}
.connect-product-wrap .cp-pay .pi{
	font-family:'Space Grotesk',sans-serif;font-size:.64rem;font-weight:700;
	letter-spacing:.03em;color:var(--w70);background:var(--elev);
	border:var(--bd) solid var(--line);border-radius:6px;padding:.34rem .52rem;line-height:1;
}

/* =========================================================
   VARIATIONS — D1 styled, Woo-variation-swatches kept functional
   The swatch JS stays loaded; we only restyle the wrappers.
   ========================================================= */
.connect-product-wrap .variations{
	width:100%!important;border:0!important;margin:0 0 1.2rem!important;
}
.connect-product-wrap .variations tr{display:flex!important;flex-direction:column!important;gap:.4rem!important;margin-bottom:.9rem!important}
.connect-product-wrap .variations td{padding:0!important;border:0!important}
.connect-product-wrap .variations label{font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;font-size:.72rem!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--w50)!important}
.connect-product-wrap .variations select{
	width:100%!important;max-width:280px!important;
	border:var(--bd) solid var(--w30)!important;border-radius:0!important;
	background:var(--elev)!important;color:var(--w)!important;
	font-family:'Outfit',sans-serif!important;font-size:.95rem!important;
	padding:.6rem .8rem!important;height:auto!important;
}
.connect-product-wrap .variations select:focus{border-color:var(--neon)!important;box-shadow:0 0 0 3px var(--neon-dim)!important;outline:none!important}
.connect-product-wrap .woocommerce-variation-add-to-cart{display:flex!important;flex-wrap:wrap!important;gap:.8rem!important;align-items:stretch!important}
.connect-product-wrap .woocommerce-variation{margin-bottom:1rem!important}
.connect-product-wrap .woocommerce-variation-description{display:none!important}

/* Variation swatches (woo-variation-swatches) — keep JS, restyle */
.connect-product-wrap .wvs-style-squared .variable-items-wrapper .variable-item{
	border-radius:0!important;border:var(--bd) solid var(--line)!important;background:var(--elev)!important;
}
.connect-product-wrap .wvs-style-squared .variable-items-wrapper .variable-item.selected,
.connect-product-wrap .wvs-style-squared .variable-items-wrapper .variable-item:hover{
	border-color:var(--neon)!important;box-shadow:0 0 0 3px var(--neon-dim)!important;
}

/* =========================================================
   PRODUCT META — mockup .pdp-meta: single horizontal wrap row
   (SKU · Category · Format), hairline above.
   ========================================================= */
.connect-product-wrap .product_meta{
	border-top:var(--bd) solid var(--line)!important;
	padding-top:1rem!important;
	font-family:'Outfit',sans-serif!important;font-size:.86rem!important;
	color:var(--w50)!important;
	display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;
	gap:.4rem 1.6rem!important;
}
.connect-product-wrap .product_meta > span{display:inline-flex!important;gap:.35rem!important;margin:0!important}
.connect-product-wrap .product_meta a{color:var(--w50)!important;text-decoration:none!important}
.connect-product-wrap .product_meta a:hover{color:var(--neon)!important}
.connect-product-wrap .product_meta .sku{color:var(--w70)!important}
.connect-product-wrap .product_meta b,
.connect-product-wrap .product_meta .cp-format b{color:var(--w70)!important;font-weight:600!important}
/* The mockup meta row is SKU · Category · Format only — no tag list. */
.connect-product-wrap .product_meta .tagged_as{display:none!important}

/* =========================================================
   NOTICES — D1 styled (kept native AJAX)
   ========================================================= */
.connect-product-wrap .woocommerce-message,
.connect-product-wrap .woocommerce-info,
.connect-product-wrap .woocommerce-error{
	border:var(--bd) solid var(--neon-border)!important;border-radius:var(--r-sm)!important;
	background:var(--neon-dim)!important;color:var(--w)!important;
	font-family:'Outfit',sans-serif!important;padding:.9rem 1.2rem!important;margin:0 0 1rem!important;
	list-style:none!important;
}
.connect-product-wrap .woocommerce-message a,
.connect-product-wrap .woocommerce-info a{color:var(--neon)!important;font-weight:700!important}

/* =========================================================
   FEATURE STRIP — mockup .pdp-feat: 4 glass stat tiles between
   the buy-box and the tabs (rendered by connect_product_feat_strip).
   .glass hover behaviour comes from connect-home.css.
   ========================================================= */
.connect-product-wrap .cp-feat{
	display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:1.2rem!important;
	max-width:1192px!important;margin:5rem auto 5.5rem!important;
	padding:0!important;
	/* Defense (DEFECT 2026-08-01): if a future Woostify change ever lands the
	   strip back inside the dissolved buy-box container, span both grid
	   columns instead of collapsing into column 1. Inert when the strip is
	   not a grid item (the fixed priority-9 hook position). */
	grid-column:1/-1;
}
.connect-product-wrap .cp-feat .f{padding:1.6rem 1rem;text-align:center}
.connect-product-wrap .cp-feat .f svg{width:22px;height:22px;stroke:var(--neon);stroke-width:2;fill:none;margin-bottom:.5rem}
.connect-product-wrap .cp-feat .f .n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;color:var(--w);line-height:1}
.connect-product-wrap .cp-feat .f .l{font-family:'Space Grotesk',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--w50);margin-top:.35rem}

/* =========================================================
   TABS SECTION — mockup .sec.nb: "Everything you get" heading
   (Space Grotesk clamp(1.7rem,3vw,2.5rem) → 40px at 1440)
   directly above the native tab nav.
   ========================================================= */
.connect-product-wrap .cp-tabs-heading{
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	font-size:clamp(1.7rem,3vw,2.5rem)!important;line-height:.98!important;
	letter-spacing:-.03em!important;text-transform:uppercase!important;
	color:var(--w)!important;
	max-width:1192px!important;margin:2.4rem auto 0!important;
	padding:0!important;
}
.connect-product-wrap .woocommerce-tabs.wc-tabs-wrapper{
	max-width:1192px!important;margin:0 auto!important;padding:0 0 82px!important;
}
.connect-product-wrap .woocommerce-tabs .wc-tabs{
	display:flex!important;gap:.2rem!important;flex-wrap:wrap!important;
	border-bottom:var(--bd) solid var(--line)!important;
	padding:0!important;margin:8px 0 0!important;list-style:none!important;
	overflow:visible!important;
}
.connect-product-wrap .woocommerce-tabs .wc-tabs li{
	background:none!important;border:none!important;margin:0!important;padding:0!important;
	display:block!important;
}
.connect-product-wrap .woocommerce-tabs .wc-tabs li::before,
.connect-product-wrap .woocommerce-tabs .wc-tabs li::after{display:none!important}
.connect-product-wrap .woocommerce-tabs .wc-tabs li a{
	display:block!important;
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	font-size:.94rem!important;letter-spacing:.07em!important;text-transform:uppercase!important;
	color:var(--w50)!important;padding:1rem 1.7rem!important;
	line-height:1.2!important;
	border:none!important;border-bottom:2.5px solid transparent!important;
	margin-bottom:-1.5px!important;background:none!important;outline:none!important;
	transition:color .2s,border-color .2s!important;
}
.connect-product-wrap .woocommerce-tabs .wc-tabs li a:hover{color:var(--w70)!important}
.connect-product-wrap .woocommerce-tabs .wc-tabs li.active a{
	color:var(--w)!important;border-bottom-color:var(--neon)!important;
}
.connect-product-wrap .woocommerce-tabs .wc-tabs li.active a:focus-visible{outline:2.5px solid var(--node-d);outline-offset:3px}

.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel{
	max-width:860px!important;padding:2.2rem 0!important;margin:0!important;
	font-family:'Outfit',sans-serif!important;color:var(--w70)!important;
	line-height:1.8!important;font-size:1.03rem!important;
}
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h2,
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h3{
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	text-transform:uppercase!important;letter-spacing:-.01em!important;
	color:var(--w)!important;
}
/* FOLLOW-UP 6 (owner-approved design extension): content-block rhythm inside
   the tab panels. Headings rendered glued to the previous block (measured:
   25.6px from the old 1.6rem margin, identical at 1440/390). Breathing room:
   h2 56px desktop / 40px mobile · h3 40px / 32px · ~16px below both. Margins
   collapse with the previous block's smaller bottom margin, so the visual gap
   equals these values. Scoped to .woocommerce-Tabs-panel only — pure CSS,
   inherited by every block→heading transition on every product. */
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h2{font-size:1.32rem!important;margin:56px 0 1rem!important}
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h3{font-size:1.32rem!important;margin:40px 0 1rem!important}
/* First heading in a panel: no dead space at panel start. */
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h2:first-child,
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h3:first-child{margin-top:0!important}
@media(max-width:600px){
	.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h2{margin-top:40px!important}
	.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h3{margin-top:32px!important}
	.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h2:first-child,
	.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel h3:first-child{margin-top:0!important}
}
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel ul{margin:.7rem 0 1.1rem 1.2rem!important}
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel li{margin-bottom:.5rem!important}
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel strong{color:var(--w)!important}
.connect-product-wrap .woocommerce-tabs .woocommerce-Tabs-panel a{color:var(--neon)!important}

/* Additional information — native attributes table AND the Connect
   info tab both render the D1 info-table look.
   DEFECT FIX 2026-08-01: the theme's default table skin paints full cell
   borders, a vertical column divider and striped row backgrounds (measured
   live). The mockup rows carry ONLY a bottom hairline on a transparent
   ground — reset every side border and background on table/tr/td first. */
.connect-product-wrap .woocommerce-tabs table.woocommerce-product-attributes,
.connect-product-wrap .woocommerce-tabs .info-table{
	/* FOLLOW-UP 4: value cells match the panel body scale (1.03rem = 16.48px
	   Outfit, same as Description/Reviews/FAQ text; was the mockup-literal
	   .95rem = 15.2px). Labels keep their explicit .72rem small-caps below. */
	width:100%!important;border-collapse:collapse!important;font-size:1.03rem!important;
	font-family:'Outfit',sans-serif!important;font-weight:400!important;
	color:var(--w70)!important;
	border:0!important;background:transparent!important;margin:0!important;
}
.connect-product-wrap .woocommerce-tabs table.woocommerce-product-attributes tr,
.connect-product-wrap .woocommerce-tabs .info-table tr,
.connect-product-wrap .woocommerce-tabs table.woocommerce-product-attributes tr:nth-child(odd),
.connect-product-wrap .woocommerce-tabs .info-table tr:nth-child(odd),
.connect-product-wrap .woocommerce-tabs table.woocommerce-product-attributes tr:nth-child(even),
.connect-product-wrap .woocommerce-tabs .info-table tr:nth-child(even){
	border:0!important;background:transparent!important;
}
.connect-product-wrap .woocommerce-tabs table.woocommerce-product-attributes th,
.connect-product-wrap .woocommerce-tabs table.woocommerce-product-attributes td,
.connect-product-wrap .woocommerce-tabs .info-table td{
	padding:.8rem 0!important;
	border:0!important;
	border-bottom:var(--bd) solid var(--line)!important;vertical-align:top!important;
	background:none!important;
}
.connect-product-wrap .woocommerce-tabs table.woocommerce-product-attributes th,
.connect-product-wrap .woocommerce-tabs .info-table td:first-child{
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	font-size:.72rem!important;letter-spacing:.1em!important;text-transform:uppercase!important;
	color:var(--w50)!important;width:210px!important;
}

/* FAQ tab — mockup .faq-item accordion (native <details>, no JS needed). */
.connect-product-wrap .woocommerce-tabs .faq-item{
	border:var(--bd) solid var(--line);border-radius:var(--r);background:var(--elev);
	margin-bottom:.8rem;overflow:hidden;transition:border-color .3s;
}
.connect-product-wrap .woocommerce-tabs .faq-item[open]{border-color:var(--neon-border)}
.connect-product-wrap .woocommerce-tabs .faq-item summary{
	list-style:none;cursor:pointer;padding:1.05rem 1.3rem;
	display:flex;align-items:center;justify-content:space-between;gap:1rem;
	font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.98rem;color:var(--w);
}
.connect-product-wrap .woocommerce-tabs .faq-item summary::-webkit-details-marker{display:none}
.connect-product-wrap .woocommerce-tabs .faq-item summary .ic{
	flex-shrink:0;width:24px;height:24px;border-radius:50%;
	border:var(--bd) solid var(--neon-border);color:var(--neon);
	display:grid;place-items:center;font-size:1.1rem;transition:transform .3s;
}
.connect-product-wrap .woocommerce-tabs .faq-item[open] summary .ic{transform:rotate(45deg)}
.connect-product-wrap .woocommerce-tabs .faq-item .ans{padding:0 1.3rem 1.1rem;color:var(--w70);line-height:1.7}

/* =========================================================
   REVIEWS — D1 language extension (2026-08-01 follow-up 2).
   Flagged as a MOCKUP EXTENSION: the approved mockup shows the
   reviews read-state only; the form, stars, empty state and
   scroll offset below extend the page's token/motion system.
   ========================================================= */
/* F2 — tab anchors land under the 74px fixed nav without an offset. */
.connect-product-wrap .woocommerce-tabs,
.connect-product-wrap .woocommerce-Tabs-panel,
.connect-product-wrap .cp-tabs-heading,
.connect-product-wrap #reviews,
.connect-product-wrap #respond{scroll-margin-top:140px!important}

/* Existing reviews list */
.connect-product-wrap #reviews .commentlist{list-style:none!important;padding:0!important;margin:0!important}
.connect-product-wrap #reviews .comment{
	padding:1.3rem 1.5rem!important;margin-bottom:1rem!important;
	background:var(--elev)!important;border:var(--bd) solid var(--line)!important;border-radius:var(--r)!important;
}
.connect-product-wrap #reviews .comment .comment-text{padding:0!important}
.connect-product-wrap #reviews .comment .woocommerce-review__author{font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;color:var(--w)!important;font-size:.95rem!important}
.connect-product-wrap #reviews .comment .star-rating{color:var(--neon)!important}
.connect-product-wrap #reviews .comment p{margin:.5rem 0 0!important;color:var(--w70)!important}

/* D4 — designed empty state (was a bare sentence). */
.connect-product-wrap #reviews .woocommerce-noreviews{
	background:var(--elev)!important;border:var(--bd) solid var(--line)!important;
	border-radius:var(--r)!important;padding:2.6rem 2rem!important;
	text-align:center!important;max-width:860px!important;margin:0 0 2.2rem!important;
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	font-size:1.05rem!important;color:var(--w)!important;
}
.connect-product-wrap #reviews .woocommerce-noreviews::before{
	content:'☆';display:block;font-size:2.4rem;line-height:1;
	color:var(--neon);margin-bottom:.7rem;
}

/* D3 — review form as a D1 card. */
.connect-product-wrap #review_form_wrapper{
	background:var(--elev)!important;border:var(--bd) solid var(--line)!important;
	border-radius:var(--r)!important;padding:2.2rem!important;max-width:860px!important;
}
.connect-product-wrap #reviews .comment-respond{margin-top:0!important}
.connect-product-wrap #reviews .comment-reply-title{
	display:block!important;font-family:'Space Grotesk',sans-serif!important;
	font-weight:700!important;font-size:1.32rem!important;text-transform:uppercase!important;
	letter-spacing:-.01em!important;color:var(--w)!important;margin:0 0 .3rem!important;
}
.connect-product-wrap #reviews .comment-notes{
	font-size:.9rem!important;color:var(--w50)!important;margin:0 0 .4rem!important;
}
/* Name/Email as a 2-column row at desktop. */
.connect-product-wrap #reviews .comment-form{
	display:grid!important;grid-template-columns:1fr 1fr!important;gap:1rem 1.5rem!important;
	margin:0!important;
}
.connect-product-wrap #reviews .comment-form > p,
.connect-product-wrap #reviews .comment-form > div{grid-column:1/-1;margin:0!important}
.connect-product-wrap #reviews .comment-form .comment-form-author{grid-column:1!important}
.connect-product-wrap #reviews .comment-form .comment-form-email{grid-column:2!important}
.connect-product-wrap #reviews .comment-form label{
	display:block!important;font-family:'Space Grotesk',sans-serif!important;
	font-weight:700!important;font-size:.72rem!important;letter-spacing:.1em!important;
	text-transform:uppercase!important;color:var(--w50)!important;margin:0 0 .45rem!important;
}
.connect-product-wrap #reviews .comment-form input[type=text],
.connect-product-wrap #reviews .comment-form input[type=email],
.connect-product-wrap #reviews .comment-form textarea{
	width:100%!important;
	border:var(--bd) solid var(--w30)!important;border-radius:0!important;background:var(--base)!important;
	color:var(--w)!important;font-family:'Outfit',sans-serif!important;font-size:.95rem!important;
	padding:.7rem .9rem!important;
}
.connect-product-wrap #reviews .comment-form textarea{height:160px!important;min-height:160px!important;resize:vertical!important}
.connect-product-wrap #reviews .comment-form input:focus,
.connect-product-wrap #reviews .comment-form textarea:focus{border-color:var(--neon)!important;box-shadow:0 0 0 3px var(--neon-dim)!important;outline:none!important}
/* Checkbox inline with its label. */
.connect-product-wrap #reviews .comment-form .comment-form-cookies-consent{
	display:flex!important;align-items:flex-start!important;gap:.55rem!important;
}
.connect-product-wrap #reviews .comment-form .comment-form-cookies-consent input{
	width:auto!important;margin:4px 0 0!important;flex:0 0 auto!important;
	accent-color:var(--neon)!important;
}
.connect-product-wrap #reviews .comment-form .comment-form-cookies-consent label{
	display:inline!important;margin:0!important;
	font-family:'Outfit',sans-serif!important;font-size:.9rem!important;
	font-weight:400!important;letter-spacing:normal!important;text-transform:none!important;
	color:var(--w70)!important;
}

/* D2 — stars: EMPTY by default, gold fill on hover/selected with the page's
   .3s motion. WooCommerce markup: p.stars > span > a.star-1..5 ('active' on
   the chosen star, 'selected' on p.stars). Unicode glyph layers replace the
   Woo icon font (which rendered all five as filled). */
.connect-product-wrap #reviews .comment-form-rating{margin:0!important}
.connect-product-wrap #reviews p.stars{display:block!important;margin:.2rem 0 0!important;line-height:1!important}
.connect-product-wrap #reviews p.stars span{display:inline-flex!important;gap:4px!important}
.connect-product-wrap #reviews p.stars a{
	position:relative!important;display:inline-block!important;
	width:28px!important;height:28px!important;
	font-size:0!important;line-height:0!important;color:var(--neon)!important;
	text-decoration:none!important;border:0!important;
}
.connect-product-wrap #reviews p.stars a::before,
.connect-product-wrap #reviews p.stars a::after{
	position:absolute;inset:0;text-align:center;text-indent:0;
	font-family:'Outfit',sans-serif;font-size:25px;line-height:28px;
	color:var(--neon);
}
.connect-product-wrap #reviews p.stars a::before{content:'☆'!important;opacity:1}
.connect-product-wrap #reviews p.stars a::after{content:'★'!important;opacity:0;transition:opacity .3s!important}
/* hover: fill up to the hovered star */
.connect-product-wrap #reviews p.stars span:hover a::after{opacity:1}
.connect-product-wrap #reviews p.stars span a:hover ~ a::after{opacity:0!important}
/* selected: fill up to the chosen star */
.connect-product-wrap #reviews p.stars.selected span a::after{opacity:1}
.connect-product-wrap #reviews p.stars.selected span a.active ~ a::after{opacity:0!important}

/* D1 — submit matches the page CTA system exactly (outline-gold .btn-cyber
   base, color .3s + box-shadow .3s, hover fill sweep).
   FOLLOW-UP 3 DEFECT 1: the previous wrapper ::before sweep painted at rest
   on the live stack (transform reset to none + the grid-blockified wrapper
   stretched to the full 788px card width -> permanent gold bar, corrupted
   label in Edge). #submit is an <input> and cannot carry pseudo-elements, so
   the sweep now lives ON the input as an animated background-size gradient:
   sized to the button by definition, nothing can overlay the label, and a
   lost transform can never make it paint at rest. Same .45s
   cubic-bezier(.77,0,.18,1) motion as the add-to-cart sweep. */
.connect-product-wrap #reviews .comment-form .form-submit{
	grid-column:1/-1;justify-self:start!important;
	width:max-content!important;
	position:static!important;overflow:visible!important;
	margin:1.8rem 0 0!important; /* >=28px above the CTA */
}
.connect-product-wrap #reviews .comment-form .form-submit::before,
.connect-product-wrap #reviews .comment-form .form-submit::after{content:none!important}
.connect-product-wrap #reviews .comment-form .submit{
	background:transparent!important;
	background-image:linear-gradient(var(--neon),var(--neon))!important;
	background-repeat:no-repeat!important;
	background-size:0% 100%!important;
	background-position:0 0!important;
	color:var(--neon)!important;
	border:var(--bd) solid var(--neon)!important;border-radius:0!important;
	padding:1rem 2.5rem!important;min-height:54px!important;
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	font-size:.88rem!important;letter-spacing:.05em!important;text-transform:uppercase!important;
	cursor:pointer!important;
	transition:color .3s,box-shadow .3s,background-size .45s cubic-bezier(.77,0,.18,1)!important;
}
.connect-product-wrap #reviews .comment-form .submit:hover,
.connect-product-wrap #reviews .comment-form .submit:focus-visible{
	background-size:100% 100%!important;
	color:#231A0A!important;box-shadow:0 0 26px var(--neon-glow)!important;
}

/* FOLLOW-UP 3 DEFECT 2 — reviews list <-> form spacing (owner-approved
   mockup-extension values: 48px desktop / 32px mobile; measured 8px before). */
.connect-product-wrap #reviews #comments{margin-bottom:0!important}
.connect-product-wrap #review_form_wrapper{margin-top:48px!important}
@media(max-width:600px){
	.connect-product-wrap #reviews .comment-form{grid-template-columns:1fr!important}
	.connect-product-wrap #reviews .comment-form .comment-form-author,
	.connect-product-wrap #reviews .comment-form .comment-form-email{grid-column:1/-1!important}
	.connect-product-wrap #review_form_wrapper{padding:1.4rem!important;margin-top:32px!important}
}

/* =========================================================
   RELATED PRODUCTS — mockup .sec.gap-xl "You may also like":
   hairline-top section, 4 glass cards, left-aligned body,
   price + "Add" chip on one row (.animated-meta = mockup .row).
   Native .related.products loop + AJAX add-to-cart kept.
   ========================================================= */
.connect-product-wrap .related.products,
.connect-product-wrap .upsells.products{
	max-width:1192px!important;margin:11rem auto 0!important;
	padding:2.5rem 0 82px!important;
	border-top:var(--bd) solid var(--line)!important;
	clear:both!important;float:none!important;
}
.connect-product-wrap .related.products > h2,
.connect-product-wrap .upsells.products > h2{
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;
	text-transform:uppercase!important;font-size:clamp(1.7rem,3vw,2.5rem)!important;
	line-height:.98!important;
	letter-spacing:-.03em!important;color:var(--w)!important;margin:0!important;
	padding:0!important;
	text-align:left!important;
}
.connect-product-wrap .related.products ul.products,
.connect-product-wrap .upsells.products ul.products{
	display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:1.3rem!important;
	padding:0!important;margin:1.6rem 0 0!important;width:100%!important;
}
.connect-product-wrap .related.products ul.products li.product,
.connect-product-wrap .upsells.products ul.products li.product{
	width:auto!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;
	background:var(--elev)!important;border:var(--bd) solid var(--line)!important;border-radius:var(--r)!important;
	overflow:hidden!important;transition:border-color .4s,transform .4s,box-shadow .4s!important;
	text-align:left!important;
}
.connect-product-wrap .related.products ul.products li.product:hover,
.connect-product-wrap .upsells.products ul.products li.product:hover{
	border-color:var(--neon-border)!important;transform:translateY(-5px)!important;
	box-shadow:0 14px 40px rgba(86,63,37,.10),inset 0 0 22px var(--neon-dim)!important;
}
/* The D1 related cards carry no sale flash, category chip, favourite
   heart, or hover-swap image — those are shop-archive card furniture. */
.connect-product-wrap .related.products li.product .woostify-tag-on-sale,
.connect-product-wrap .related.products li.product .cat-chip,
.connect-product-wrap .related.products li.product .fav-heart,
.connect-product-wrap .related.products li.product .product-loop-hover-image,
.connect-product-wrap .upsells.products li.product .woostify-tag-on-sale,
.connect-product-wrap .upsells.products li.product .cat-chip,
.connect-product-wrap .upsells.products li.product .fav-heart,
.connect-product-wrap .upsells.products li.product .product-loop-hover-image{display:none!important}
.connect-product-wrap .related.products li.product a img,
.connect-product-wrap .upsells.products li.product a img{
	width:100%!important;aspect-ratio:4/3!important;object-fit:cover!important;
	border-bottom:var(--bd) solid var(--line)!important;background:linear-gradient(150deg,var(--surface),var(--elev))!important;
	margin:0!important;border-radius:0!important;
}
.connect-product-wrap .related.products li.product .product-loop-content,
.connect-product-wrap .upsells.products li.product .product-loop-content{
	padding:1rem 1.1rem!important;text-align:left!important;
}
.connect-product-wrap .related.products li.product .woocommerce-loop-product__title,
.connect-product-wrap .upsells.products li.product .woocommerce-loop-product__title{
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;font-size:.95rem!important;
	color:var(--w)!important;padding:0!important;margin:0 0 .7rem!important;line-height:1.25!important;
	text-align:left!important;
}
.connect-product-wrap .related.products li.product .woocommerce-loop-product__title a,
.connect-product-wrap .upsells.products li.product .woocommerce-loop-product__title a{color:var(--w)!important;text-decoration:none!important}
/* Price + Add on one row — mockup .rel-card .row. Woostify hides
   .animated-meta until hover; force it visible and flex it. */
.connect-product-wrap .related.products li.product .product-loop-meta,
.connect-product-wrap .upsells.products li.product .product-loop-meta{
	position:static!important;height:auto!important;min-height:0!important;
	overflow:visible!important;background:none!important;padding:0!important;margin:0!important;
}
.connect-product-wrap .related.products li.product .animated-meta,
.connect-product-wrap .upsells.products li.product .animated-meta{
	display:flex!important;align-items:center!important;justify-content:space-between!important;
	gap:.6rem!important;
	position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;
	padding:0!important;margin:0!important;
}
.connect-product-wrap .related.products li.product .price,
.connect-product-wrap .upsells.products li.product .price{
	font-family:'Space Grotesk',sans-serif!important;font-weight:700!important;font-size:1rem!important;
	color:var(--w)!important;padding:0!important;margin:0!important;display:inline-flex!important;
	align-items:baseline!important;gap:.45rem!important;background:none!important;
}
.connect-product-wrap .related.products li.product .price ins{color:var(--w)!important;text-decoration:none!important;background:none!important;order:1}
.connect-product-wrap .related.products li.product .price del{color:var(--w30)!important;font-size:.78em!important;font-weight:400!important;order:2}
.connect-product-wrap .related.products li.product .price .amount{color:inherit!important}
.connect-product-wrap .related.products li.product .button,
.connect-product-wrap .related.products li.product .added_to_cart,
.connect-product-wrap .upsells.products li.product .button,
.connect-product-wrap .upsells.products li.product .added_to_cart{
	font-family:'Space Grotesk',sans-serif!important;font-size:.64rem!important;font-weight:700!important;
	letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--neon)!important;
	border:var(--bd) solid var(--neon-border)!important;border-radius:0!important;background:transparent!important;
	padding:.4rem .7rem!important;margin:0!important;display:inline-block!important;
	flex:0 0 auto!important;line-height:1.2!important;
}
.connect-product-wrap .related.products li.product .button:hover,
.connect-product-wrap .upsells.products li.product .button:hover{background:var(--neon)!important;color:#231A0A!important}
.connect-product-wrap .related.products li.product .button .woostify-svg-icon,
.connect-product-wrap .upsells.products li.product .button .woostify-svg-icon{display:none!important}

/* =========================================================
   RESPONSIVE — mockup breakpoint: single 900px switch
   (.pdp → 1 col, gallery static, feat + related → 2 cols).
   ========================================================= */
@media(max-width:1240px){
	/* Below the 1240px wrap width the 1192px sections need side gutters
	   (the mockup's .wrap carries 1.5rem padding at every width). */
	.connect-product-wrap .cp-feat,
	.connect-product-wrap .cp-tabs-heading,
	.connect-product-wrap .woocommerce-tabs.wc-tabs-wrapper,
	.connect-product-wrap .related.products,
	.connect-product-wrap .upsells.products{
		margin-left:1.5rem!important;margin-right:1.5rem!important;
		/* Woostify sets width:100% on these sections — combined with the
		   gutter margins that overflows the viewport (measured 414px page
		   width at 390). auto = container minus margins. */
		width:auto!important;
	}
}
@media(max-width:900px){
	.connect-product-wrap .connect-buy-box .product-page-container{grid-template-columns:1fr!important;gap:2rem!important}
	.connect-product-wrap .product-gallery{position:static!important;top:auto!important}
	.connect-product-wrap .cp-feat{grid-template-columns:repeat(2,1fr)!important}
	.connect-product-wrap .related.products ul.products,
	.connect-product-wrap .upsells.products ul.products{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:600px){
	.connect-product-wrap .summary .price ins{font-size:1.7rem!important}
	.connect-product-wrap form.cart{flex-wrap:nowrap!important}
	.connect-product-wrap .single_add_to_cart_button.button{flex:1 1 auto!important}

	/* FOLLOW-UP 7 (design extension): phone-width related cards measured
	   126–173px wide with 93–128px 4:3 images — cramped. Mobile anatomy:
	   square image (taller, more artwork), tighter padding, title/price at
	   readable D1 token sizes. 2-col stays; sub-360 goes 1-col below. */
	.connect-product-wrap .related.products ul.products,
	.connect-product-wrap .upsells.products ul.products{gap:12px!important}
	.connect-product-wrap .related.products li.product a img,
	.connect-product-wrap .upsells.products li.product a img{aspect-ratio:1/1!important}
	.connect-product-wrap .related.products li.product .product-loop-content,
	.connect-product-wrap .upsells.products li.product .product-loop-content{padding:.8rem .85rem!important}
	.connect-product-wrap .related.products li.product .woocommerce-loop-product__title,
	.connect-product-wrap .upsells.products li.product .woocommerce-loop-product__title{
		font-size:.9rem!important;line-height:1.3!important;margin:0 0 .55rem!important;
	}
	.connect-product-wrap .related.products li.product .price,
	.connect-product-wrap .upsells.products li.product .price{font-size:1rem!important}
	/* The struck original price wraps into a one-character column at card
	   widths under ~180px; the D1 rel-card shows a single price — drop the
	   del on phones. */
	.connect-product-wrap .related.products li.product .price del,
	.connect-product-wrap .upsells.products li.product .price del{display:none!important}
	.connect-product-wrap .related.products li.product .animated-meta,
	.connect-product-wrap .upsells.products li.product .animated-meta{gap:.5rem!important}
}
@media(max-width:359px){
	/* 320-class phones: one roomy card per row beats two cramped ones. */
	.connect-product-wrap .related.products ul.products,
	.connect-product-wrap .upsells.products ul.products{grid-template-columns:1fr!important}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
	.js .reveal{opacity:1!important;transform:none!important}
}