/* Shop, single product, cart, checkout, my-account. */

/* Page hero (shop/faq/generic) */
.oi-page-hero { padding: 48px 0 32px; }
.oi-page-hero h1 { font-size: 38px; }
.oi-page-hero p { color: var(--oi-muted); font-size: 16px; max-width: 640px; margin-top: 14px; line-height: 1.9; }
@media (max-width: 782px) { .oi-page-hero h1 { font-size: 24px; } .oi-page-hero p { font-size: 13px; } }

/* Duration filter */
.oi-filter-bar { padding-bottom: 24px; }

/* Product/pricing grid on shop archive reuses .oi-pricing-card from sections.css */
.oi-shop-grid { margin-bottom: 56px; }

/* Tutorial strip */
.oi-tutorial-card {
	display: block; background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-md);
	padding: 18px 20px; color: var(--oi-blue); font-weight: 700; font-size: 13px; text-align: center;
}

/* Comparison table */
.oi-compare-table { width: 100%; border-collapse: collapse; }
.oi-compare-table th, .oi-compare-table td { padding: 16px; text-align: center; font-size: 13px; border-bottom: 1px solid var(--oi-border-soft); }
.oi-compare-table th { background: var(--oi-ice); font-weight: 700; }
.oi-compare-table th:first-child, .oi-compare-table td:first-child { text-align: start; font-weight: 700; }
.oi-compare-table .is-popular-col { color: var(--oi-blue); font-weight: 700; }
.oi-compare-wrap { background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); max-width: 1000px; margin-inline: auto; overflow: hidden; }
.oi-compare-wrap > details { display: none; }
@media (max-width: 782px) {
	.oi-compare-table { display: none; }
	.oi-compare-wrap > details { display: block; }
	.oi-compare-toggle {
		display: flex; align-items: center; justify-content: space-between; width: 100%;
		padding: 16px; font-weight: 700; font-size: 13.5px; background: none; border: none; color: var(--oi-ink);
	}
	.oi-compare-mobile-row { padding: 0 16px 16px; border-bottom: 1px solid var(--oi-border-soft); }
	.oi-compare-mobile-row:last-child { border-bottom: none; }
	.oi-compare-mobile-row strong { display: block; font-size: 13px; margin-bottom: 8px; }
	.oi-compare-mobile-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 11.5px; }
	.oi-compare-mobile-grid span { display: block; color: var(--oi-faint); margin-bottom: 4px; }
	.oi-compare-mobile-grid b.is-popular-col { color: var(--oi-blue); }
}

/* Single product */
.oi-product { padding: 24px 0 64px; }
.oi-product__layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; }
@media (max-width: 960px) { .oi-product__layout { grid-template-columns: 1fr; gap: 24px; } }
.oi-product__visual { position: sticky; top: 100px; }
.oi-product-mock {
	background: var(--oi-dark-gradient); border-radius: var(--oi-radius-xl); padding: 28px; color: #fff;
	animation: oiFloatY 7s ease-in-out infinite;
}
@media (max-width: 782px) { .oi-product__visual { position: static; } .oi-product-mock { max-width: 320px; margin-inline: auto; animation: none; } }

.oi-product h1 { font-size: 30px; }
.oi-product__intro { color: var(--oi-muted); font-size: 14.5px; margin-top: 10px; }
.oi-product__price { margin: 20px 0; }
.oi-product__price .oi-price-old { text-decoration: line-through; color: var(--oi-faint); font-size: 16px; margin-inline-end: 8px; }
.oi-product__price .oi-price-amount { font-size: 32px; font-weight: 800; }
@media (max-width: 782px) { .oi-product h1 { font-size: 21px; } .oi-product__price .oi-price-amount { font-size: 24px; } }

.oi-variant-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
/* 4-up duration chips get too small to tap below ~480px — go 2×2. */
@media (max-width: 480px) { .oi-variant-row { grid-template-columns: repeat(2, 1fr); } }
.oi-variant-chip {
	position: relative; text-align: center; padding: 12px 8px; border-radius: var(--oi-radius-sm);
	border: 1.5px solid var(--oi-border); background: #fff; color: var(--oi-ink); font-weight: 600; font-size: 13px;
}
.oi-variant-chip.is-active { background: var(--oi-ink); color: #fff; border-color: var(--oi-ink); }
.oi-variant-chip__badge { position: absolute; top: -18px; inset-inline-end: 6px; font-size: 9.5px; }

.oi-product__purchase-row { display: flex; gap: 12px; margin: 20px 0; }
.oi-product__trust-row { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--oi-border); border-bottom: 1px solid var(--oi-border); margin-bottom: 20px; }
.oi-product__trust-row span { font-size: 12.5px; color: var(--oi-success); display: flex; align-items: center; gap: 6px; }

