/*
 * Checkout + Minha conta — Horizonte do Açaí
 *
 * Scoped to `body.woocommerce-checkout` and `body.woocommerce-account`, so the
 * shop, cart and product pages are untouched.
 *
 * Two things made these pages look unfinished, and both are inherited rather
 * than authored here:
 *
 * 1. Their tables carry WooCommerce's `shop_table` class, and
 *    woocommerce-style.css paints every `shop_table th` with a grey fill using
 *    !important. That is where the grey blocks in "Seu Pedido" and in the order
 *    list came from.
 * 2. The same stylesheet gives a card (white, rounded, shadowed) to the review
 *    container *and* to the table inside it, while Elementor already draws one
 *    around both — three nested boxes. The rules below keep the outermost card
 *    and flatten what is inside it.
 *
 * Every !important below exists for the same single reason: the declaration it
 * replaces in woocommerce-style.css is itself !important, and nothing weaker
 * can win. None of them is there to beat plain specificity.
 */

body.woocommerce-checkout,
body.woocommerce-account {
	--hda-k-deep: var(--e-global-color-6597c5e, #261559);
	--hda-k-purple: var(--e-global-color-e02c158, #471ea7);
	--hda-k-soft: #f1ecfb;
	--hda-k-ink: #2c2640;
	--hda-k-ink-soft: #6b6580;
	--hda-k-line: rgba(60, 40, 100, 0.11);
	--hda-k-bg: #f5f5f7;
	--hda-k-card: #fff;
	--hda-k-shadow: 0 8px 30px rgba(30, 20, 60, 0.06);
	--hda-k-radius: 16px;
	--hda-k-font: var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
	--hda-k-focus: 0 0 0 3px rgba(71, 30, 167, 0.35);

	background: var(--hda-k-bg);
}

/* Shared: no grey header cells on either page.
   Overrides `.woocommerce table.shop_table th`. */
body.woocommerce-checkout .shop_table th,
body.woocommerce-account .shop_table th {
	background: transparent !important;
	color: var(--hda-k-ink-soft) !important;
}

/* ============================================================
   CHECKOUT
   ============================================================ */

body.woocommerce-checkout .e-checkout__container {
	gap: 30px;
	align-items: start;
}

body.woocommerce-checkout .e-checkout__column-start,
body.woocommerce-checkout .e-checkout__column-end {
	min-width: 0;
}

/* The cards: the billing block on the left, the two review blocks on the right. */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .e-checkout__order_review,
body.woocommerce-checkout .e-checkout__order_review-2 {
	padding: 26px 26px;
	background: var(--hda-k-card);
	border: 1px solid var(--hda-k-line);
	border-radius: var(--hda-k-radius);
	box-shadow: var(--hda-k-shadow);
}

body.woocommerce-checkout .e-checkout__order_review-2 {
	margin-top: 22px;
}

/* …and the boxes that used to nest inside them, flattened. */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

/* Headings */

body.woocommerce-checkout h3#order_review_heading,
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout h3#ship-to-different-address {
	margin: 0 0 18px;
	font-family: var(--hda-k-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--hda-k-deep);
}

/* Form fields */

body.woocommerce-checkout .form-row {
	margin: 0 0 16px;
	padding: 0;
}

body.woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--hda-k-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--hda-k-ink) !important; /* the legacy rule sets a colour with !important */
}

body.woocommerce-checkout .form-row .required {
	color: #b3261e;
	text-decoration: none;
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-selection--single {
	border-radius: 10px !important; /* legacy rule pins a 5px radius */
	min-height: 48px;
	background: #fbfafd;
	font-family: var(--hda-k-font);
	font-size: 15px;
	color: var(--hda-k-ink);
}

body.woocommerce-checkout .form-row textarea {
	min-height: 96px;
	padding-top: 12px !important;
}

/* Order review table */

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--hda-k-font);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid var(--hda-k-line);
	font-size: 14.5px;
	text-align: left;
	vertical-align: top;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	padding-top: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th:last-child,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name {
	text-align: left;
	font-weight: 600;
	color: var(--hda-k-deep);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 400;
	color: var(--hda-k-ink-soft);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	font-weight: 400;
	color: var(--hda-k-ink-soft);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td {
	padding-top: 16px;
	border-bottom: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--hda-k-deep);
}

/* Shipping row: the method name should not wrap one word per line. */
body.woocommerce-checkout .woocommerce-shipping-totals td {
	white-space: normal;
}

body.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-checkout .woocommerce-shipping-totals ul#shipping_method li {
	margin: 0;
}

/* Coupon nudge */

