/* ==========================================================================
   My Account dashboard (redesign)
   Tokens: navy #22396a · ink #081228 · muted #6c757d · faint #969493
           border #e1e7ef · page #f5f6f8
   ========================================================================== */

.md-account {
	background: #f5f6f8;
	padding: 32px 0 64px;
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #081228;
}

.md-account__container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
}
span.md-account-tabs__label {
    font-weight: 400;
}
/* Let the redesigned account page run full-bleed: neutralise the constraining
   page container that wraps the My Account content (it lives in the page
   content / theme page wrapper, not in this template). Scoped to account pages. */
.woocommerce-account .section-content-fullwidth > .container,
.woocommerce-account main.site-main.container.body-container {
	max-width: 100%;
	width: 100%; 
	padding-left: 0;
	padding-right: 0;  
}
/* article#post-x > div.content wraps .woocommerce with a 16px vertical margin
   (an inline style in content-page.php) — drop it on account pages. Needs
   !important to beat the inline style. */
.woocommerce-account article .content {
	margin: 0 !important;
} 
.md-account #shipping_phone_field {
	padding-top: 0;
}
/* The site-wide `a:visited { color:#95b6fa }` outranks single-class link styles
   (a:visited beats one class), tinting visited tabs/buttons/links. Re-assert the
   intended colours for the account UI. */
.md-account .md-account-tabs__link:visited {
	color: #081228;
}
.md-account .md-account-tabs__item.is-active .md-account-tabs__link:visited {
	color: #fff;
}
.md-account .md-account-tabs__link:hover,
.md-account .md-account-tabs__link:visited:hover {
	color: #22396a;
}
.md-account .md-btn--primary:visited {
	color: #fff;
}
.md-account .md-btn--outline:visited {
	color: #22396a;
}
.md-account .md-btn--ghost:visited {
	color: #6c757d;
}
.md-account .md-order__more:visited {
	color: #22396a;
}
.md-account .md-best__name:visited {
	color: #081228;
}
.md-account .md-best__cart:visited {
	color: #22396a;
}
.md-account .md-best__cart:hover,
.md-account .md-best__cart:visited:hover {
	color: #fff;
}

.md-account__title {
	font-family: "Syncopate", "Lato", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 38px; 
	letter-spacing: .01em;
	color: #081228;
	margin: 0 0 24px;
}

/* ----------------------------------------------------------- Tab bar ------ */
.md-account-tabs {
	margin-bottom: 24px;
}

.md-account-tabs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	/* border-bottom: 1px solid #e1e7ef; */
}

.md-account-tabs__item {
	margin: 0;
}

.md-account-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #081228;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.md-account-tabs__link:hover {
	background: #eef1f6;
	color: #22396a;
}

.md-account-tabs__item.is-active .md-account-tabs__link {
	background: #22396a;
	color: #fff;
}

.md-account-tabs__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.md-account-tabs__icon svg {
	width: 16px;
	height: 16px;
}

/* Native dropdown equivalent — desktop uses the tab list, so hide it here.
   Shown (and the list hidden) from tablet down in the media query below. */
.md-account-tabs__select {
	display: none;
}

/* ------------------------------------------------------------- Layout ----- */
.md-account__body--with-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	gap: 12px;
	align-items: start;
}

/* --------------------------------------------------- Profile (left) card -- */
.md-profile-card,
.md-card {
	background: #fff;
	border: 1px solid #e1e7ef;
	padding: 24px;
}

.md-profile-card__head {
	margin-bottom: 16px;
}

.md-profile-card__title {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 4px;
	color: #081228;
}

.md-profile-card__subtitle {
	font-size: 14px;
	color: #6c757d;
	margin: 0;
}

.md-profile-card__identity {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	border-bottom: 1px solid #e1e7ef;
	margin-bottom: 24px;
	flex-direction: row;
	flex-wrap: wrap;
}

.md-profile-card__name {
	font-size: 16px;
	font-weight: 700;
	color: #081228;
}

.md-profile-card__email {
	font-size: 14px;
	color: #6c757d;
}

.md-profile-card__dot,
.md-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #081228;
	display: inline-block;
	flex: 0 0 auto;
}

.md-dot--sm {
	width: 3px;
	height: 3px;
}

/* Sections */
.md-section {
	margin-bottom: 8px;
}

.md-section__title {
	font-size: 14px;
	font-weight: 700;
	color: #081228;
	margin: 0 0 24px;
}

.md-divider {
	border: 0;
	border-top: 1px solid #e1e7ef;
	margin: 24px 0;
}

/* Read-only field grid */
.md-fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 32px;
}

.md-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.md-field__label {
	font-size: 14px;
	color: #6c757d;
}

.md-field__value {
	font-size: 15px;
	font-weight: 500;
	color: #22396a;
	word-break: break-word;
}