/* Product tab content: features grid, setup guide */
.oi-feature-pill {
	display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--oi-border);
	border-radius: var(--oi-radius-md); padding: 14px 16px; font-size: 13.5px;
}
.oi-setup-guide { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; }
@media (max-width: 782px) { .oi-setup-guide { grid-template-columns: 1fr; } }
.oi-setup-steps { list-style: decimal; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 14px; }
.oi-setup-steps li strong { display: block; font-size: 14px; margin-bottom: 4px; }
.oi-setup-steps li span { display: block; color: var(--oi-muted); font-size: 13px; }
.oi-setup-guide__devices strong { display: block; margin-bottom: 14px; font-size: 13px; }
.oi-setup-guide__devices .oi-inline-icon { display: flex; margin-bottom: 12px; color: var(--oi-blue); font-weight: 600; }

.oi-related-plan {
	display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--oi-border);
	border-radius: var(--oi-radius-md); padding: 18px; background: #fff;
}
.oi-related-plan strong { display: block; font-size: 14.5px; }
.oi-related-plan .oi-price-amount { font-size: 20px; font-weight: 800; }

/* WooCommerce native coupon form — cart uses cart/coupon.php (.coupon), checkout
   uses its own toggle-behind-a-link checkout/form-coupon.php (.woocommerce-form-coupon*).
   Both restyled here, not replaced — WC's own default stylesheet is dequeued
   in inc/woocommerce.php so these are the only rules governing them.
   Note: these deliberately do NOT require a ".woocommerce" ancestor — WC's
   wc_body_class() only adds the plain "woocommerce" class on shop/product
   pages (is_woocommerce()); cart/checkout/account only get "woocommerce-page"
   plus a page-specific class, so a ".woocommerce form ..." selector silently
   never matches on those pages. */
form .coupon { display: flex; gap: 10px; flex: 1; min-width: 220px; }
form .coupon .input-text,
.woocommerce-form-coupon .input-text {
	border: 1.5px solid var(--oi-border); border-radius: var(--oi-radius-sm); padding: 12px 14px; flex: 1; width: 100%;
}
form .coupon button,
.woocommerce-form-coupon button {
	border: none; border-radius: var(--oi-radius-sm); padding: 12px 18px; background: var(--oi-ink); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
}
.woocommerce-form-coupon-toggle { margin-bottom: 20px; }
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: none; border: none; padding: 0; margin: 0; display: block;
	padding: 10px;
    background: var(--oi-ice);
    border: 1px solid var(--oi-border);
    border-radius: var(--oi-radius-md);
}
.woocommerce-form-coupon-toggle .showcoupon { color: var(--oi-blue); font-weight: 700; text-decoration: underline; }
.woocommerce-form-coupon {
	display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-top: 14px;
	background: var(--oi-ice); border: 1px solid var(--oi-border); border-radius: var(--oi-radius-md); padding: 16px;
}
.woocommerce-form-coupon .form-row { margin: 0; }
.woocommerce-form-coupon .form-row-first { flex: 1; min-width: 180px; }
.woocommerce-form-coupon .form-row-last { flex-shrink: 0; }

.woocommerce-message, .woocommerce-error, .woocommerce-info {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	background: var(--oi-tint-blue); border: 1px solid var(--oi-tint-blue-border); border-radius: var(--oi-radius-md);
	padding: 14px 18px; margin-bottom: 20px; font-size: 13.5px; color: var(--oi-ink);
}
.woocommerce-message li, .woocommerce-error li, .woocommerce-info li { list-style: none; }
.woocommerce-error { background: var(--oi-danger-bg); border-color: var(--oi-danger); color: var(--oi-danger); }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
	background: var(--oi-ink); color: #fff; border-radius: var(--oi-radius-sm); padding: 8px 16px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}

/* Cart */
.oi-cart-item { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--oi-border-soft); }
.oi-cart-item__thumb { width: 56px; height: 56px; border-radius: var(--oi-radius-sm); background: var(--oi-icon-gradient); flex-shrink: 0; }
.oi-cart-item__title { font-weight: 700; font-size: 14.5px; }
.oi-cart-item__meta { font-size: 12.5px; color: var(--oi-muted); }
.oi-cart-item__total { font-weight: 800; font-size: 15px; margin-inline-start: auto; }
.oi-cart-item__remove {
	width: 34px; height: 34px; border-radius: var(--oi-radius-sm); background: var(--oi-danger-bg); color: var(--oi-danger);
	border: none; display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 782px) {
	.oi-cart-item { flex-wrap: wrap; }
	.oi-cart-item__thumb { width: 44px; height: 44px; }
	.oi-cart-item__total { margin-inline-start: 0; order: 5; }
}

