/**
 * Eletricx — base compartilhada entre Carrinho e Checkout.
 *
 * Tokens transcritos de design/FINALIZAR COMPRA.pdf e do export do Figma.
 * Tudo aqui é escopado por `body.elx-shop-page`, que só é aplicada nas páginas
 * de carrinho e de finalização — nada vaza para o resto da loja.
 *
 * Regras específicas de cada página ficam em cart.css e checkout.css.
 */

.elx-shop-page {
	--elx-green: #54a07b;
	--elx-green-ink: #00392a;
	--elx-green-deep: #174133;
	--elx-green-hover: #478c6a;
	--elx-tint: rgba(84, 160, 123, 0.15);
	--elx-tint-soft: rgba(84, 160, 123, 0.07);
	--elx-ink: #1e1e1e;
	--elx-muted: #3a3a3a;
	--elx-line: #cccccc;
	--elx-card-line: #f0f0f0;
	--elx-divider: #dedede;
	--elx-thumb-line: #d8d8d8;
	--elx-page: #f7f7f7;
	--elx-radio: #b9b9b9;
	--elx-danger: #c0392b;

	--elx-radius-card: 25px;
	--elx-radius-field: 15px;
	--elx-shadow: 0 0 50px rgba(226, 226, 226, 0.5);

	--elx-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--elx-display: "Urbanist", var(--elx-sans);
}

/* ---------------------------------------------------------------- shell -- */

.elx-shop-page .elx-shell {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 50px 29px 100px;
	background: var(--elx-page);
	border-radius: 35px;
	font-family: var(--elx-sans);
	color: var(--elx-ink);
	-webkit-font-smoothing: antialiased;
}

.elx-shop-page .elx-shell *,
.elx-shop-page .elx-shell *::before,
.elx-shop-page .elx-shell *::after {
	box-sizing: border-box;
}

.elx-shop-page .elx-grid {
	display: grid;
	grid-template-columns: 698fr 488fr;
	gap: 32px;
	max-width: 1218px;
	margin: 48px auto 0;
	align-items: start;
}

.elx-shop-page .elx-col--main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.elx-shop-page .elx-col--side {
	min-width: 0;
}

.elx-shop-page .elx-sticky {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 24px;
}

/* WooCommerce's stock CSS floats #customer_details / #order_review / the cart
   collaterals into fixed-percentage columns. These layouts are grids, so the
   float rules are neutralised once here instead of per element. */
.elx-shop-page .elx-shell #customer_details,
.elx-shop-page .elx-shell #order_review,
.elx-shop-page .elx-shell .col2-set,
.elx-shop-page .elx-shell .col2-set .col-1,
.elx-shop-page .elx-shell .col2-set .col-2,
.elx-shop-page .elx-shell .woocommerce-checkout-review-order,
.elx-shop-page .elx-shell .cart-collaterals,
.elx-shop-page .elx-shell .cart_totals,
.elx-shop-page .elx-shell .woocommerce-cart-form {
	float: none;
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* The theme uppercases table headings and WooCommerce title-cases the totals;
   the layout uses sentence case throughout. */
.elx-shop-page .elx-shell th,
.elx-shop-page .elx-shell td,
.elx-shop-page .elx-shell label,
.elx-shop-page .elx-shell .elx-card__title,
.elx-shop-page .woocommerce #order_review table.elx-summary tfoot th,
.elx-shop-page .woocommerce #order_review table.elx-summary tfoot td,
.elx-shop-page .woocommerce table.elx-summary th,
.elx-shop-page .woocommerce table.elx-summary td {
	text-transform: none;
	letter-spacing: normal;
}

/* ---------------------------------------------------------------- steps -- */

.elx-shop-page .elx-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 20px 24px;
	min-height: 100px;
	background: transparent;
	border: 1.5px solid var(--elx-green);
	border-radius: var(--elx-radius-field);
}

.elx-shop-page .elx-steps__item {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 1 auto;
	min-width: 0;
}

.elx-shop-page .elx-steps__item + .elx-steps__item::before {
	content: "";
	display: block;
	width: 68px;
	height: 2px;
	background: var(--elx-green);
	margin: 0 30px;
	flex: 0 0 auto;
}

