/* ============================================================
   Brand skin for WooCommerce + Tutor LMS default templates.
   We deliberately do NOT rebuild cart/checkout/account markup —
   that stays plugin-owned for security/reliability. This file
   just re-skins it to match the rest of the site.
   ============================================================ */

.sjp-wc-wrap, .woocommerce, .woocommerce-page, .tutor {
	color: var(--ivory);
}

.sjp-wc-wrap h1, .sjp-wc-wrap h2, .sjp-wc-wrap h3,
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
	font-family: 'Playfair Display', serif;
	color: var(--ivory);
}

.sjp-wc-wrap table.shop_table, .woocommerce table.shop_table {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	color: var(--ivory);
}
.sjp-wc-wrap table.shop_table th, .woocommerce table.shop_table th {
	background: var(--card-2);
	color: var(--gold-soft);
	border-bottom: 1px solid var(--line-strong);
}
.sjp-wc-wrap table.shop_table td, .woocommerce table.shop_table td {
	border-top: 1px solid var(--line);
}

.sjp-wc-wrap .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #place_order, .woocommerce input.button, .llms-button-action {
	background: var(--gradient-brand) !important;
	border: none !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 12px 26px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	transition: opacity .2s ease, transform .2s ease;
}
.sjp-wc-wrap .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #place_order:hover, .llms-button-action:hover {
	background: var(--gradient-brand-hover) !important;
	transform: translateY(-1px);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.tutor input[type="text"], .tutor input[type="email"], .tutor input[type="password"] {
	background: rgba(255,255,255,0.05) !important;
	border: 1px solid var(--line-strong) !important;
	color: var(--ivory) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
}

.woocommerce-checkout-review-order, .woocommerce-cart-form,
.woocommerce-MyAccount-content, .tutor .llms-sd-widget {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 28px;
}

.woocommerce-MyAccount-navigation ul, .tutor-tabs {
	background: var(--card-2);
	border-radius: 14px;
	padding: 10px;
}
.woocommerce-MyAccount-navigation ul li a {
	color: var(--slate);
}
.woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover {
	color: var(--gold-soft);
}

.woocommerce-message, .woocommerce-info, .llms-notice {
	background: var(--card-2) !important;
	border-top-color: var(--gold) !important;
	color: var(--ivory) !important;
	border-radius: 10px;
}

/* Product / course catalog grid re-uses the same card look as the
   homepage course cards. */
ul.products, .llms-loop-item-inner { display: contents; }
ul.products li.product, .llms-loop-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 16px;
	transition: transform .25s ease, border-color .25s ease;
}
ul.products li.product:hover, .llms-loop-item:hover {
	transform: translateY(-4px);
	border-color: var(--line-strong);
}
ul.products li.product img, .llms-loop-item img { border-radius: 12px; }
ul.products li.product .price, .llms-loop-item .llms-price { color: var(--gold-soft) !important; }

/* Course video / lesson protection screens (Tutor LMS) */
.llms-video-wrapper, .llms-lesson-preview { border-radius: 14px; overflow: hidden; }
.llms-access-plan { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; }
.llms-access-plan.featured { border-color: var(--gold) !important; }

/* Real WooCommerce "Edit address" form on My Account (form-edit-address.php) */
.sjp-wc-address-form-real .woocommerce-address-fields { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.sjp-wc-address-form-real .form-row { margin: 0 0 14px; }
.sjp-wc-address-form-real .select2-container .select2-selection--single { background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); border-radius: 10px; height: 46px; }
.sjp-wc-address-form-real .select2-selection__rendered { color: var(--ivory) !important; line-height: 46px !important; }
@media (max-width:520px) { .sjp-wc-address-form-real .woocommerce-address-fields { padding: 18px; } }

/* ============================================================
   Real WooCommerce checkout (page-checkout.php renders the actual
   [woocommerce_checkout] shortcode). WooCommerce's own frontend CSS
   already lays this out as a 2-column .col2-set that collapses to a
   single column under 768px; this just brand-skins it and makes sure
   it never overflows narrower phones.
   ============================================================ */