/* Inline edit blocks */
.md-editblock {
	display: none;
}

.md-section.is-editing .md-editblock {
	display: block;
}

.md-section.is-editing .md-view {
	display: none;
}

.md-section.is-editing .md-edit-toggle {
	display: none;
}

.md-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
}

.md-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.md-form-row--wide {
	grid-column: 1 / -1;
}

.md-form-row label {
	font-size: 13px;
	color: #6c757d;
}

.md-form-row input,
.md-form-row select,
.md-fullwidth {
	height: 40px !important;
	border: 1px solid #cdd4e0 !important;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 14px;
	color: #081228;
	background: #fff;
	width: 100%;
}

.md-fullwidth {
	grid-column: 1 / -1;
	margin-top: 6px;
}

.md-editblock__actions {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

/* ----------------------------------------------------------- Buttons ------ */
.md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	background: none;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.md-btn:hover {
	opacity: .9;
}

.md-btn--primary {
	background: #22396a;
	color: #fff;
}

.md-btn--outline {
	border-color: #22396a;
	color: #22396a;
	background: #fff;
}

.md-btn--ghost {
	color: #6c757d;
}

.md-btn__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.md-btn__icon svg {
	width: 16px;
	height: 16px;
}

.md-edit-toggle {
	width: 100%;
	margin-top: 24px;
}

/* ---------------------------------------------------- Right column cards -- */
.md-account__aside {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.md-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.md-card__icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	color: #081228;
}

.md-card__icon svg {
	width: 24px;
	height: 24px;
}

.md-card__title {
	font-size: 20px;
	font-weight: 400;
	color: #081228;
	margin: 0;
}

.md-card__rule {
	border: 0;
	border-top: 1px solid #e1e7ef;
	margin: 0 0 16px;
}

.md-acc__repeat {
	width: 100%;
	margin-top: 12px;
}

.md-card__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* margin-top: 16px; */
}

.md-card__actions .md-btn {
	width: 100%;
}

.md-card__empty {
	font-size: 14px;
	color: #6c757d;
	margin: 0 0 16px;
}

/* Recent orders accordion */
.md-orders-accordion {
	display: flex;
	flex-direction: column;
}

.md-acc {
	border-bottom: 1px solid #eef1f6;
}

.md-acc:last-child {
	border-bottom: 0;
}

.md-acc__head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 12px 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: #081228;
}

.md-acc__id {
	font-size: 16px;
	font-weight: 700;
	flex: 0 0 auto;
}

.md-acc__head .md-profile-card__dot {
	background: #081228;
}

.md-acc__date {
	font-size: 14px;
	font-weight: 400;
	color: #6c757d;
}

.md-acc__chevron {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: #6c757d;
	margin-left: auto;
	flex: 0 0 auto;
	transition: transform .15s ease;
}

.md-acc.is-open .md-acc__chevron {
	transform: rotate(180deg);
}

.md-acc__summary {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #6c757d;
	white-space: nowrap;
	margin-bottom: 12px;
}

.md-acc__body {
	display: none;
	padding: 0 0 12px;
}

.md-acc.is-open .md-acc__body {
	display: block;
}

/* Recent order line items */
.md-order__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.md-order__number {
	font-size: 16px;
	font-weight: 700;
	color: #081228;
	text-decoration: none;
}

.md-order__date {
	font-size: 14px;
	color: #6c757d;
}

.md-order__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #6c757d;
	margin-bottom: 16px;
}

.md-order__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.md-order__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.md-order__thumb img,
.md-best__thumb img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 4px;
	display: block;
}

.md-order__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
}

.md-order__name {
	font-size: 13px;
	color: #081228;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.md-order__qty {
	font-size: 10px;
	color: #6c757d;
}

.md-order__price {
	font-size: 14px;
	font-weight: 700;
	color: #6c757d;
	white-space: nowrap;
}

.md-order__more {
	display: block;
	text-align: center;
	font-size: 11px;
	color: #22396a;
	text-decoration: none;
	margin-top: 12px;
}

.md-order__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 700;
	color: #081228;
}

/* Personal best */
.md-best {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.md-best__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px;
}

.md-best__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.md-best__name {
	font-size: 13px;
	color: #081228;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.md-best__price {
	font-size: 10px;
	color: #081228;
}

.md-best__price del {
	color: #969493;
	margin-right: 4px;
}

.md-best__meta {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: #969493;
}

.md-account .md-best .md-best__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	border: 1px solid #22396a;
	background: #fff !important;
	color: #22396a;
	flex: 0 0 auto;
	transition: background-color .15s ease, color .15s ease;
}

.md-best__cart:hover {
	background: #22396a;
	color: #fff;
}