.elx-shop-page .elx-steps__item.is-upcoming + .elx-steps__item::before,
.elx-shop-page .elx-steps__item.is-current + .elx-steps__item::before {
	background: rgba(84, 160, 123, 0.35);
}

.elx-shop-page .elx-steps__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	font-family: var(--elx-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	background: var(--elx-green);
	color: #fff;
}

.elx-shop-page .elx-steps__item.is-upcoming .elx-steps__dot {
	background: var(--elx-tint);
	color: var(--elx-green);
}

.elx-shop-page .elx-steps__label {
	font-family: var(--elx-sans);
	font-size: 16px;
	font-weight: 700;
	color: var(--elx-green);
	white-space: nowrap;
}

.elx-shop-page .elx-steps__item.is-upcoming .elx-steps__label {
	font-weight: 500;
	opacity: 0.75;
}

.elx-shop-page .elx-steps__label a {
	color: inherit;
	text-decoration: none;
}
.elx-shop-page .elx-steps__label a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- cards -- */

.elx-shop-page .elx-card {
	background: #fff;
	border: 1px solid var(--elx-card-line);
	border-radius: var(--elx-radius-card);
	box-shadow: var(--elx-shadow);
	overflow: hidden;
}

.elx-shop-page .elx-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 27px 20px 0;
}

.elx-shop-page .elx-card__head--plain {
	padding-top: 30px;
}

.elx-shop-page .elx-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	flex: 0 0 43px;
	border-radius: 50%;
	background: var(--elx-tint);
	color: var(--elx-green);
	font-family: var(--elx-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
}

.elx-shop-page .elx-card__title {
	margin: 0;
	font-family: var(--elx-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--elx-ink);
}

.elx-shop-page .elx-card__title--sm {
	font-size: 18px;
}

.elx-shop-page .elx-card__body {
	padding: 19px 20px 24px;
}

/* ------------------------------------------------------------- form bits -- */

.elx-shop-page .elx-fieldgrid {
	display: grid;
	grid-template-columns: 363fr 255fr;
	column-gap: 34px;
	row-gap: 19px;
	align-items: start;
}

.elx-shop-page .elx-fieldgrid > .elx-field {
	margin: 0;
	padding: 0;
	min-width: 0;
	float: none;
	width: auto;
}

.elx-shop-page .elx-field--a      { grid-column: 1 / 2; }
.elx-shop-page .elx-field--b      { grid-column: 2 / 3; }
.elx-shop-page .elx-field--full   { grid-column: 1 / -1; }
.elx-shop-page .elx-field--hidden { display: none !important; }

.elx-shop-page .elx-field__label,
.elx-shop-page .elx-fieldgrid label {
	display: block;
	margin: 0 0 9px;
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	color: var(--elx-ink);
}

.elx-shop-page .elx-fieldgrid label .required,
.elx-shop-page .elx-fieldgrid label abbr.required {
	color: var(--elx-green);
	border: 0;
	text-decoration: none;
	margin-left: 2px;
}

.elx-shop-page .elx-fieldgrid label .optional {
	display: none;
}

.elx-shop-page .elx-input,
.elx-shop-page .elx-shell input[type="text"],
.elx-shop-page .elx-shell input[type="tel"],
.elx-shop-page .elx-shell input[type="email"],
.elx-shop-page .elx-shell input[type="password"],
.elx-shop-page .elx-shell input[type="number"],
.elx-shop-page .elx-shell select,
.elx-shop-page .elx-shell textarea,
.elx-shop-page .elx-shell .select2-container .select2-selection--single {
	display: block;
	width: 100%;
	height: 50px;
	min-height: 50px;
	padding: 0 18px;
	background: #fff;
	border: 1px solid var(--elx-line);
	border-radius: var(--elx-radius-field);
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 48px;
	color: var(--elx-muted);
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.elx-shop-page .elx-shell textarea,
.elx-shop-page .elx-textarea {
	height: 112px;
	min-height: 112px;
	padding: 16px 18px;
	line-height: 1.5;
	resize: vertical;
}

.elx-shop-page .elx-shell select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233A3A3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 42px;
	cursor: pointer;
}