.oi-order-summary { position: sticky; top: 100px; background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); padding: 24px; }
.oi-order-summary h2 { font-size: 16px; margin-bottom: 16px; }
.oi-order-summary__row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--oi-muted); padding: 8px 0; }
.oi-order-summary__total { display: flex; justify-content: space-between; font-weight: 800; font-size: 17px; border-top: 1px solid var(--oi-border-soft); padding-top: 14px; margin-top: 6px; }
@media (max-width: 782px) { .oi-order-summary { position: static; } }

/* WooCommerce native forms (login, register, checkout billing, edit-account) —
   restyled generically since they all share the same .form-row conventions.
   Scoped to body.woocommerce-page (present on every WC page: shop, product,
   cart, checkout, account) rather than plain ".woocommerce" — see note above,
   that class is missing on exactly the pages these forms live on. */
.woocommerce-page form .form-row { margin-bottom: 14px; }
.woocommerce-billing-fields h3{
	display: none;
}
.woocommerce-page form .form-row label:not(.woocommerce-form__label-for-checkbox) { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.woocommerce-page form .input-text,
.woocommerce-page form select { width: 100%; border: 1.5px solid var(--oi-border); border-radius: var(--oi-radius-sm); padding: 12px 14px; font-size: 14px; }
.woocommerce-billing-fields__field-wrapper,
.woocommerce-EditAccountForm { display: flex; flex-wrap: wrap; gap: 14px; }
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-EditAccountForm .form-row-wide,
.woocommerce-EditAccountForm > p:not([class*="form-row-"]) { flex: 1 1 100%; }
.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last { flex: 1 1 45%; }
@media (max-width: 782px) {
	.woocommerce-billing-fields__field-wrapper .form-row-first,
	.woocommerce-billing-fields__field-wrapper .form-row-last { flex: 1 1 100%; }
}
.woocommerce-EditAccountForm button[type="submit"] { background: var(--oi-ink); color: #fff; border: none; border-radius: var(--oi-radius-sm); padding: 12px 24px; font-weight: 700; }

/* Checkbox+label rows (remember-me, terms & conditions) — the generic
   ".form-row label { display:block }" rule above is excluded for this class
   (see :not() above); a checkbox's own label needs to stay inline with it
   instead, or the checkbox and its text end up on separate lines (the same
   class of bug as icon+text pairs elsewhere in the theme). The blog/review
   comment form's own cookie-consent checkbox gets the same treatment scoped
   to .oi-comment-form in components.css instead, since it can render outside
   any WooCommerce page. */
.woocommerce-form__label-for-checkbox {
	display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 0;
}
.woocommerce-form__input-checkbox { margin: 0; flex-shrink: 0; }

/* Login / Register (myaccount/form-login.php) */
#customer_login.u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 782px) { #customer_login.u-columns { grid-template-columns: 1fr; } }
.woocommerce-form-login,
.woocommerce-form-register {
	background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); padding: 24px;
}
.u-column1 h2, .u-column2 h2, #customer_login > h2 { font-size: 18px; margin-bottom: 18px; }
.woocommerce-form-login p.form-row:not(.form-row-wide) {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	background: var(--oi-ink); color: #fff; border: none; border-radius: var(--oi-radius-sm);
	padding: 12px 24px; font-weight: 700; cursor: pointer;
}
.woocommerce-LostPassword { margin-top: 14px; font-size: 13px; }
.woocommerce-LostPassword a { color: var(--oi-blue); }
.woocommerce-privacy-policy-text { font-size: 12px; color: var(--oi-muted); margin-top: 16px; line-height: 1.8; }
.woocommerce-privacy-policy-text a { color: var(--oi-blue); }

/* Single order view (myaccount/view-order.php) */
.woocommerce-order-details,
.woocommerce-order-downloads,
.woocommerce-customer-details { margin-bottom: 28px; }
.woocommerce-order-details__title, .woocommerce-order-downloads__title { font-size: 17px; margin-bottom: 14px; }
.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
	width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); overflow: hidden;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--order-downloads th,