.md-best__cart svg {
	width: 16px;
	height: 16px;
}

/* ------------------------------------------------- My Orders (orders) ----- */
/* `.woocommerce-account` prefix included to outrank style.css's same-specificity
   `.order-card` rule (which sets border-radius:8px). */
.woocommerce-account .md-account .custom-orders-wrapper .order-card {
	background: #fff;
	border-radius: 0;
}

.woocommerce-account .md-account .custom-orders-wrapper .order-card .order-information {
	background: #fff;
	border: 1px solid #e1e7ef;
	border-radius: 0;
	padding: 16px;
}

/* --------------------------------------------- Address Book (addresses) --- */
/* Stack billing & shipping as full-width white panels, clearly separated. */
.md-account .woocommerce-myaddresses .row.py-4 {
	row-gap: 12px;
}

.md-account .woocommerce-myaddresses .row.py-4 > [class*="col-"] {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	background: #fff;
	border: 1px solid #e1e7ef;
	padding: 24px;
}

/* ------------------------------------------- Unified account form fields -- */
/* WooCommerce form fields (Address Book edit) matched to the dashboard's own
   inline-edit fields (.md-form-row) for consistent size + style. */
.md-account .woocommerce-MyAccount-content form .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
}

.md-account .woocommerce-MyAccount-content form .form-row > label {
	font-size: 13px;
	color: #6c757d;
	margin: 0;
}

.md-account .woocommerce-MyAccount-content form .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.md-account .woocommerce-MyAccount-content form .form-row input.input-text,
.md-account .woocommerce-MyAccount-content form .form-row select,
.md-account .woocommerce-MyAccount-content form .form-row textarea {
	height: 40px;
	border: 1px solid #cdd4e0;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 14px;
	color: #081228;
	background: #fff;
	width: 100%;
	box-shadow: none;
}

.md-account .woocommerce-MyAccount-content form .form-row textarea {
	height: auto;
	min-height: 80px;
	padding: 10px 12px;
	line-height: 1.4;
}

/* Enhanced (select2) country/state dropdowns matched to the same look. Applies
   to both the My Account inline edit and the Address Book edit form. */
.md-account .select2-container--default .select2-selection--single {
	height: 40px;
	border: 1px solid #cdd4e0;
	border-radius: 4px;
}

.md-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 38px;
	padding-left: 12px;
	color: #081228;
}

.md-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
}

/* Address Book edit form — clean 2-col grid (replaces the old float layout).
   WooCommerce's own field classes drive column span: form-row-wide → full width,
   form-row-first / form-row-last → one column each. */
.md-account .woocommerce-MyAccount-content form .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 24px;
	margin: 0;
}

.md-account .woocommerce-MyAccount-content form .woocommerce-address-fields__field-wrapper .form-row {
	margin: 0;
	width: auto;
	max-width: none;
	float: none;
}

.md-account .woocommerce-MyAccount-content form #billing_address_2_field,
.md-account .woocommerce-MyAccount-content form #shipping_address_2_field {
	display: flex !important;
}
.md-account .woocommerce-address-fields #billing_state_field {
	margin-top: 0;
}
.md-account .woocommerce-address-fields {
	border-top: 0;
	margin-top: 20px;
}

.md-account .address-savebtn {
	margin: 24px 0 0;
}

/* "Edit Address" button on the address display → dashboard button, fit-content. */
.md-account .woocommerce-myaddresses .md-address-edit {
	display: inline-flex;
	width: fit-content;
	margin-top: 12px;
}

/* --------------------------------------------------------- Responsive ----- */
@media (max-width: 1199px) {
	.md-account {
		padding-left: 24px;
		padding-right: 24px;
	}
	.md-account__body--with-aside {
		grid-template-columns: minmax(0, 1fr) 400px;
	}
}

/* Tablet and below: single column, with the blocks reordered to
   1) My recent orders  2) tab nav + account content  3) Recommended.
   The aside holds Recent orders + Recommended while the tab content lives in the
   main column, so flatten both wrappers with display:contents and use `order`
   to interleave them in one flex column. */