.elx-shop-page .elx-shell input::placeholder,
.elx-shop-page .elx-shell textarea::placeholder {
	color: var(--elx-muted);
	opacity: 0.75;
}

.elx-shop-page .elx-shell input:focus,
.elx-shop-page .elx-shell select:focus,
.elx-shop-page .elx-shell textarea:focus {
	border-color: var(--elx-green);
	box-shadow: 0 0 0 3px var(--elx-tint);
}

/* Select2 (state/country dropdowns) */
.elx-shop-page .elx-shell .select2-container {
	width: 100% !important;
}
.elx-shop-page .elx-shell .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}
.elx-shop-page .elx-shell .select2-container .select2-selection__rendered {
	padding: 0 !important;
	line-height: 48px;
	color: var(--elx-muted);
}
.elx-shop-page .elx-shell .select2-container .select2-selection__arrow {
	height: 48px;
	right: 12px;
}

/* Inline validation */
.elx-shop-page .elx-field.elx-invalid > .elx-input,
.elx-shop-page .elx-field.woocommerce-invalid > .elx-input,
.elx-shop-page .elx-field.woocommerce-invalid input,
.elx-shop-page .elx-field.woocommerce-invalid select {
	border-color: var(--elx-danger);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.elx-shop-page .elx-field__error {
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--elx-danger);
}

.elx-shop-page .elx-field.woocommerce-validated > .elx-input {
	border-color: var(--elx-green);
}

/* ------------------------------------------------------------- buttons -- */

.elx-shop-page .elx-btn,
.elx-shop-page .elx-place-order,
.elx-shop-page #place_order,
.elx-shop-page .elx-shell a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 50px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--elx-radius-field);
	background: var(--elx-green);
	color: #fff;
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

/* WooCommerce ships `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button`
   as a block with its own padding and bottom margin; this button is a flex row
   with the label and the arrow, so those are reset at matching specificity. */
.elx-shop-page.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.elx-shop-page .woocommerce .wc-proceed-to-checkout a.checkout-button,
.elx-shop-page .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	padding: 0 20px;
	margin: 0;
	text-align: center;
}

.elx-shop-page .elx-btn:hover,
.elx-shop-page .elx-place-order:hover,
.elx-shop-page #place_order:hover,
.elx-shop-page .elx-shell a.checkout-button:hover {
	background: var(--elx-green-hover);
	color: #fff;
}

.elx-shop-page .elx-btn:active,
.elx-shop-page .elx-place-order:active,
.elx-shop-page #place_order:active,
.elx-shop-page .elx-shell a.checkout-button:active {
	transform: translateY(1px);
}

.elx-shop-page .elx-btn[disabled],
.elx-shop-page .elx-place-order[disabled],
.elx-shop-page #place_order[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.elx-shop-page .elx-btn--ghost {
	background: transparent;
	border: 2px solid var(--elx-green);
	color: var(--elx-green);
}
.elx-shop-page .elx-btn--ghost:hover {
	background: var(--elx-tint);
	color: var(--elx-green);
}

.elx-shop-page .elx-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 22px 0 0;
	font-family: var(--elx-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--elx-muted);
	text-align: center;
}

.elx-shop-page .elx-secure__icon {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background-color: var(--elx-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 5 3.4 9.2 8 10.5 4.6-1.3 8-5.5 8-10.5v-6L12 2Z' fill='%23000'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5.5v6c0 5 3.4 9.2 8 10.5 4.6-1.3 8-5.5 8-10.5v-6L12 2Z' fill='%23000'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Revisão 15/09 (item 16): garantias em texto, abaixo do botão do resumo,
   no carrinho e no checkout. */
.elx-shop-page .elx-guarantees {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--elx-divider);
	list-style: none;
}

.elx-shop-page .elx-guarantees__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-family: var(--elx-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--elx-muted);
}

/* Largura fixa: os ícones têm larguras diferentes e o texto desalinhava. */
.elx-shop-page .elx-guarantees__item i {
	flex: 0 0 16px;
	width: 16px;
	text-align: center;
	margin-top: 2px;
	font-size: 15px;
	color: var(--elx-green);
}