body.woocommerce-checkout .e-woocommerce-coupon-nudge {
	margin: 18px 0 0;
	padding: 13px 16px;
	border: 1px dashed rgba(71, 30, 167, 0.35);
	border-radius: 10px;
	background: var(--hda-k-soft);
	font-family: var(--hda-k-font);
	font-size: 14px;
	color: var(--hda-k-ink);
}

body.woocommerce-checkout .e-woocommerce-coupon-nudge a {
	color: var(--hda-k-purple);
	font-weight: 600;
}

/* Payment methods */

body.woocommerce-checkout ul.wc_payment_methods {
	margin: 0;
	padding: 0;
	border-top: 0;
	list-style: none;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--hda-k-line);
	list-style: none;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--hda-k-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--hda-k-ink);
	cursor: pointer;
}

body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method img {
	max-height: 26px;
	width: auto;
	margin: 0 0 0 4px;
}

body.woocommerce-checkout .payment_box {
	margin: 12px 0 0;
	padding: 16px;
	border-radius: 10px;
	background: #fbfafd !important; /* legacy rule fills this with the grey token */
	font-size: 14px;
}

body.woocommerce-checkout .payment_box p:last-child {
	margin-bottom: 0;
}

/* Mercado Pago transparent checkout: match the surrounding fields so the
   embedded card form does not read as a third-party widget dropped in. */
body.woocommerce-checkout .mp-checkout-custom-container input:not([type="radio"]):not([type="checkbox"]),
body.woocommerce-checkout .mp-checkout-custom-container select {
	min-height: 46px;
	border-radius: 10px;
	font-family: var(--hda-k-font);
	font-size: 15px;
}

body.woocommerce-checkout .mp-checkout-custom-card-flags img {
	max-height: 22px;
	width: auto;
}

/* Place order */

body.woocommerce-checkout .form-row.place-order {
	margin: 18px 0 0;
	padding: 0;
}

body.woocommerce-checkout #place_order {
	width: 100%;
	min-height: 54px;
	margin: 0;
	border-radius: 10px;
	font-family: var(--hda-k-font);
	font-size: 16px;
	font-weight: 600;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 12px;
	font-size: 13.5px;
	color: var(--hda-k-ink-soft);
}

/* ============================================================
   MINHA CONTA
   ============================================================ */

/* The widget lays its two columns out with floats, so this container has to
   contain them — otherwise the card backgrounds collapse to zero height. `gap`
   was here before and did nothing: it only applies to flex and grid. */
body.woocommerce-account .e-my-account-tab::after {
	content: "";
	display: table;
	clear: both;
}

/* Navigation */

body.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: 10px;
	background: var(--hda-k-card);
	border: 1px solid var(--hda-k-line);
	border-radius: var(--hda-k-radius);
	box-shadow: var(--hda-k-shadow);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0 0 2px;
	border: none;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 16px;
	border-radius: 10px;
	font-family: var(--hda-k-font);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--hda-k-ink) !important; /* legacy rule sets the colour with !important */
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--hda-k-soft) !important;
	color: var(--hda-k-purple) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--hda-k-purple) !important;
	color: #fff !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	outline: none;
	box-shadow: var(--hda-k-focus);
}

/* Content */

body.woocommerce-account .woocommerce-MyAccount-content {
	padding: 26px 28px;
	background: var(--hda-k-card);
	border: 1px solid var(--hda-k-line);
	border-radius: var(--hda-k-radius);
	box-shadow: var(--hda-k-shadow);
	font-family: var(--hda-k-font);
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hda-k-deep);
}

/* Orders table */

body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	box-shadow: none;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
	padding: 15px 12px;
	border: 0;
	border-bottom: 1px solid var(--hda-k-line);
	font-size: 14.5px;
	text-align: left;
	vertical-align: middle;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th {
	padding-top: 0;
	font-size: 12.5px;
	font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th:first-child,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td:first-child {
	padding-left: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table th:last-child,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td:last-child {
	padding-right: 0;
	text-align: right;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	font-weight: 700;
	color: var(--hda-k-purple);
	text-decoration: none;
}

/* The orders list prints the status as bare text in the cell — no wrapper
   element to turn into a badge without overriding the template, which is more
   than this pass is for. Weighting the text is enough to make it scannable. */
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
	color: var(--hda-k-deep);
}

/* The single-order view does wrap it, so that one can be a proper badge. */
body.woocommerce-account mark.order-status {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--hda-k-soft);
	color: var(--hda-k-purple);
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
}

/* Row actions */

body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin: 2px 0 2px 6px;
	padding: 0 14px !important; /* legacy button rule pins the padding */
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
}

/* Addresses, forms and notices */