@media (max-width: 1023px) {
	.md-account__body--with-aside {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.md-account__main,
	.md-account__aside {
		display: contents;
	}
	/* Each stacked block spans the full width of the column. */
	.md-card--orders {
		order: 1;
		width: 100%;
	}
	.md-account-tabs {
		order: 2;
		margin-bottom: 0;
		width: 100%;
		min-width: 0;
	}
	.woocommerce-MyAccount-content {
		order: 3;
		width: 100%;
	}
	.md-card--best {
		order: 4;
		width: 100%;
	}

	/* shop.css adds 2rem side padding to the content wrapper (<=767px, !important) —
	   drop it so the stacked content aligns with the cards. */
	.woocommerce-account .woo-MyAccount-contentnew {
		padding-left: 0 !important;
		padding-right: 0 !important;
	} 

	/* From tablet down, swap the tab list for a native dropdown selector. */
	.md-account-tabs__list {
		display: none;
	}
	.md-account-tabs__select {
		display: block;
		width: 100%;
		height: 48px;
		padding: 0 44px 0 16px;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		color: #081228;
		background-color: #fff;
		border: 1px solid #cdd4e0;
		border-radius: 6px;
		cursor: pointer;
		/* Custom chevron (navy), since native arrow styling can't be themed. */
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2322396a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 16px center;
	}
	.md-account-tabs__select:focus {
		outline: none;
		border-color: #22396a;
		box-shadow: 0 0 0 3px rgba(34, 57, 106, .15);
	}

	.md-fields {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.md-account {
		padding-left: 16px;
		padding-right: 16px;
	}
	.md-account__title {
		font-size: 28px;
	}
	.md-fields,
	.md-form-grid,
	.md-account .woocommerce-MyAccount-content form .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
	.md-profile-card,
	.md-card {
		padding: 16px;
	}
}

/* ==========================================================================
   Logged-out My Account — login / register page
   The dashboard CSS (full-bleed container neutralisers) also applies here via
   the .woocommerce-account body class, which squished the page. Re-constrain,
   add height so header/footer breathe, and centre + card-style the form(s).
   ========================================================================== */

/* Give the content area enough height so the header & footer aren't squished. */
.md-account-login main.site-main.body-container {
	min-height: 65vh;
	padding-top: 48px;
	padding-bottom: 64px;
}

/* Re-constrain the width (overrides the dashboard full-bleed neutraliser) and centre it. */
.md-account-login .section-content-fullwidth > .container,
.md-account-login main.site-main.container.body-container {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Centre the form column(s): narrow for login-only, wider when register shows. */
.md-account-login .woocommerce {
	margin-left: auto;
	margin-right: auto;
}
.md-login-only .woocommerce {
	max-width: 460px;
	min-height: 50vh;
	margin-top: 50px;
}
.md-login-has-register .woocommerce {
	max-width: 860px;
}

/* Two-column login + register row. */
.md-account-login #customer_login {
	margin: 0;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.md-account-login #customer_login .u-column1,
.md-account-login #customer_login .u-column2 {
	flex: 1 1 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Card-style each form to match the dashboard. */
.md-account-login .woocommerce-form-login,
.md-account-login .woocommerce-form-register {
	background: #fff;
	border: 1px solid #e1e7ef;
	padding: 24px;
}

/* Section heading ("Login" / "Register"). */
.md-account-login .woocommerce h2.contact-information {
	font-size: 20px;
	font-weight: 600;
	color: #081228;
	margin: 0 0 16px;
}

/* Fields. */
.md-account-login .woocommerce-form .form-row {
	margin: 0 0 16px;
}
.md-account-login .woocommerce-form label {
	display: block;
	font-size: 13px;
	color: #6c757d;
	margin: 0 0 6px;
}
.md-account-login .woocommerce-form .input-text,
.md-account-login .woocommerce-form input.form-control {
	height: 40px;
	border: 1px solid #cdd4e0;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 14px;
	color: #081228;
	background: #fff;
	width: 100%;
	box-shadow: none;
}

/* Remember-me checkbox row stays inline. */
.md-account-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #6c757d;
}
.md-account-login .woocommerce-form-login__rememberme input {
	width: auto;
	height: auto;
	margin: 0;
}

/* Submit buttons → navy dashboard button. */
.md-account-login .button-background-blue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 24px;
	background: #22396a;
	color: #fff;
	border: 1px solid #22396a;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	transition: opacity .15s ease;
}
.md-account-login .button-background-blue:hover {
	opacity: .9;
}

.md-account-login .woocommerce-LostPassword {
	margin-top: 12px;
	font-size: 13px;
}

@media (max-width: 768px) {
	.md-account-login #customer_login {
		flex-direction: column;
	}
	.md-login-has-register .woocommerce {
		max-width: 460px;
	}
	.md-profile-card__identity .md-profile-card__email {
		width: 100%;
	}
	fieldset#wc-offline_cc-cc-form > .form-row > input {
		height: 60px !important;
		width: 100%;
		margin-top: 5px;
	}
	fieldset#wc-offline_cc-cc-form > .form-row {
		flex-direction: column;
		height: unset !important;
	}
}
 
/* ==========================================================================
   Pay for order page
   ========================================================================== */
.md-pay-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 16px 64px;
}
.md-pay-title {
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: #081228;
	margin: 0 0 24px;
}

@media (min-width: 992px) {
	.md-pay-wrap #wc-offline_cc-cc-form {
		width: 50%;
	}
}