.elx-shop-page .elx-guarantees__item a,
.elx-shop-page .elx-guarantees__item strong {
	font-weight: 700;
	color: var(--elx-green);
	text-decoration: none;
}

.elx-shop-page .elx-guarantees__item a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------- radio options -- */
/* Used by the checkout's shipping card and by the cart's rate list. */

.elx-shop-page .elx-option {
	position: relative;
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 17px;
	min-height: 85px;
	padding: 18px 25px 18px 28px;
	border: 2px solid var(--elx-green);
	border-radius: var(--elx-radius-field);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.elx-shop-page .elx-option:hover {
	background: var(--elx-tint-soft);
}

.elx-shop-page .elx-option.is-selected {
	background: var(--elx-tint);
	border-color: transparent;
}

.elx-shop-page .elx-option__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.elx-shop-page .elx-option__mark {
	width: 16px;
	height: 16px;
	border: 1px solid var(--elx-radio);
	border-radius: 50%;
	background: #fff;
	flex: 0 0 16px;
	position: relative;
}

.elx-shop-page .elx-option.is-selected .elx-option__mark {
	border-color: var(--elx-green);
}

.elx-shop-page .elx-option.is-selected .elx-option__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--elx-green);
}

.elx-shop-page .elx-option__input:focus-visible + .elx-option__mark {
	box-shadow: 0 0 0 3px var(--elx-tint);
}

.elx-shop-page .elx-option__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.elx-shop-page .elx-option__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--elx-ink);
}

.elx-shop-page .elx-option__caption {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--elx-ink);
}

.elx-shop-page .elx-option__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--elx-green);
	text-align: right;
	white-space: nowrap;
}

.elx-shop-page .elx-option__price .amount {
	color: inherit;
	font-weight: inherit;
}

/* ------------------------------------------------------- totals tables -- */
/* The checkout's "Seu pedido" and the cart's "Resumo" share this treatment. */

/* The theme styles every `.shop_table` with a 1px white border, a negative
   right margin and `border-collapse: separate` — meant for a real data table.
   The selector below carries the same element part so it actually wins. */
.elx-shop-page .woocommerce table.shop_table,
.elx-shop-page table.shop_table,
.elx-shop-page .woocommerce table.elx-summary,
.elx-shop-page .woocommerce table.elx-lines {
	margin: 0;
	border: 0;
	border-width: 0;
	border-color: transparent;
	border-collapse: collapse;
	background: none;
}

.elx-shop-page table.elx-summary {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-family: var(--elx-display);
}

.elx-shop-page table.elx-summary tbody,
.elx-shop-page table.elx-summary tfoot {
	display: block;
	width: 100%;
	border: 0;
}

.elx-shop-page table.elx-summary tr {
	display: block;
	width: 100%;
	background: none !important;
	border: 0;
}

/* WooCommerce's responsive shop-table CSS stacks cells and prints the
   `data-title` attribute through a ::before pseudo-element. These tables are
   laid out with grid/flex instead, so those labels would show up as stray
   text (and a lone ":") on small screens. */
.elx-shop-page table.elx-summary td::before,
.elx-shop-page table.elx-summary th::before,
.elx-shop-page .woocommerce table.elx-summary td::before,
.elx-shop-page table.elx-lines td::before,
.elx-shop-page table.elx-lines th::before,
.elx-shop-page .woocommerce table.elx-lines td::before {
	display: none !important;
	content: none !important;
}

/* The same responsive rules hide the row labels and right-align cell text at
   narrow widths. These tables keep their own layout at every width, so the
   labels stay visible and the alignment is pinned here. */
.elx-shop-page table.elx-summary th,
.elx-shop-page .woocommerce table.elx-summary th,
.elx-shop-page table.elx-lines td,
.elx-shop-page .woocommerce table.elx-lines td {
	display: block !important;
}

.elx-shop-page table.elx-summary th,
.elx-shop-page .woocommerce table.elx-summary th,
.elx-shop-page table.elx-lines,
.elx-shop-page table.elx-lines td,
.elx-shop-page .woocommerce table.elx-lines td {
	text-align: left !important;
}