.woocommerce-table--order-downloads td { padding: 12px 14px; font-size: 13px; text-align: start; border-bottom: 1px solid var(--oi-border-soft); }
.woocommerce-table--order-details th,
.woocommerce-table--order-downloads th { background: var(--oi-ice); font-size: 12.5px; }
.woocommerce-table--order-details tfoot th { font-weight: 600; }
.woocommerce-table--order-details tfoot .amount { font-weight: 700; }
.woocommerce-customer-details address { font-style: normal; font-size: 13.5px; line-height: 1.9; background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); padding: 18px; }
.woocommerce-column--billing-address, .woocommerce-column--shipping-address { margin-bottom: 0; }
.woocommerce-column__title { font-size: 15px; margin-bottom: 12px; }
/* Order tables can't reflow into cards (WC owns their markup on view-order) —
   give the table itself a controlled horizontal scroll instead of letting it
   stretch the page. */
@media (max-width: 782px) {
	.woocommerce-table--order-details,
	.woocommerce-table--order-downloads { display: block; overflow-x: auto; }
}
.woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 782px) { .woocommerce-columns--addresses { grid-template-columns: 1fr; } }
.woocommerce-order-details .woocommerce-button,
.woocommerce-order-details .order-actions-button {
	display: inline-block; padding: 8px 16px; border-radius: var(--oi-radius-sm);
	background: var(--oi-tint-blue); color: var(--oi-blue); font-size: 12.5px; font-weight: 700; margin-inline-end: 6px;
}

/* WC wraps the order number/date/status in <mark> on the order-received and
   view-order pages — unstyled, that's just the browser's default yellow
   highlight background, which is what was showing up. */
.woocommerce-page mark { background: none; color: inherit; font-weight: 700; padding: 0; }

/* Orders table (myaccount/orders.php default markup) */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); overflow: hidden; }
.woocommerce-orders-table th, .woocommerce-orders-table td { padding: 14px; font-size: 13px; text-align: start; border-bottom: 1px solid var(--oi-border-soft); }
.woocommerce-orders-table th { background: var(--oi-ice); font-size: 12.5px; }
.woocommerce-orders-table .woocommerce-button { display: inline-block; padding: 6px 14px; border-radius: var(--oi-radius-sm); background: var(--oi-tint-blue); color: var(--oi-blue); font-size: 12px; font-weight: 700; margin-inline-end: 6px; }
@media (max-width: 782px) {
	.woocommerce-orders-table thead { display: none; }
	.woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr, .woocommerce-orders-table td { display: block; width: 100%; }
	.woocommerce-orders-table tr { border-bottom: 1px solid var(--oi-border-soft); padding: 10px 14px; }
	.woocommerce-orders-table td { border: none; padding: 4px 0; display: flex; justify-content: space-between; }
	.woocommerce-orders-table td::before { content: attr(data-title); font-weight: 600; color: var(--oi-muted); }
}

.wc_payment_methods { list-style: none; padding: 0; margin: 0; }
.wc_payment_methods .wc_payment_method { border: 1.5px solid var(--oi-border); border-radius: var(--oi-radius-md); padding: 16px; margin-bottom: 10px; }
.wc_payment_methods .wc_payment_method label { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.wc_payment_methods .payment_box { margin-top: 12px; font-size: 13px; color: var(--oi-muted); }
.woocommerce-terms-and-conditions-wrapper { margin: 16px 0; font-size: 13.5px; }
.woocommerce-terms-and-conditions-wrapper a { color: var(--oi-blue); text-decoration: underline; }
#place_order { 
	width: 100%;
	background-image: var(--oi-brand-gradient);
    color: #fff;
    box-shadow: var(--oi-shadow-btn);
    border: none;
    padding: 14px;
    border-radius: 10px;
}
.woocommerce-checkout-review-order-table { width: 100%; margin-bottom: 16px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 8px 0; font-size: 13px; text-align: right;}