.sjp-wc-checkout-real { padding: 8px 0 60px; }
.sjp-wc-checkout-real .woocommerce-notices-wrapper:empty { display: none; }
.sjp-wc-checkout-real form.checkout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.sjp-wc-checkout-real #customer_details { flex: 1 1 420px; min-width: 0; }
.sjp-wc-checkout-real #order_review_heading,
.sjp-wc-checkout-real #order_review { flex: 1 1 360px; min-width: 0; align-self: flex-start; position: sticky; top: 110px; }
.sjp-wc-checkout-real .woocommerce-billing-fields,
.sjp-wc-checkout-real .woocommerce-additional-fields { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; margin-bottom: 20px; }
.sjp-wc-checkout-real .woocommerce-billing-fields h3,
.sjp-wc-checkout-real .woocommerce-additional-fields h3 { margin-top: 0; }
.sjp-wc-checkout-real .form-row { margin: 0 0 14px; }
.sjp-wc-checkout-real .select2-container .select2-selection--single { background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); border-radius: 10px; height: 46px; }
.sjp-wc-checkout-real .select2-selection__rendered { color: var(--ivory) !important; line-height: 46px !important; }
.sjp-wc-checkout-real table.shop_table th,
.sjp-wc-checkout-real table.shop_table td { padding: 10px 14px; }
.sjp-wc-checkout-real .woocommerce-checkout-payment { background: var(--card-2); border-radius: 14px; padding: 4px; margin-top: 16px; }
.sjp-wc-checkout-real ul.payment_methods { list-style: none; margin: 0; padding: 10px; }
.sjp-wc-checkout-real ul.payment_methods li { border-bottom: 1px solid var(--line); padding: 10px 4px; }
.sjp-wc-checkout-real ul.payment_methods li:last-child { border-bottom: none; }
.sjp-wc-checkout-real .payment_box { background: rgba(255,255,255,0.04); border-radius: 10px; margin-top: 10px !important; }
@media (max-width:900px) {
	.sjp-wc-checkout-real form.checkout { flex-direction: column; }
	.sjp-wc-checkout-real #order_review_heading,
	.sjp-wc-checkout-real #order_review { position: static; width: 100%; }
}
@media (max-width:520px) {
	.sjp-wc-checkout-real .woocommerce-billing-fields,
	.sjp-wc-checkout-real .woocommerce-additional-fields { padding: 18px; }
	.sjp-wc-checkout-real table.shop_table th,
	.sjp-wc-checkout-real table.shop_table td { padding: 8px 10px; font-size: 13px; }
}

/* ============================================================
   Mobile-responsive WooCommerce shop_table (cart review / order
   history / order-received tables). WooCommerce core already prints
   a `data-title` attribute on every <td>; below the breakpoint we
   turn each row into a stacked card using that attribute instead of
   letting a wide table overflow the screen on a phone.
   ============================================================ */
@media (max-width:680px) {
	.sjp-wc-wrap table.shop_table thead, .woocommerce table.shop_table thead { display: none; }
	.sjp-wc-wrap table.shop_table, .woocommerce table.shop_table,
	.sjp-wc-wrap table.shop_table tbody, .woocommerce table.shop_table tbody,
	.sjp-wc-wrap table.shop_table tr, .woocommerce table.shop_table tr { display: block; width: 100%; }
	.sjp-wc-wrap table.shop_table tr, .woocommerce table.shop_table tr { border-bottom: 1px solid var(--line-strong); padding: 10px 0; }
	.sjp-wc-wrap table.shop_table tr:last-child, .woocommerce table.shop_table tr:last-child { border-bottom: none; }
	.sjp-wc-wrap table.shop_table td, .woocommerce table.shop_table td {
		display: flex; justify-content: space-between; align-items: center;
		gap: 12px; text-align: right; border-top: none; padding: 8px 16px;
	}
	.sjp-wc-wrap table.shop_table td[data-title]::before, .woocommerce table.shop_table td[data-title]::before {
		content: attr(data-title); font-weight: 600; color: var(--gold-soft); text-align: left; margin-right: auto;
	}
	.sjp-wc-wrap table.shop_table td.product-remove, .woocommerce table.shop_table td.product-remove { justify-content: flex-end; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.woocommerce-MyAccount-navigation ul li { flex: 1 1 auto; text-align: center; }
}