/*
 * Shop layout.
 *
 * Theme-owned - not part of the frontend repository copy in this folder. Matches
 * html/block/formulations-list/formulations-list.css for the archive loop itself.
 * --shop-columns / --shop-gap remain only for the related products, up-sells and
 * cross-sells widgets on the single product page, which the reference design never
 * shows and which still render through core WooCommerce's <ul class="products">
 * wrapper rather than .formulations-products.
 *
 * TO ADJUST: change the custom properties below rather than hunting selectors.
 */

.woocommerce-section {
	--shop-columns: 3;
	--shop-gap: 1.5rem;
}

/* ==========================================================================
   Formulations hero

   Rendered by nubioage_shop_hero(), called from woocommerce/archive-product.php.
   Matches html/block/formulations-hero/formulations-hero.css exactly for the
   default (media-right, both fields filled) case. --media-left and
   --title-only are this theme's own additions for category/tag archives the
   reference never shows a hero for - kept working, not specified by design.
   ========================================================================== */

/*
 * The formulations hero owns the full-bleed top-of-page background itself -
 * nubioage_page_has_gradient() already keeps the generic overlay off the shop
 * archive; this removes .page-content's own padding-top too, so the hero's
 * gradient sits flush against the header with nothing behind it.
 */
body.woocommerce-shop .page-content,
body.tax-product_cat .page-content,
body.tax-product_tag .page-content {
	padding-top: 0;
}

/*
 * `section.formulations-hero`, not `.formulations-hero`: global-style.css sets
 * padding-top on `section:first-child`, which outranks a single class and
 * would beat the 66px/100px below.
 */
section.formulations-hero {
	position: relative;
	background: radial-gradient(165.34% 347.18% at 33.4% -31%, #FFFFFF 0%, #CEE7FF 100%);
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
	padding-bottom: 0;
	padding-top: 66px !important;
}

.formulations-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 2rem;
}

/* Placement only - the heading stays first in the markup either way. */
.formulations-hero--media-left .formulations-hero-grid {
	grid-template-columns: 1fr 1fr;
}

.formulations-hero--media-left .formulations-hero-content {
	grid-column: 2;
	grid-row: 1;
}

.formulations-hero--media-left .formulations-hero-visual {
	grid-column: 1;
	grid-row: 1;
}

.formulations-hero--title-only .formulations-hero-grid {
	grid-template-columns: minmax(0, 1fr);
}

.formulations-hero-title {
	font-size: var(--fs-62-42);
	font-weight: 300;
	margin-bottom: 1.25rem;
}

.formulations-hero-title:last-child {
	margin-bottom: 0;
}

.formulations-hero-desc {
	font-size: var(--fs-18);
	max-width: 29rem;
	color: var(--nba-ink);
	margin-bottom: 0;
}

/*
 * The reference's .formulations-hero-desc is a single <p>. Ours wraps a <div> around
 * one or more <p>s instead - nubioage_kses_simple() allows real paragraph breaks in
 * the ACF field, unlike the reference's fixed mockup text. Without this, the inner
 * <p>'s own margin-bottom (1rem, from Bootstrap's reboot) sits inside the div's
 * margin-bottom: 0 and inflates the content column, which .formulations-hero-grid's
 * align-items: center then centers on - shifting the title and description upward
 * relative to the image instead of matching the reference's flush bottom edge.
 */
.formulations-hero-desc p {
	margin-bottom: 1rem;
}

.formulations-hero-desc p:last-child {
	margin-bottom: 0;
}

.formulations-hero-visual {
	text-align: center;
}

.formulations-hero-image {
	width: 100%;
	max-width: 386px;
	height: auto;
}

@media (max-width: 767.98px) {
	section.formulations-hero {
		padding-top: 100px !important;
		background: linear-gradient(180deg, #FFFFFF 0%, #CEE7FF 100%);
	}

	.formulations-hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 0;
	}

	/* Undo the swap, or both placements resolve to the same cell. */
	.formulations-hero--media-left .formulations-hero-grid {
		grid-template-columns: 1fr;
	}

	.formulations-hero--media-left .formulations-hero-content,
	.formulations-hero--media-left .formulations-hero-visual {
		grid-column: 1;
		grid-row: auto;
	}

	.formulations-hero-desc {
		margin-inline: auto;
	}

	.formulations-hero-visual {
		max-width: 220px;
		margin-inline: auto;
	}
}