.elx-shop-page table.elx-summary td,
.elx-shop-page .woocommerce table.elx-summary td {
	text-align: right !important;
}

.elx-shop-page table.elx-summary th,
.elx-shop-page table.elx-summary td,
.elx-shop-page .woocommerce table.elx-summary th,
.elx-shop-page .woocommerce table.elx-summary td {
	display: block;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0;
	background: none;
	font-weight: 700;
	vertical-align: middle;
}

.elx-shop-page table.elx-summary tfoot tr,
.elx-shop-page table.elx-summary tbody tr.elx-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 0 0 18px;
}

.elx-shop-page table.elx-summary tfoot tr > th,
.elx-shop-page table.elx-summary tbody tr.elx-row > th {
	flex: 0 1 auto;
	min-width: 0;
}

.elx-shop-page table.elx-summary tfoot tr > td,
.elx-shop-page table.elx-summary tbody tr.elx-row > td {
	flex: 0 0 auto;
}

.elx-shop-page table.elx-summary tfoot tr:last-child {
	padding-bottom: 0;
}

.elx-shop-page table.elx-summary tfoot th,
.elx-shop-page table.elx-summary tbody tr.elx-row th,
.elx-shop-page .woocommerce table.elx-summary tfoot th {
	width: auto !important;
	font-family: var(--elx-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--elx-ink);
	text-align: left;
}

.elx-shop-page table.elx-summary tfoot td,
.elx-shop-page table.elx-summary tfoot td .amount,
.elx-shop-page table.elx-summary tfoot td bdi,
.elx-shop-page table.elx-summary tbody tr.elx-row td,
.elx-shop-page .woocommerce table.elx-summary tfoot td {
	width: auto !important;
	font-family: var(--elx-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--elx-ink);
	text-align: right;
	white-space: nowrap;
}

.elx-shop-page table.elx-summary .elx-row--accent td,
.elx-shop-page table.elx-summary .elx-row--accent td .amount,
.elx-shop-page table.elx-summary .elx-row--accent td bdi,
.elx-shop-page table.elx-summary .elx-row--accent td .woocommerce-Price-amount {
	color: var(--elx-green);
}

.elx-shop-page .elx-row__note {
	display: block;
	margin-top: 2px;
	font-family: var(--elx-sans);
	font-size: 12px;
	font-weight: 500;
	color: var(--elx-muted);
}

.elx-shop-page table.elx-summary tr.elx-total {
	align-items: center;
	flex-wrap: nowrap;
	margin-top: 7px;
	padding-top: 22px;
	border-top: 1px solid var(--elx-divider);
}

/* The installment note can be long; let the label column shrink so the total
   stays on the same line as it instead of wrapping underneath. */
.elx-shop-page table.elx-summary tr.elx-total th {
	flex: 1 1 auto;
	min-width: 0;
}

.elx-shop-page table.elx-summary tr.elx-total td {
	flex: 0 0 auto;
}

.elx-shop-page .elx-total__label {
	display: block;
	font-family: var(--elx-sans);
	font-size: 16px;
	font-weight: 600;
	color: var(--elx-muted);
}

.elx-shop-page .elx-total__note {
	display: block;
	margin-top: 4px;
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--elx-muted);
}

.elx-shop-page table.elx-summary tr.elx-total td,
.elx-shop-page table.elx-summary tr.elx-total td .amount,
.elx-shop-page table.elx-summary tr.elx-total td bdi {
	font-family: var(--elx-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--elx-green);
}

/* ---------------------------------------------------------- trust card -- */

.elx-shop-page .elx-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 21px 20px 24px;
	list-style: none;
}

.elx-shop-page .elx-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.elx-shop-page .elx-trust__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 77px;
	height: 77px;
	border-radius: 50%;
	background: var(--elx-tint);
}

.elx-shop-page .elx-trust__icon img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	display: block;
	margin: 0;
	box-shadow: none;
	border: 0;
}

.elx-shop-page .elx-trust__icon i {
	font-size: 28px;
	color: var(--elx-green);
}