body.woocommerce-account .woocommerce-Address {
	padding: 20px;
	border: 1px solid var(--hda-k-line);
	border-radius: 12px;
	background: #fbfafd;
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row label,
body.woocommerce-account form.login label,
body.woocommerce-account form.register label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hda-k-ink);
}

body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account form.login input.input-text,
body.woocommerce-account form.register input.input-text,
body.woocommerce-account form.login input[type="password"],
body.woocommerce-account form.register input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--hda-k-line);
	border-radius: 10px;
	background: #fbfafd;
	font-family: var(--hda-k-font);
	font-size: 15px;
}

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
	border-radius: 12px;
	border-top-color: var(--hda-k-purple);
	font-family: var(--hda-k-font);
	font-size: 14.5px;
}

/* Login / register cards, shown to signed-out visitors. */
body.woocommerce-account form.login,
body.woocommerce-account form.register,
body.woocommerce-account .woocommerce-ResetPassword {
	padding: 26px 28px;
	border: 1px solid var(--hda-k-line);
	border-radius: var(--hda-k-radius);
	box-shadow: var(--hda-k-shadow);
	font-family: var(--hda-k-font);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1024px) {
	body.woocommerce-checkout .e-checkout__container {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, the review column is already last in the flow. */
	body.woocommerce-checkout .e-sticky-right-column {
		position: static;
	}

	body.woocommerce-checkout .e-checkout__column-end {
		margin-top: 26px;
	}

	/* This account layout is built from floats by three stylesheets at once, and
	   between roughly 769px and 1024px they disagree:

	   - woocommerce-layout.css floats the navigation left at 30% at every width.
	   - woocommerce-smallscreen.css releases both to `float:none; width:100%`,
	     but it is enqueued with media="max-width: 768px", so it does not reach
	     the tablet range at all.
	   - Elementor widens the content to 100% at 1024px yet never resets the
	     `float: inline-end` from its own base rule.

	   Elementor also floats the navigation itself at 25%, and the rule that would
	   release it is scoped to `.e-my-account-tabs-horizontal` — this page uses
	   the vertical variant, which never gets released at any width.

	   So the content ended up 100% wide and still floating right, beside a
	   navigation still pinned to a quarter of the screen.

	   Releasing both explicitly is what fixes it. The selectors are deliberately
	   deep: Elementor's navigation rule is (0,4,0) and its content rule (0,3,0),
	   so anything shorter loses the cascade. */
	body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-navigation,
	body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content {
		float: none;
		width: 100%;
		padding-inline-start: 0;
	}

	body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce-MyAccount-content {
		clear: both;
		padding: 22px 0 0;
	}

	/* Every tab visible at once, no horizontal scrolling.
	   A scrolling strip was tried here first and was the wrong call: on a phone
	   the tabs past the first sit off-screen with no visible affordance, so the
	   account sections read as missing rather than scrollable. A grid wraps them
	   into two or three columns depending on the width — six links fit in three
	   rows, every one of them reachable without a gesture. */
	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 6px;
	}

	/* Elementor sets `width: var(--tab-width, 100%)` on every tab, and the
	   variable is never defined — so each one resolved to the full width of the
	   navigation. That is what pushed all the tabs except the first off-screen.
	   Six classes deep because Elementor's rule is (0,5,1). */
	body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li,
	body.woocommerce-account .woocommerce-MyAccount-navigation li {
		margin: 0;
		width: auto;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		justify-content: center;
		height: 100%;
		padding: 0 12px;
		text-align: center;
	}
}

@media (max-width: 767px) {
	body.woocommerce-checkout #customer_details,
	body.woocommerce-checkout .e-checkout__order_review,
	body.woocommerce-checkout .e-checkout__order_review-2,
	body.woocommerce-account .woocommerce-MyAccount-content {
		padding: 20px 16px;
	}

	body.woocommerce-checkout .form-row-first,
	body.woocommerce-checkout .form-row-last {
		width: 100%;
		float: none;
	}

	/* One card per order; the column headers move into the cells through the
	   data-title attributes WooCommerce already writes. */
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead {
		display: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody,
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr,
	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
		display: block;
		width: auto;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr {
		margin-bottom: 14px;
		padding: 14px;
		border: 1px solid var(--hda-k-line);
		border-radius: 12px;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		border-bottom: 0;
		text-align: right;
	}

	body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td::before {
		content: attr(data-title);
		font-size: 12.5px;
		font-weight: 600;
		color: var(--hda-k-ink-soft);
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
		margin: 4px 0 0 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account .woocommerce-MyAccount-navigation li a {
		transition: none;
	}
}