/* ==========================================================================
   View toggle

   Matches html/block/formulations-list/formulations-list.css exactly. The toggle
   itself is real <a>s (see nubioage_shop_view_toggle()), not the reference's
   <button>s, so the CSS below styles an anchor instead - visually identical either
   way, since nothing here depends on the element being a button.
   ========================================================================== */

.formulations-toolbar {
	display: flex;
	justify-content: center;
	margin-bottom: 1.75rem;
}

.formulations-view-toggle {
	display: inline-flex;
	border-radius: 6px;
	background-color: #F1F1F1;
	border: 4px solid #F1F1F1;
}

.formulations-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--nba-ink);
	font-size: var(--fs-14);
	min-width: 100px;
	font-weight: 400;
	text-decoration: none;
	transition: var(--td-3);
}

.formulations-view-btn.is-active {
	background-color: var(--nba-blue);
	color: var(--nba-white);
}

/* ==========================================================================
   Product loop

   .formulations-products[data-view] carries the layout - see content-product.php
   for why grid and list actions both always render inside .formulation-card.
   shop.js flips [data-view] instantly on click; the href on each toggle link is the
   no-JS fallback, and reloads with the same view server-rendered.
   ========================================================================== */

.formulation-card {
	display: flex;
	gap: 1.25rem;
	position: relative;
}

/*
 * Only ever rendered by content-product.php when is_product() is true - see
 * nubioage_shop_category_badge(). Absolutely positioned over .formulation-thumb,
 * hence .formulation-card needing position: relative above.
 */
.formulation-badges {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	display: flex;
	gap: 0.375rem;
	z-index: 1;
}

.formulation-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.375rem;
	border-radius: 3px;
	background-color: var(--nba-white);
	color: var(--nba-ink);
	font-size: var(--fs-10);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.formulation-badge--new {
	background-color: var(--nba-ink);
	color: var(--nba-white);
}

.formulation-thumb {
	flex-shrink: 0;
}

.formulation-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

.formulation-title {
	font-size: 1.375rem;
	font-weight: 400;
	margin-bottom: 0.5rem;
}

.formulation-title a {
	color: var(--nba-ink);
	transition: color 0.2s ease;
}

.formulation-title a:hover,
.formulation-title a:focus-visible {
	color: var(--nba-blue);
}

.formulation-desc {
	font-size: var(--fs-14);
	color: #222228;
	font-weight: 400;
	margin-bottom: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	max-width: 380px;
}

.formulation-learn-more {
	color: var(--nba-ink);
	font-size: var(--fs-14);
	font-weight: 400;
}

.formulation-learn-more:hover,
.formulation-learn-more:focus-visible {
	color: var(--nba-blue);
}

.formulation-price {
	font-weight: 400;
	color: var(--nba-ink);
	white-space: nowrap;
}

/* Explicit, not relying on the browser default - see product.css's
   .formulation-cart-price del for why. */
.formulation-price del {
	text-decoration: line-through;
}

/*
 * Grid and list actions both always exist in the markup (see content-product.php);
 * these are the defaults for contexts .formulations-products[data-view] never
 * reaches - related products, up-sells, cross-sells - so those fall back to
 * grid-style actions instead of showing both blocks stacked.
 */
.formulation-grid-actions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	margin-top: auto;
	text-align: center;
}

.formulation-list-actions {
	display: none;
}

.formulation-grid-actions .formulation-login-btn,
.formulation-grid-actions .formulation-shop-btn {
	font-size: var(--fs-12);
	padding: 0.5rem 1.25rem;
}

