/* ===========================================================================
   Product page updates (added after custom.css so these safely win the
   cascade without needing to touch that large, already-organised file)
   =========================================================================== */

/* Bigger pricing on the Home page's "Shop Our Designs" grid -- felt small
   next to the Anton-style product title above it. Overrides the 1.05rem
   set in custom.css's ".lp-home-products" section. */
.lp-home-products ul.products li.product .price {
	font-size: 1.3rem !important;
}

/* Bigger product pricing (sitewide, block-based)
   ===========================================================================
   WooCommerce's block-based price component (used by the Shop page, category
   archives, and the single-product "Related Products" block) ships at the
   theme's "small" font-size preset by default -- 14px, noticeably smaller
   than the surrounding product title. Overriding the price component
   specifically (rather than the shared ".has-small-font-size" utility class,
   which is also used by unrelated text elsewhere on the site) keeps this
   change scoped to product prices only. The single-product summary price
   (the big price next to "Add to cart") already uses the theme's "large"
   preset and wasn't part of this complaint, so it's left as-is. */
.wc-block-components-product-price {
	font-size: 1.2rem !important;
	font-weight: 700 !important;
}

/* Single-product "Add to Cart" button -- brand gradient
   ===========================================================================
   WooCommerce/the theme's global button style renders this as a plain black
   square button (Twenty Twenty-Five's default ".wp-element-button" style),
   which reads as an unbranded, generic-store button next to the green/blue
   gradient CTA used everywhere else on the site (header CTA, homepage
   product cards, contact form submit). Restyled to match.
   Colours are hardcoded here (rather than reused via var(--gradient-green-
   blue)) because that custom property is only defined inside the
   ".limitless-services" wrapper class used on the Home/Services pages --
   the single-product template doesn't carry that wrapper, so the variable
   would resolve to nothing there. Same literal values as
   --limitless-green (#73EF1B), --limitless-blue (#289AF6) and --ink-black
   (#0a0a0a) in custom.css, kept in sync if the brand palette ever changes.
   Targets both the simple-product button and the variable-product one
   (which additionally carries "wc-variation-selection-needed" until a
   variation is chosen; the selector applies regardless of that state, so
   the button doesn't just turn brand-coloured only once a size/colour is
   picked). */
