/* =========================================================================
   Mahjong Minted - single product page
   -------------------------------------------------------------------------
   Reworks Enfold's default 33% media column into a 50/50 split, and presents
   a single Add to Cart call to action. Payment options are deferred to the
   cart (see mm_child_defer_payment_ui_to_cart() in functions.php).

   Enfold ships its shop CSS with high specificity and a #top prefix, so the
   overrides here match that convention rather than reaching for !important.
   ========================================================================= */

/* Colour tokens live in style.css, which is enqueued site-wide; only the
   measurement this layout needs is declared here. */
:root {
	--mm-gap: 50px;
}


/* -------------------------------------------------------------------------
   1. 50 / 50 media + summary
   ---------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

	#top .single-product-main-image {
		width: 50%;
		margin-right: 0;
		padding-right: var(--mm-gap);
		padding-bottom: 40px;
		box-sizing: border-box;
	}

	/* .single-product-summary is an overflow:hidden BFC, so it simply takes
	   the remaining half. Give it a little breathing room off the media. */
	#top .single-product-summary {
		padding-top: 4px;
	}

	/* The (empty) shop sidebar Enfold nests inside the media column would
	   otherwise inherit the new 50% width and add dead space. */
	#top #main .single-product-main-image .sidebar:empty,
	#top #main .single-product-main-image .inner_sidebar:empty {
		display: none;
	}
}


/* -------------------------------------------------------------------------
   2. Product media
   ---------------------------------------------------------------------- */

/* The main image carries ~6% of baked-in white padding in the source artwork,
   while the thumbnails are hard-cropped by WooCommerce and fill their frame
   edge to edge. Without a visible boundary the main image reads as wrongly
   inset against the strip below it. Matching the thumbnails' hairline frame
   gives the eye a shared edge to align on, so the padding reads as matting
   rather than a layout fault. Trimming the source assets is the real fix. */
#top .single-product-main-image .images > a,
#top .template-shop .single-product-main-image .images a {
	display: block;
	border: 1px solid var(--mm-rule);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

#top .single-product-main-image .woocommerce-product-gallery__wrapper > a img {
	width: 100%;
	height: auto;
}

/* Thumbnail strip: even 4-up grid with real gaps, replacing Enfold's
   float + percentage-margin approach which drifts at wider column widths. */
#top .single-product-main-image .thumbnails {
	width: 100%;
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

#top .single-product-main-image .thumbnails a {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--mm-rule);
	transition: border-color .18s ease, opacity .18s ease;
}

#top .single-product-main-image .thumbnails a:hover {
	border-color: var(--mm-pink);
}

#top .single-product-main-image .thumbnails a img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}


/* -------------------------------------------------------------------------
   3. Summary column
   ---------------------------------------------------------------------- */

/* Font size is deliberately left to the theme options (H1 = 56px), which
   matches the reference's large title. Only rhythm is adjusted here. */
#top .single-product-summary .product_title {
	line-height: 1.12;
	letter-spacing: -.01em;
	margin-bottom: 18px;
}

#top .single-product-summary .summary > p.price,
#top .single-product-summary .summary p.price span.amount {
	font-size: 26px;
	font-weight: 600;
	color: #2b3a42;
}

#top .single-product-summary .summary > p.price {
	margin-bottom: 20px;
}

#top .single-product-summary .woocommerce-product-details__short-description {
	margin-bottom: 20px;
	max-width: 46em;
}

#top .single-product-summary p.stock {
	font-size: 14px;
	color: var(--mm-muted);
	margin-bottom: 22px;
}


/* -------------------------------------------------------------------------
   4. The one call to action
   ---------------------------------------------------------------------- */

#top .single-product-summary form.cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	max-width: 420px;
	margin-bottom: 28px;
}

/* Quantity stepper sits on its own row above the button, as in the reference. */
#top .single-product-summary form.cart .quantity {
	display: inline-flex;
	align-items: stretch;
	align-self: flex-start;
	float: none;
	margin: 0;
	border: 1px solid var(--mm-rule);
	border-radius: 40px;
	overflow: hidden;
}

#top .single-product-summary form.cart .quantity input.minus,
#top .single-product-summary form.cart .quantity input.plus {
	width: 42px;
	height: 46px;
	margin: 0;
	border: none;
	background: transparent;
	color: #2b3a42;
	font-size: 18px;
	line-height: 1;
	border-radius: 0;
}

#top .single-product-summary form.cart .quantity input.minus:hover,
#top .single-product-summary form.cart .quantity input.plus:hover {
	background: rgba(20, 36, 46, .05);
	color: var(--mm-pink-dark);
}

#top .single-product-summary form.cart .quantity input.qty {
	width: 52px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	text-align: center;
	font-size: 15px;
	border-radius: 0;
}

#top .single-product-summary form.cart .single_add_to_cart_button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 17px 24px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	border: 1px solid var(--mm-pink);
	border-radius: 40px;
	background: var(--mm-pink);
	color: #fff;
	transition: background-color .18s ease, border-color .18s ease;
}

#top .single-product-summary form.cart .single_add_to_cart_button:hover,
#top .single-product-summary form.cart .single_add_to_cart_button:focus {
	background: var(--mm-pink-dark);
	border-color: var(--mm-pink-dark);
	color: #fff;
}

/* Safety net: if a payment plugin adds an express/BNPL element on a template
   the PHP hook removal does not cover, keep the product page to one action. */
#top.single-product .single-product-summary .wcpay-express-checkout-wrapper,
#top.single-product .single-product-summary #wcpay-express-checkout-button-separator,
#top.single-product .single-product-summary #payment-method-message {
	display: none;
}

/* GoDaddy Payments' wallet buttons are printed by a must-use plugin that only
   exists on production, so they cannot be unhooked from a theme safely (see
   css/cart.css). Inline display:block from wallets-frontend.js forces the
   !important. */
#top.single-product .mwc-external-checkout-buttons,
#top.single-product .mwc-external-checkout-buttons-divider {
	display: none !important;
}


/* -------------------------------------------------------------------------
   5. Meta + tabs
   ---------------------------------------------------------------------- */

#top .single-product-summary .product_meta {
	font-size: 14px;
	color: var(--mm-muted);
	padding-top: 18px;
	border-top: 1px solid var(--mm-rule);
}


/* -------------------------------------------------------------------------
   6. Stacked layout - Enfold already sets the media column to 100% at 767px,
      this just tidies the spacing it leaves behind.
   ---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

	#top .single-product-main-image {
		margin: 0 0 26px 0;
		padding-right: 0;
		padding-bottom: 0;
	}

	/* Enfold's generated stylesheet sets h1 via #top #wrap_all .all_colors h1
	   (two IDs), so the site-wide 56px has to be outranked rather than merely
	   restated - it is far too large for a phone-width column. */
	#top #wrap_all .all_colors .single-product-summary .product_title {
		font-size: 32px;
	}

	#top .single-product-summary form.cart {
		max-width: none;
	}

	/* The grid above is declared outside a media query and loads after
	   Enfold's shop CSS, so it also wins below 767px. Drop to three columns
	   so the thumbnails stay a comfortable tap target on a phone. */
	#top .single-product-main-image .thumbnails {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	/* Enfold's mobile rule is .responsive-prefixed and so outranks the grid
	   item reset above, which would leave each thumbnail at 30% of its cell.
	   Match that specificity to win it back. */
	.responsive #top .single-product-main-image .thumbnails a {
		width: auto;
		margin: 0;
	}
}