/* Grid view (default) */
.formulations-products[data-view="grid"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.formulations-products[data-view="grid"] .formulation-card {
	padding: 1.25rem;
	background: linear-gradient(180deg, #CEE7FF 0%, #F8F9FD 100%);
	border-radius: 20px;
	transition: var(--td-3);
}

@media (hover: hover) and (pointer: fine) {
	.formulations-products[data-view="grid"] .formulation-card:hover {
		box-shadow:
			0px 2.77px 2.21px 0px #00000005,
			0px 6.65px 5.32px 0px #00000007,
			0px 12.52px 10.02px 0px #00000009,
			0px 22.34px 17.87px 0px #0000000B,
			0px 41.78px 33.42px 0px #0000000D,
			0px 100px 80px 0px #00000012;
	}
}

.formulations-products[data-view="grid"] .formulation-thumb {
	width: 38%;
	height: 270px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.formulations-products[data-view="grid"] .formulation-thumb img {
	max-width: 120px;
	height: auto;
	filter: drop-shadow(30px 24px 32px rgba(0, 0, 0, 0.23));
}

.formulations-products[data-view="grid"] .formulation-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-block: 1.25rem;
}

.formulations-products[data-view="grid"] .formulation-desc {
	font-size: var(--fs-12);
	-webkit-line-clamp: 3;
	margin-bottom: 1.25rem;
}

/* List view */
.formulations-products[data-view="list"] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.formulations-products[data-view="list"] .formulation-card {
	align-items: center;
	padding: 1.25rem;
	border-radius: 12px;
	background: #F9F9F9;
}

.formulations-products[data-view="list"] .formulation-thumb {
	width: 80px;
	height: 80px;
	background: linear-gradient(180deg, #CEE7FF 0%, #FFFFFF 100%);
	border-radius: 12px;
	padding: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.formulations-products[data-view="list"] .formulation-body {
	flex: 1;
}

.formulations-products[data-view="list"] .formulation-desc {
	-webkit-line-clamp: 2;
}

.formulations-products[data-view="list"] .formulation-grid-actions {
	display: none;
}

.formulations-products[data-view="list"] .formulation-list-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.formulation-list-actions .formulation-login-btn {
	flex-shrink: 0;
	font-size: var(--fs-14);
	white-space: nowrap;
}

@media (max-width: 1199.98px) {
	.formulations-products[data-view="grid"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 991.98px) {
	.formulations-products[data-view="list"] .formulation-card {
		flex-wrap: wrap;
	}

	.formulations-products[data-view="list"] .formulation-list-actions {
		width: 100%;
	}

	.formulations-products[data-view="list"] .formulation-desc {
		max-width: 600px;
	}
}

@media (max-width: 767.98px) {
	.formulations-products[data-view="grid"] {
		grid-template-columns: 1fr;
	}

	.formulations-products[data-view="list"] .formulation-card {
		flex-wrap: wrap;
	}

	.formulations-products[data-view="list"] .formulation-list-actions {
		flex-basis: 100%;
		justify-content: space-between;
		margin-top: 0.75rem;
	}
}

@media (max-width: 575px) {
	.formulation-list-actions .formulation-login-btn {
		width: 100%;
	}

	.formulations-view-toggle {
		width: 100%;
	}

	.formulations-view-btn {
		flex: 1;
	}
}

@media (max-width: 432px) {
	.formulations-products[data-view="list"] .formulation-list-actions {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.formulation-price {
		width: 100%;
	}

	.formulation-cart-btn {
		flex: 1;
	}
}
@media (max-width: 375px) {
    .formulations-products[data-view="grid"] .formulation-card{
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .formulations-products[data-view="grid"] .formulation-thumb{
        height: auto;
        justify-content: center;
        align-items: center;
        margin-inline: auto;
    }
}

/* ==========================================================================
   Related products (single product page)

   Matches html/block/product-related/product-related.html. Own template override
   now (woocommerce/single-product/related.php), reusing .formulations-products
   [data-view="grid"] and .formulation-card above rather than a <ul class="products">
   grid of its own.
   ========================================================================== */

.product-related {
	padding-bottom: var(--space-40-20) !important;
}

.product-related-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.product-related-title {
	font-size: 2rem;
	font-weight: 400;
	margin: 0;
}

.product-related .view-all-link {
	font-size: var(--fs-14);
	padding: 0.5rem 1.125rem;
}

@media (max-width: 575px) {
	.product-related-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Up-sells, cross-sells

   These still render through core WooCommerce's <ul class="products"> (no
   override template exists for them - unlike related products above), sharing
   content-product.php with the archive. The reference design has no equivalent
   for either, so this is theme-owned: reuse the archive's grid card look, floats
   neutralised, three per row.
   ========================================================================== */

.up-sells ul.products,
.cross-sells ul.products {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(var(--shop-columns), minmax(0, 1fr));
	gap: var(--shop-gap);
}

/* Neutralises woocommerce-layout.css, which floats these items on every WooCommerce page. */
.woocommerce-active .up-sells ul.products li.product,
.woocommerce-active .cross-sells ul.products li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 1.25rem;
	background: linear-gradient(180deg, #CEE7FF 0%, #F8F9FD 100%);
	border-radius: 20px;
}

.woocommerce-active .up-sells ul.products::before,
.woocommerce-active .up-sells ul.products::after,
.woocommerce-active .cross-sells ul.products::before,
.woocommerce-active .cross-sells ul.products::after {
	content: none;
	display: none;
}

@media (max-width: 991.98px) {
	.up-sells ul.products,
	.cross-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.up-sells ul.products,
	.cross-sells ul.products {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Quantity stepper and cart button

   Matches html/block/formulations-list/formulations-list.css. .formulation-qty-value
   is a real number input here rather than the reference's <span> - see
   woocommerce/loop/add-to-cart.php for why - styled the same either way.
   ========================================================================== */

.formulation-qty {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #E1E3EC;
	border: 4px solid #E1E3EC;
	border-radius: 50px;
}

.formulation-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--qty-btn-size: 36px;
	width: var(--qty-btn-size);
	height: var(--qty-btn-size);
	line-height: var(--qty-btn-size);
	border: 0;
	border-radius: 50%;
	background-color: rgba(11, 2, 39, 0.125);
	color: #F3F5FD;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.formulation-qty-btn:last-child {
	background-color: var(--nba-ink);
	color: var(--nba-white);
}

.formulation-qty-value {
	width: 1.5rem;
	border: 0;
	background: transparent;
	font-size: var(--fs-14);
	font-weight: 400;
	text-align: center;
	color: var(--nba-ink);
	/* Hides the native spinners; the stepper buttons replace them. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.formulation-qty-value::-webkit-outer-spin-button,
.formulation-qty-value::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.formulation-cart-btn {
	position: relative;
	font-size: var(--fs-14);
	padding: 0.6rem 1.25rem;
	white-space: nowrap;
	gap: 0.5rem;
}

/*
 * WooCommerce appends this after an AJAX add; the design has no slot for it, and the
 * sticky bar already carries View cart.
 *
 * `a.added_to_cart` with the body class, not `.added_to_cart` on its own:
 * woocommerce.css sets `.woocommerce a.added_to_cart { display: inline-block }`, which
 * outranks a two-class selector and left the link visible in the list rows.
 */
.woocommerce-active .woocommerce-section a.added_to_cart {
	display: none;
}

/*
 * Add to cart button states.
 *
 * WooCommerce's script owns the classes: `loading` for the duration of the request,
 * `added` once it resolves. `is-added` is ours, added by shop.js and removed again
 * after 4s so the button does not sit in a stale success state.
 */
.formulation-cart-btn.loading .formulation-cart-label,
.formulation-cart-btn.loading i {
	visibility: hidden;
}

.formulation-cart-btn.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	margin: -0.5rem 0 0 -0.5rem;
	border: 2px solid color-mix(in srgb, var(--nba-white) 35%, transparent);
	border-top-color: var(--nba-white);
	border-radius: 50%;
	animation: nubioage-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.formulation-cart-btn.loading::after {
		animation-duration: 2.4s;
	}
}

.formulation-cart-btn.is-added {
	background-color: var(--nba-blue);
	border-color: var(--nba-blue);
}

/* ==========================================================================
   Header cart drawer

   .cart-toggle, .cart-count and the full .cart-offcanvas/.cart-topbar/.cart-table/
   .cart-summary redesign live in global-style.css now - verbatim from the frontend
   repo's own copy, like the rest of that file. nubioage_cart_drawer_html() in
   inc/woocommerce.php outputs those exact classes.
   ========================================================================== */

/* Rendered at zero for the AJAX fragment to target, but not shown. */
.cart-count--empty {
	display: none;
}

/*
 * Quantity-update and remove both replace the row entirely on success (it is part
 * of the div.cart-drawer fragment), so this is only ever visible for the brief
 * window an AJAX request is in flight, or if one fails and the row survives to
 * have the class removed again. Theme-owned - the reference has no equivalent
 * since its own stepper and remove are pure client-side, nothing to wait on.
 */
.cart-row.is-updating,
.cart-row.is-removing {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/*
 * The Undo action inside .cart-toast, appended by assets/js/shop.js only when the
 * toast is for a removal. Theme-owned - the reference's toast never offers one.
 */
.cart-toast-undo {
	border: 0;
	background: none;
	padding: 0;
	margin-left: 0.5rem;
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Sticky cart bar

   Matches html/block/formulations-list/formulations-list.css's .cart-summary-bar,
   except for the show/hide mechanism: the reference (and this file, until now)
   toggled it with display: none/block, abruptly, unlike .product-sticky-bar's
   smooth transform/opacity transition on the product page - ported that same
   treatment here for consistency between the two sticky bars, by request. The
   visibility-state logic itself is unchanged: .is-grid-view hides it in grid, and
   .is-footer-visible hides it again once the footer scrolls into view so it never
   overlaps it - both classes are still kept in sync by assets/js/shop.js, which
   needed no changes for this.
   ========================================================================== */

.cart-summary-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background-color: rgba(255, 255, 255, 0.698);
	border-top: 0.5px solid rgba(50, 132, 251, 0.2);
	backdrop-filter: blur(24px);
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.cart-summary-bar.is-visible:not(.is-grid-view) {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.cart-summary-bar.is-visible.is-footer-visible:not(.is-grid-view) {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.cart-summary-bar {
		transition: none;
	}
}

.cart-summary-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1rem;
}

/*
 * No min-width of its own is a flex item's default min-width: auto - and
 * .cart-summary-bar-names' white-space: nowrap (below) raises that to the
 * full, unwrapped width of every product name joined together, which this
 * box then refuses to shrink below. .cart-summary-bar-actions never shrinks
 * either (flex-shrink: 0), so with more than a couple of cart items the row
 * overflows its container and pushes Checkout off the right edge - min-width:
 * 0 lets this box actually shrink to the row's available width, so
 * .cart-summary-bar-names' own overflow: hidden/text-overflow: ellipsis can
 * finally take effect instead of never being given the chance to.
 */
.cart-summary-bar-info {
	min-width: 0;
}

.cart-summary-bar-subtotal {
	font-weight: 400;
	color: var(--nba-ink);
	margin-bottom: 0.25rem;
}

.cart-summary-bar-subtotal strong {
	font-weight: 600;
	margin-left: 0.5rem;
}

.cart-summary-bar-names {
	font-size: var(--fs-12);
	color: var(--nba-gray);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cart-summary-bar-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.cart-summary-view-btn,
.cart-summary-checkout-btn {
	font-size: var(--fs-14);
	white-space: nowrap;
}

@media (max-width: 575px) {
	.cart-summary-bar-inner {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.cart-summary-bar-actions {
		width: 100%;
	}

	.cart-summary-view-btn,
	.cart-summary-checkout-btn {
		flex: 1;
	}
}

/* ==========================================================================
   Cart toast

   Matches html/block/formulations-list/formulations-list.css. Built and shown by
   assets/js/shop.js on a real added_to_cart event - there is no server render for
   this, the element does not exist until the first add.
   ========================================================================== */

.cart-toast {
	position: fixed;
	right: 1.5rem;
	bottom: 6rem;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: 50px;
	background-color: var(--nba-blue);
	color: var(--nba-white);
	font-size: var(--fs-14);
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(11, 2, 39, 0.18);
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cart-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.cart-toast {
		transition: none;
	}
}

@media (max-width: 575px) {
	.cart-toast {
		right: 1rem;
		bottom: 9rem;
	}
}