.elx-shop-page .elx-trust__label {
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--elx-muted);
}

/* -------------------------------------------------- woo notices/coupon -- */

.elx-shop-page .woocommerce-form-coupon-toggle,
.elx-shop-page .woocommerce-form-login-toggle,
.elx-shop-page form.checkout_coupon,
.elx-shop-page .woocommerce-notices-wrapper > .woocommerce-message,
.elx-shop-page .woocommerce-notices-wrapper > .woocommerce-error,
.elx-shop-page .woocommerce-notices-wrapper > .woocommerce-info,
.elx-shop-page .woocommerce-form-login {
	max-width: 1218px;
	margin: 0 auto 20px;
	padding: 18px 24px;
	background: #fff;
	border: 1px solid var(--elx-card-line);
	border-left: 4px solid var(--elx-green);
	border-radius: var(--elx-radius-field);
	box-shadow: var(--elx-shadow);
	font-family: var(--elx-sans);
	font-size: 14px;
	color: var(--elx-ink);
	list-style: none;
}

.elx-shop-page .woocommerce-notices-wrapper > .woocommerce-error {
	border-left-color: var(--elx-danger);
}

/* Store notices ("… foi adicionado ao seu carrinho" + botão) read as a banner,
   so they are centred rather than left-aligned. */
.elx-shop-page .woocommerce-notices-wrapper {
	text-align: center;
}

.elx-shop-page .woocommerce-notices-wrapper > .woocommerce-message,
.elx-shop-page .woocommerce-notices-wrapper > .woocommerce-info,
.elx-shop-page .woocommerce-notices-wrapper > .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	text-align: center;
}

.elx-shop-page .woocommerce-notices-wrapper > * > li {
	list-style: none;
	margin: 0;
}

/* The "Continuar comprando" button WooCommerce puts inside the notice. */
.elx-shop-page .woocommerce-notices-wrapper a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	margin: 0;
	border: 0;
	border-radius: var(--elx-radius-field);
	background: var(--elx-green);
	color: #fff;
	font-family: var(--elx-sans);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.elx-shop-page .woocommerce-notices-wrapper a.button:hover {
	background: var(--elx-green-hover);
	color: #fff;
}

.elx-shop-page .woocommerce-form-coupon-toggle .woocommerce-info::before,
.elx-shop-page .woocommerce-form-login-toggle .woocommerce-info::before,
.elx-shop-page .woocommerce-notices-wrapper > *::before {
	display: none;
}

.elx-shop-page .woocommerce-form-coupon-toggle .woocommerce-info,
.elx-shop-page .woocommerce-form-login-toggle .woocommerce-info {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	text-align: left;
	text-transform: none;
}

.elx-shop-page .woocommerce-form-coupon-toggle a,
.elx-shop-page .woocommerce-form-login-toggle a {
	color: var(--elx-green);
	font-weight: 700;
	text-decoration: underline;
	text-transform: none;
}

.elx-shop-page form.woocommerce-form-login .form-row {
	margin-bottom: 14px;
}
.elx-shop-page form.woocommerce-form-login input[type="text"],
.elx-shop-page form.woocommerce-form-login input[type="password"] {
	width: 100%;
	height: 50px;
	padding: 0 18px;
	border: 1px solid var(--elx-line);
	border-radius: var(--elx-radius-field);
	font-family: var(--elx-sans);
	font-size: 14px;
}
.elx-shop-page form.woocommerce-form-login button {
	height: 50px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--elx-radius-field);
	background: var(--elx-green);
	color: #fff;
	font-family: var(--elx-sans);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.elx-shop-page .elx-shell .woocommerce-NoticeGroup {
	margin-bottom: 20px;
}

.elx-shop-page .elx-shell .woocommerce-error,
.elx-shop-page .elx-shell .woocommerce-message,
.elx-shop-page .elx-shell .woocommerce-info {
	margin: 0 0 20px;
	padding: 16px 20px;
	list-style: none;
	border-radius: var(--elx-radius-field);
	font-size: 14px;
}

.elx-shop-page .elx-shell .woocommerce-error {
	background: rgba(192, 57, 43, 0.06);
	border: 1px solid rgba(192, 57, 43, 0.25);
	color: var(--elx-danger);
}