.woocommerce-shipping-fields{
	display: none;
}
/* Checkout */
.oi-checkout { padding: 24px 0 64px; }
.oi-checkout__progress { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 40px; }
.oi-checkout__step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.oi-checkout__step-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.oi-checkout__step--done .oi-checkout__step-circle { background: var(--oi-success); color: #fff; }
.oi-checkout__step--current { font-weight: 700; }
.oi-checkout__step--current .oi-checkout__step-circle { background: var(--oi-blue); color: #fff; }
.oi-checkout__step--upcoming .oi-checkout__step-circle { background: var(--oi-border); color: var(--oi-faint); }
.oi-checkout__step--upcoming { color: var(--oi-faint); }
.oi-checkout__connector { width: 40px; height: 2px; background: var(--oi-border); }
.oi-checkout__connector.is-done { background: var(--oi-blue); }
@media (max-width: 782px) {
	.oi-checkout__progress { font-size: 11px; gap: 8px; }
	.oi-checkout__step-circle { display: none; }
	.oi-checkout__connector { width: 12px; }
}

.oi-checkout__layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 960px) { .oi-checkout__layout { grid-template-columns: 1fr; } }

.oi-checkout-card { background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); padding: 26px; margin-bottom: 20px; }
.oi-checkout-card h2 { font-size: 15px; margin-bottom: 16px; }
.oi-payment-option { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1.5px solid var(--oi-border); border-radius: var(--oi-radius-md); margin-bottom: 10px; }
.oi-payment-option.is-selected { border-color: var(--oi-blue); border-width: 2px; background: var(--oi-tint-blue); }

.oi-checkout-summary-toggle { display: none; }
@media (max-width: 782px) {
	.oi-checkout-summary-toggle {
		display: flex; width: 100%; justify-content: space-between; align-items: center;
		background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-md);
		padding: 14px 16px; font-size: 13px; font-weight: 700; color: var(--oi-blue); margin-bottom: 16px;
	}
	.oi-order-summary { display: none; }
	.oi-order-summary.is-open { display: block; }
}

/* My Account */
.oi-account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; }
@media (max-width: 960px) { .oi-account-layout { grid-template-columns: 1fr; } }
.oi-account-nav {
	background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg);
	padding: 16px; position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px;
}
.oi-account-nav a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--oi-muted); }
.oi-account-nav a.is-active,
.oi-account-nav a:hover { background: var(--oi-tint-blue); color: var(--oi-blue); font-weight: 700; }
@media (max-width: 960px) {
	.oi-account-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.oi-account-nav a { border-radius: 18px; padding: 9px 15px; border: 1.5px solid var(--oi-border); }
	.oi-account-nav a.is-active { background-image: var(--oi-brand-gradient); background-color: transparent; border-color: transparent; color: #fff; }
}

.oi-sub-card { background: var(--oi-dark-gradient); border-radius: 20px; padding: 28px; color: #fff; margin-bottom: 20px; }
.oi-sub-status-pill { background: rgba(23,166,115,.15); color: var(--oi-success-dark); font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--oi-radius-pill); display: inline-block; }
.oi-sub-card h2 { color: #fff; font-size: 20px; margin: 12px 0 4px; }
.oi-sub-card__expiry { font-size: 13px; color: var(--oi-dark-subtext); }
.oi-sub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.oi-sub-stat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--oi-radius-md); padding: 14px; text-align: center; }
.oi-sub-stat span { display: block; font-size: 11.5px; color: var(--oi-dark-subtext); margin-bottom: 6px; }
.oi-sub-stat b { font-size: 14px; }
@media (max-width: 782px) { .oi-sub-stats { grid-template-columns: repeat(2, 1fr); } }
.oi-account-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 782px) { .oi-account-actions { grid-template-columns: 1fr; } }

.oi-orders-table { width: 100%; border-collapse: collapse; }
.oi-orders-table th, .oi-orders-table td { padding: 14px; font-size: 13px; text-align: start; border-bottom: 1px solid var(--oi-border-soft); }
.oi-orders-table th { background: var(--oi-ice); font-size: 12.5px; }
.oi-order-card { display: none; }
@media (max-width: 782px) {
	.oi-orders-table { display: none; }
	.oi-order-card { display: block; border: 1px solid var(--oi-border); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
	.oi-order-card__row { display: flex; justify-content: space-between; font-size: 13px; }
}

.oi-tutorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 782px) { .oi-tutorial-grid { grid-template-columns: 1fr; } }
.oi-tutorial-link { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-md); padding: 18px 20px; background: #fff; font-weight: 600; }

.oi-account-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #fff; border: 1px solid var(--oi-border); border-radius: var(--oi-radius-lg); padding: 26px; }
@media (max-width: 782px) { .oi-account-form { grid-template-columns: 1fr; } }
.oi-account-form .oi-field--full { grid-column: 1 / -1; }

.woocommerce-bacs-bank-details{
    background: #3c5be333;
    padding: 20px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 29px;
    margin: 14px 0;
}
.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading{
    font-size: 21px;
    color: #2b3f90;
    margin-bottom: 16px;
}
.woocommerce-order-received .woocommerce-order p {
	border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
    /* color: #FFF; */
    text-align: center;
	font-weight: 900;
}