/**
 * Phase 24.29 — Mobile container architecture cleanup.
 *
 * Principle: on narrow screens, major WRE sections are primary full-width
 * sibling cards — not cards nested inside cards. Structural wrappers may stay
 * in the DOM but become visually neutral.
 *
 * Breakpoint: max-width 767px (matches existing WRE 1→3 grid).
 * Desktop/tablet (≥768px): unchanged intentional hierarchy.
 *
 * No color / typography / business-logic changes.
 * Scoped to WRE classes only. Do not restyle [data-wre-fragment] hosts.
 */

/* -------------------------------------------------------------------------- */
/* Product: neutralize outer current-product shell                            */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wre-current-product {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.wre-current-product--hint {
		padding: 0.75rem 0.9rem;
		border: 1px solid var(--wre-color-border, #d4cbb8);
		border-left: 4px solid var(--wre-color-primary, #c4a35a);
		border-radius: var(--wre-radius, 2px);
		background: var(--wre-color-light, #f5f0e6);
	}

	.wre-current-product .summary,
	.wre-current-product .entry-summary,
	.wre-current-product .woocommerce-product-gallery,
	.wre-current-product .woocommerce-tabs,
	.wre-current-product .related.products,
	.wre-current-product .upsells.products {
		width: 100%;
		max-width: none;
	}

	/* Related / upsell cards: one chrome layer, full width */
	.wre-current-product .related ul.products,
	.wre-current-product .upsells ul.products {
		width: 100% !important;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.wre-current-product .related ul.products li.product,
	.wre-current-product .upsells ul.products li.product {
		width: 100% !important;
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0.75rem 0.9rem;
		box-sizing: border-box;
	}

	/* Major booking surfaces use available width */
	.wre-product-booking,
	.wre-product-booking .wre-rental-calendar,
	.wre-product-booking__summary,
	.wre-product-booking__confirm,
	.wre-product-availability {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.wre-product-booking__summary,
	.wre-product-booking__confirm,
	.wre-product-availability {
		padding: 0.75rem 0.9rem;
	}

	.wre-product-booking .wre-rental-calendar {
		padding: 0.65rem 0.7rem;
	}

	.wre-current-product .quantity,
	.wre-current-product .quantity .qty,
	.wre-current-product .single_add_to_cart_button,
	.wre-current-product form.cart {
		max-width: 100%;
		box-sizing: border-box;
	}

	.wre-current-product .single_add_to_cart_button {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------- */
/* Cart: major sections as siblings; shell stays structural                   */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wre-cart-shell {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
	}

	.wre-cart-shell .wre-rental-period,
	.wre-cart-shell .wre-rental-summary,
	.wre-cart-shell .wre-recommendations,
	.wre-cart-shell .cart_totals,
	.wre-cart-shell .cart-collaterals,
	.wre-cart-shell .woocommerce-cart-form {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	/* Choose dates: one major card — tighten pad (overrides 480px increase) */
	.wre-rental-period {
		padding: 0.75rem 0.9rem;
		margin-left: 0;
		margin-right: 0;
	}

	.wre-rental-period .wre-rental-calendar {
		width: 100%;
		max-width: none;
		padding: 0.65rem 0.7rem;
		box-sizing: border-box;
	}

	.wre-rental-period__note,
	.wre-rental-availability,
	.wre-rental-period__live:not(:empty),
	.wre-rental-period__hold-status {
		padding: 0.55rem 0.65rem;
		box-sizing: border-box;
		max-width: 100%;
	}

	.wre-rental-summary {
		padding: 0.75rem 0.9rem;
	}

	.wre-cart-shell .cart_totals,
	.wre-cart-shell--rental-only .woocommerce-cart-form table.shop_table.cart td.actions {
		padding: 0.75rem 0.9rem;
		box-sizing: border-box;
	}

	.wre-cart-shell .coupon,
	.wre-cart-shell .coupon .input-text,
	.wre-cart-shell .wc-proceed-to-checkout a.checkout-button {
		max-width: 100%;
		box-sizing: border-box;
	}

	.wre-cart-shell .wc-proceed-to-checkout a.checkout-button {
		width: 100%;
		display: flex;
	}
}

/* -------------------------------------------------------------------------- */
/* Check Availability                                                         */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wre-availability-page,
	.wre-availability-page__results,
	.wre-availability-page__grid {
		width: 100%;
		max-width: none;
	}

	.wre-availability-page__form-shell {
		width: 100%;
		max-width: none;
		padding: 0.75rem 0.9rem;
		box-sizing: border-box;
	}

	.wre-availability-page__card,
	.wre-availability-page__body {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.wre-availability-page__body {
		padding: 0.75rem 0.9rem;
	}

	.wre-product-availability {
		width: 100%;
		max-width: none;
		padding: 0.75rem 0.9rem;
		box-sizing: border-box;
	}
}

/* -------------------------------------------------------------------------- */
/* Catalogs                                                                   */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wre-catalog,
	.wre-catalog__grid {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.wre-catalog__card {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.wre-catalog__card-inner {
		padding: 0.75rem 0.9rem;
		box-sizing: border-box;
	}
}

/* -------------------------------------------------------------------------- */
/* Recommendations (major section; cards stay nested)                         */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wre-recommendations {
		width: 100%;
		max-width: none;
		padding: 0.75rem 0.9rem;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	.wre-recommendations__card,
	.wre-recommendations__card-inner,
	.wre-recommendations__byo {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.wre-recommendations__card-inner {
		padding: 0.75rem 0.9rem;
	}
}

/* -------------------------------------------------------------------------- */
/* My Account                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wre-account,
	.wre-account.wre-ui {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;
	}

	.wre-account-card,
.wre-account-login-intro,
.wre-account-empty,
.wre-account-order-detail {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	.wre-account-card,
	.wre-account-login-intro,
	.wre-account-empty,
	.wre-account-order-detail {
		padding: 0.75rem 0.9rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Calendar / forms — overflow safety (customer)                              */
/* -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wre-ui .wre-rental-calendar,
	.wre-product-booking .wre-rental-calendar,
	.wre-rental-period .wre-rental-calendar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wre-ui input[type="date"],
	.wre-ui input[type="number"],
	.wre-ui input[type="text"],
	.wre-ui select,
	.wre-ui textarea,
	.wre-rental-period__input,
	.wre-product-availability__input,
	.wre-availability-page__input {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}
}