/* Same un-constraining trick as Shop/Product -- Astra's centered/width-limited
   .ast-container fights the full-bleed fixed-background layout, and Astra sets
   display:flex on .ast-container for .woocommerce-page contexts which would pull
   our elements into a row instead of stacking. */
/* Stripe's Payment Element auto-detects light/dark styling client-side, with
   no server-passed appearance option (confirmed empty in wc_stripe_upe_params)
   and no filter hook exposed -- it reads computed style directly off the
   checkout container. A plain body background wasn't enough (confirmed via
   live test -- the detector doesn't walk up past this element to body), so
   this needs to be non-transparent right on .wc-block-checkout itself, which
   is otherwise deliberately transparent so the fixed photo overlay shows
   through. Using a mostly-opaque dark tone rather than fully solid keeps a
   hint of the photo visible, matching the rest of the page, while still
   reading as a "dark" background to Stripe's detector. */
body.a5-bag-page {
	background-color: #151616;
}
.a5-bag-inner .wc-block-checkout {
	background-color: rgba(21, 22, 22, 0.85);
}

body.a5-bag-page .ast-container {
	display: block !important;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
body.a5-bag-page .site-content {
	overflow: visible;
}

/* Same fixed-background technique as Shop/Product -- see the long comment in
   a5-site-styles/site.css for why it has to be built this way. Own dark photo
   (Disc01), separate from Shop's own background, but both dark-toned so the
   whole Shop -> Product -> Bag flow still reads as one continuous "shopping"
   section of the site. */
.a5-bag-fixed-bg {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
	padding: 140px 24px 96px;
}
.a5-bag-fixed-bg::before {
	content: '';
	position: fixed;
	/* -40px/+80px parallax bleed -- see the long comment on
	   .a5-hero-fixed-bg::before in a5-site-styles/site.css for why. */
	top: -40px;
	left: 0;
	right: 0;
	/* Explicit height instead of bottom:0, and deliberately plain 100vh
	   (not 100dvh) -- see the long comment on .a5-hero-fixed-bg::before in
	   a5-site-styles/site.css for why. */
	height: calc(100vh + 80px);
	z-index: 0;
	background-color: #151616;
	background-image: url('https://after5athletics.com/wp-content/uploads/2026/08/A5_Wallpaper-Disc01-scaled.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: translateY(var(--a5-parallax-y, 0px));
}
.a5-bag-fixed-bg > * {
	position: relative;
	z-index: 1;
}

.a5-bag-inner {
	max-width: 900px;
	color: #f3f3e8;
}

.a5-bag-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 32px;
	color: #f3f3e8;
}

/* --- WooCommerce Cart/Checkout Blocks: broad restyle, not a rebuild. ---
   These target WooCommerce's own Blocks class names (unchanged markup/behavior --
   quantities, coupons, shipping calc, and the Stripe payment element all still
   work exactly as WooCommerce built them). Stripe's own payment fields render in a
   cross-origin iframe and can't be restyled from here beyond spacing/layout. */

.a5-bag-inner h2,
.a5-bag-inner h3,
.a5-bag-inner .wc-block-components-checkout-step__title,
.a5-bag-inner .wc-block-cart__totals-title,
.a5-bag-inner .wc-block-components-panel__button {
	color: #f3f3e8;
}

.a5-bag-inner p,
.a5-bag-inner label,
.a5-bag-inner .wc-block-components-product-name {
	color: rgba(243, 243, 232, 0.85);
}

.a5-bag-inner a {
	color: #f3f3e8;
}

/* Cart/order-summary line items, totals rows */
.a5-bag-inner .wc-block-cart-items,
.a5-bag-inner .wc-block-components-totals-wrapper,
.a5-bag-inner .wc-block-components-order-summary,
.a5-bag-inner .wc-block-components-checkout-step {
	border-color: rgba(243, 243, 232, 0.15) !important;
}
.a5-bag-inner .wc-block-components-totals-item,
.a5-bag-inner .wc-block-cart-items__header,
.a5-bag-inner .wc-block-cart-items__row {
	border-color: rgba(243, 243, 232, 0.12) !important;
	color: #f3f3e8;
	/* The photo behind this panel isn't a flat tone -- it has a bright patch
	   partway through (see Disc01), and light text with no backing can wash
	   out against it. The shadow adds a hard edge that holds up either way
	   without needing an opaque panel behind the whole totals block. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.a5-bag-inner .wc-block-components-totals-item__description,
.a5-bag-inner .wc-block-components-totals-item__label {
	color: rgba(243, 243, 232, 0.85);
}
.a5-bag-inner .wc-block-components-totals-item__value {
	font-weight: 700;
}
/* Estimated/order total -- the one line item that most needs to read clearly
   at a glance, so it gets extra weight and size on top of the above. */
.a5-bag-inner .wc-block-components-totals-item.wc-block-components-totals-footer-item,
.a5-bag-inner .wc-block-components-totals-footer-item {
	font-weight: 700;
}
.a5-bag-inner .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.a5-bag-inner .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 17px;
	color: #f3f3e8;
}

/* Text inputs / selects (contact + address fields, quantity input) */
.a5-bag-inner .wc-block-components-text-input input,
.a5-bag-inner .wc-block-components-text-input textarea,
.a5-bag-inner .wc-block-components-quantity-selector input,
.a5-bag-inner select,
.a5-bag-inner .wc-blocks-components-select__container {
	/* Black-based (not white-based) translucency -- Stripe's Payment Element
	   clones the #email input specifically (appendTarget
	   .wc-block-checkout__contact-fields, upeThemeInputSelector
	   .wc-block-components-text-input #email in the plugin's own JS) to read
	   its computed background/text color and pick a light or dark theme for
	   the card fields. A white-based rgba here reads as "light" to that
	   detector even though it looks like a subtle dark field against this
	   page's dark backdrop -- the raw RGB channels are still 255,255,255.
	   Black-based translucency gives the same subtle-frosted look but with
	   genuinely dark RGB values, so the card/expiry/CVC fields actually
	   render legibly instead of near-invisible light-gray-on-white. */
	background-color: rgba(0, 0, 0, 0.25) !important;
	border-color: rgba(243, 243, 232, 0.3) !important;
	color: #f3f3e8 !important;
	border-radius: 6px !important;
}
.a5-bag-inner .wc-block-components-text-input label {
	color: rgba(243, 243, 232, 0.6) !important;
	/* WooCommerce Blocks' default floating label sits at top:-2px, poking
	   slightly above the input's own top border -- looks fine against their
	   default light input background, but reads as cramped/overlapping
	   against our field styling. Nudged down for breathing room. */
	top: 2px !important;
}
.a5-bag-inner .wc-block-components-text-input.is-active label,
.a5-bag-inner .wc-block-components-text-input.has-value label {
	background: transparent !important;
}

/* Buttons: Proceed to Checkout, Place Order, Apply Coupon, etc. all share this
   component class across WooCommerce Blocks. */
.a5-bag-inner .wc-block-components-button {
	background-color: transparent !important;
	color: #f3f3e8 !important;
	border: 1.5px solid #f3f3e8 !important;
	border-radius: 10px !important;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	box-shadow: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.a5-bag-inner .wc-block-components-button:hover {
	background-color: #f3f3e8 !important;
	color: #151616 !important;
}
.a5-bag-inner .wc-block-components-button.wc-block-components-checkout-place-order-button,
.a5-bag-inner .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
	background-color: #f3f3e8 !important;
	color: #151616 !important;
}
.a5-bag-inner .wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
.a5-bag-inner .wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover {
	background-color: #ffffff !important;
}

/* Radio controls (shipping method, payment method) */
.a5-bag-inner .wc-block-components-radio-control__option {
	border-color: rgba(243, 243, 232, 0.2) !important;
	color: #f3f3e8;
}
.a5-bag-inner .wc-block-components-radio-control__option-checked {
	border-color: #f3f3e8 !important;
}

.a5-bag-inner .wc-block-components-panel {
	border-color: rgba(243, 243, 232, 0.15) !important;
}

/* Empty-cart "New in store" cross-sell grid -- this is WooCommerce's older
   classic Product block (wc-block-grid / add_to_cart_button), a different
   component family than the wc-block-components-* Cart/Checkout blocks
   styled above, so it needs its own rule rather than falling under those. */
.a5-bag-inner .wc-block-grid__product-title {
	color: #f3f3e8;
}
.a5-bag-inner .wc-block-grid__product-price {
	color: rgba(243, 243, 232, 0.85);
}
.a5-bag-inner .wc-block-grid__product-add-to-cart .add_to_cart_button {
	display: inline-block;
	background-color: transparent !important;
	color: #f3f3e8 !important;
	border: 1.5px solid #f3f3e8 !important;
	border-radius: 10px !important;
	padding: 10px 20px;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.a5-bag-inner .wc-block-grid__product-add-to-cart .add_to_cart_button:hover {
	background-color: #f3f3e8 !important;
	color: #151616 !important;
}

@media (max-width: 640px) {
	.a5-bag-fixed-bg {
		padding: 120px 20px 72px;
	}
	.a5-bag-fixed-bg::before {
		background-position: right center;
	}
}