.single_add_to_cart_button.button {
	background: linear-gradient(135deg, #73ef1b 0%, #289af6 100%) !important;
	color: #0a0a0a !important;
	border: none !important;
	border-radius: 50px !important;
	font-weight: 700 !important;
	box-shadow: 0 8px 24px rgba(40, 154, 246, 0.25);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.single_add_to_cart_button.button:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(40, 154, 246, 0.35);
	color: #0a0a0a !important;
}

/* Hide SKU from customer-facing pages
   ===========================================================================
   SKUs exist purely for backend/shipping-plugin use (box sizing), not for
   customers to see. The single-product page here is built from WooCommerce's
   block-based "Product Meta" block, whose "Product SKU" inner block ignores
   the classic wc_product_sku_enabled filter entirely -- it always renders
   when the SKU field is filled in, so the only reliable way to hide it is
   CSS. The SKU value itself is untouched in the database/admin, so the
   shipping plugin keeps reading it exactly as before. */
.wc-block-components-product-sku {
	display: none !important;
}

/* Merriweather for product titles + product-page copy
   ===========================================================================
   Chris asked to move product titles onto a bolder, more editorial serif
   (Merriweather, enqueued in functions.php alongside the other brand fonts)
   instead of the sitewide Manrope -- but scoped to product-related areas
   only, not swapped in site-wide, since nothing else was asked to change.

   Both the single-product H1 title and a Shop/category grid's product title
   are the same underlying block (WooCommerce's Product Collection "Post
   Title"), just h1 vs h2 depending on context -- so the font-family switch
   is shared, but the WEIGHT differs on purpose: bold (700) for the single
   product page's H1, where it's alone and can carry the weight, but regular
   (400) for the same title block inside a Shop/category grid, where bold
   read as too heavy with several products sitting side by side. The rest of
   a product page's copy (short description + the Description tab, both
   inside WooCommerce's "Product Details" tabs block) also moves to
   Merriweather at a plain 400 (the theme's own weight there is a light 300,
   which looks thin in this serif), so the page reads as one consistent
   typeface rather than a mix of Manrope and Merriweather. */
.woocommerce.product {
	font-family: 'Merriweather', serif;
}

.woocommerce.product h1.wp-block-post-title {
	font-family: 'Merriweather', serif !important;
	font-weight: 700 !important;
}

.woocommerce.product .wp-block-woocommerce-product-details p {
	font-weight: 400;
}

.wc-block-product-template h2.wp-block-post-title,
li.product h2.wp-block-post-title {
	font-family: 'Merriweather', serif !important;
	font-weight: 400 !important;
}

/* Lumise design-editor stage-nav thumbnail -- recenter between the drag dots
   ===========================================================================
   Chris flagged that the small Front/Back stage-switcher thumbnail (bottom
   right of the design canvas) sits visibly closer to the right-hand drag
   handle than the left one. The plugin's own CSS (assets/css/app.css,
   "div#lumise-stage-nav ul li img") sets a height for this thumbnail but
   never a matching width, so the image renders at whatever width the real
   garment photo's aspect ratio happens to produce -- on a portrait photo
   that's narrower than the 80px-square gap the layout otherwise assumes
   (the plugin's own drag-placeholder box, ".ui-sortable-placeholder", *is*
   hardcoded to 80x80 for comparison), leaving uneven space on each side.
   Forcing a square 80x80 box with object-fit so the photo still fills it
   without distortion matches that placeholder size and centers the visible
   thumbnail evenly between the two flanking drag-handle icons. Left
   unscoped (not wrapped in .woocommerce.product) since the design editor is
   also reachable as its own iframe/page outside that wrapper. NOTE: this
   turned out not to actually apply on the live /design-editor/ page --
   that page never loads this stylesheet at all (or any theme CSS), only
   Lumise's own plugin CSS plus its generated custom.css. Left here anyway
   in case the design editor is ever reachable via the normal theme
   template elsewhere; the real, effective fix lives in Lumise's own
   uploads/lumise_data/user_data/custom.css (see the comment block added
   there) plus the zzz-lumise-custom-css-cachebust.php mu-plugin. */
div#lumise-stage-nav ul li img {
	width: 80px !important;
	height: 80px !important;
	object-fit: cover;
}

/* Custom Hoodie Printing Cape Town landing page (page ID 137) -- image
   showcase section
   ===========================================================================
   Chris asked for the new hoodie SEO landing page to include at least one
   image (with alt text) alongside the page's text content. Styled to match
   the same card language already used elsewhere on the site for a plain
   photo + caption (e.g. the Size & Colour Guide page's .lp-specs-image-wrap:
   rounded corners, soft shadow, centered), but under its own page-specific
   class names rather than reusing that class directly -- per Chris's
   "individual page styling" preference, so a future edit to either page's
   image treatment can't ripple onto the other. The photo itself is the real
   Grey Melange hoodie product photo already uploaded to the Media Library
   (attachment 135), used here as a stand-in until dedicated lifestyle
   photography for this page exists. */
.lp-hoodie-showcase {
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}

.lp-hoodie-showcase img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	display: block;
	margin: 0 auto 1.5rem;
}

.lp-hoodie-showcase-caption {
	color: #666;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 700px;
	margin: 0 auto;
}

/* Generic photo showcase -- shared shell for Home/Services SEO image blocks
   ===========================================================================
   Home (id 47) and Services (id 39) both needed a real, alt-texted image
   added to satisfy RankMath's "rich media present" + "focus keyword in
   image alt text" checks. Rather than reuse .lp-hoodie-showcase (named for
   a specific product/page) or duplicate its rules again under a second
   page-specific name, this is a deliberately generic, reusable shell for
   "one image + one caption, centered" -- visually identical to
   .lp-hoodie-showcase -- shared across any page that just needs a plain
   photo block, since there's nothing page-specific about the styling
   itself (unlike layout overrides, which stay page-ID-scoped per Chris's
   convention). */
.lp-photo-showcase {
	max-width: 500px;
	margin: 0 auto;
	text-align: center;
}

.lp-photo-showcase img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	display: block;
	margin: 0 auto 1.5rem;
}

.lp-photo-showcase-caption {
	color: #666;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 700px;
	margin: 0 auto;
}