.elx-shop-page .elx-shell .woocommerce-message,
.elx-shop-page .elx-shell .woocommerce-info {
	background: var(--elx-tint-soft);
	border: 1px solid var(--elx-tint);
	color: var(--elx-ink);
}

.elx-shop-page .blockUI.blockOverlay {
	border-radius: var(--elx-radius-card);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1240px) {
	.elx-shop-page .elx-shell {
		padding: 40px 24px 64px;
		border-radius: 24px;
	}
	.elx-shop-page .elx-grid {
		grid-template-columns: 1.35fr 1fr;
		gap: 24px;
		margin-top: 32px;
	}
	.elx-shop-page .elx-steps__item + .elx-steps__item::before {
		width: 40px;
		margin: 0 16px;
	}
}

@media (max-width: 1024px) {
	.elx-shop-page .elx-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 720px;
	}
	.elx-shop-page .elx-sticky {
		position: static;
	}
	.elx-shop-page .elx-steps {
		min-height: 0;
		padding: 16px;
	}
	.elx-shop-page .elx-steps__dot {
		width: 40px;
		height: 40px;
		flex-basis: 40px;
	}
	.elx-shop-page .elx-steps__label {
		font-size: 15px;
	}
	.elx-shop-page .elx-steps__item {
		gap: 12px;
	}
	.elx-shop-page .elx-steps__item + .elx-steps__item::before {
		width: 28px;
		margin: 0 12px;
	}
}

@media (max-width: 782px) {
	.elx-shop-page .elx-shell {
		padding: 24px 16px 48px;
		border-radius: 18px;
	}
	.elx-shop-page .elx-grid {
		margin-top: 24px;
		gap: 16px;
	}
	.elx-shop-page .elx-col--main,
	.elx-shop-page .elx-sticky {
		gap: 16px;
	}

	.elx-shop-page .elx-fieldgrid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 16px;
	}
	.elx-shop-page .elx-field--a,
	.elx-shop-page .elx-field--b,
	.elx-shop-page .elx-field--full {
		grid-column: 1 / -1;
	}

	/* comfortable touch targets; 16px stops iOS zooming on focus */
	.elx-shop-page .elx-input,
	.elx-shop-page .elx-shell input[type="text"],
	.elx-shop-page .elx-shell input[type="tel"],
	.elx-shop-page .elx-shell input[type="email"],
	.elx-shop-page .elx-shell input[type="password"],
	.elx-shop-page .elx-shell input[type="number"],
	.elx-shop-page .elx-shell select {
		height: 52px;
		min-height: 52px;
		line-height: 50px;
		font-size: 16px;
	}
	.elx-shop-page .elx-shell textarea {
		font-size: 16px;
	}

	.elx-shop-page .elx-card__head {
		padding: 20px 16px 0;
	}
	.elx-shop-page .elx-card__body {
		padding: 16px 16px 20px;
	}
	.elx-shop-page .elx-card__title {
		font-size: 19px;
	}
	.elx-shop-page .elx-card__badge {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
		font-size: 19px;
	}

	.elx-shop-page .elx-steps {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}
	.elx-shop-page .elx-steps__item {
		width: 100%;
	}
	.elx-shop-page .elx-steps__item + .elx-steps__item::before {
		display: none;
	}
	.elx-shop-page .elx-steps__label {
		white-space: normal;
	}

	.elx-shop-page .elx-option {
		padding: 16px 18px;
		column-gap: 14px;
	}

	.elx-shop-page .elx-trust {
		padding: 18px 12px;
		gap: 8px;
	}
	.elx-shop-page .elx-trust__icon {
		width: 60px;
		height: 60px;
	}
	.elx-shop-page .elx-trust__icon img {
		width: 32px;
		height: 32px;
	}
	.elx-shop-page .elx-trust__label {
		font-size: 12px;
	}

	.elx-shop-page .elx-btn,
	.elx-shop-page .elx-place-order,
	.elx-shop-page #place_order,
	.elx-shop-page .elx-shell a.checkout-button {
		height: 54px;
	}
}