/**
 * Ping Digital Commerce — Frontend Styles
 *
 * Theme-adaptive: all colors are driven by CSS custom properties that
 * inherit from the active WordPress theme wherever possible.
 *
 * Resolution order for --pdc-primary:
 *   1. --wp--preset--color--primary   (Full Site Editing / block themes)
 *   2. --color-primary                (many classic/page-builder themes)
 *   3. --theme-color                  (some WP starter themes)
 *   4. #2271b1                        (safe neutral fallback — never hard green)
 *
 * To override for a specific site, add to your theme's style.css or
 * Customizer Additional CSS:
 *   .pdc-wrap, .pdc-account-wrap { --pdc-primary: #your-color; }
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
	/* Primary — resolves from theme, falls back to neutral blue */
	--pdc-primary:        var(--wp--preset--color--primary,
	                       var(--color-primary,
	                       var(--theme-color,
	                       #2271b1)));

	/* Hover is a darker shade of whatever primary resolves to.
	   CSS color-mix() is supported in all modern browsers (2023+).
	   The oklch fallback handles older environments gracefully. */
	--pdc-primary-hover:  var(--wp--preset--color--primary-dark,
	                       var(--color-primary-dark,
	                       color-mix(in srgb, var(--pdc-primary) 80%, #000)));

	/* Foreground / text on primary background — white works for most brand
	   colors; override if your primary is very light */
	--pdc-primary-text:   var(--wp--preset--color--on-primary, #fff);

	/* Accent for focus rings — slightly transparent version of primary */
	--pdc-focus-ring:     color-mix(in srgb, var(--pdc-primary) 30%, transparent);

	/* Neutral surface colors — inherit from theme where exposed */
	--pdc-secondary:      var(--wp--preset--color--base-2,
	                       var(--color-background-secondary,
	                       #f6f7f7));
	--pdc-secondary-text: var(--wp--preset--color--contrast-2, #3c434a);
	--pdc-bg:             var(--wp--preset--color--base,
	                       var(--color-background,
	                       #ffffff));
	--pdc-text:           var(--wp--preset--color--contrast,
	                       var(--color-text,
	                       #1d2327));
	--pdc-muted:          var(--wp--preset--color--contrast-3,
	                       var(--color-text-light,
	                       #646970));
	--pdc-border:         var(--wp--preset--color--contrast-4,
	                       var(--color-border,
	                       #dcdcde));

	/* Semantic state colors — inherit from theme, fall back to standards */
	--pdc-success:        var(--wp--preset--color--success,
	                       var(--color-success,
	                       #00a32a));
	--pdc-success-bg:     color-mix(in srgb, var(--pdc-success) 10%, #fff);
	--pdc-success-border: color-mix(in srgb, var(--pdc-success) 35%, #fff);
	--pdc-success-text:   color-mix(in srgb, var(--pdc-success) 60%, #000);

	--pdc-error:          var(--wp--preset--color--error,
	                       var(--color-error,
	                       #d63638));
	--pdc-error-bg:       color-mix(in srgb, var(--pdc-error) 8%, #fff);

	--pdc-warning:        var(--wp--preset--color--warning,
	                       var(--color-warning,
	                       #d67500));
	--pdc-warning-bg:     color-mix(in srgb, var(--pdc-warning) 8%, #fff);
	--pdc-warning-text:   color-mix(in srgb, var(--pdc-warning) 80%, #000);

	/* Primary tint — used for notice backgrounds, highlights */
	--pdc-primary-bg:     color-mix(in srgb, var(--pdc-primary) 8%, #fff);
	--pdc-primary-text-on-tint: color-mix(in srgb, var(--pdc-primary) 70%, #000);

	/* Typography */
	--pdc-font:           var(--wp--preset--font-family--base,
	                       var(--font-base,
	                       inherit));

	/* Misc */
	--pdc-radius:         var(--wp--custom--border-radius, 4px);
	--pdc-shadow:         0 1px 3px rgba(0,0,0,.1);
}

/* ── Notices ───────────────────────────────────────────────────────────── */
.pdc-notices { margin: 0 0 1.5rem; }
.pdc-notice {
	padding: .75rem 1rem;
	border-radius: var(--pdc-radius);
	border-left: 4px solid var(--pdc-primary);
	background: var(--pdc-primary-bg);
	margin-bottom: .5rem;
}
.pdc-notice p { margin: 0; }
.pdc-notice--success {
	border-color: var(--pdc-success);
	background: var(--pdc-success-bg);
	color: var(--pdc-success-text);
}
.pdc-notice--error {
	border-color: var(--pdc-error);
	background: var(--pdc-error-bg);
	color: color-mix(in srgb, var(--pdc-error) 60%, #000);
}
.pdc-notice--warning {
	border-color: var(--pdc-warning);
	background: var(--pdc-warning-bg);
	color: var(--pdc-warning-text);
}
.pdc-notice--info {
	border-color: var(--pdc-primary);
	background: var(--pdc-primary-bg);
	color: var(--pdc-primary-text-on-tint);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.pdc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .5rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--pdc-radius);
	font-size: .9375rem;
	font-family: var(--pdc-font);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
	white-space: nowrap;
}
.pdc-btn:focus-visible {
	outline: 3px solid var(--pdc-focus-ring);
	outline-offset: 2px;
}

.pdc-btn--primary {
	background: var(--pdc-primary);
	color: var(--pdc-primary-text);
	border-color: var(--pdc-primary);
}
.pdc-btn--primary:hover {
	background: var(--pdc-primary-hover);
	border-color: var(--pdc-primary-hover);
	color: var(--pdc-primary-text);
}

.pdc-btn--secondary {
	background: var(--pdc-secondary);
	color: var(--pdc-secondary-text);
	border-color: var(--pdc-border);
}
.pdc-btn--secondary:hover {
	background: color-mix(in srgb, var(--pdc-secondary) 80%, #000);
	color: var(--pdc-text);
}

.pdc-btn--ghost {
	background: transparent;
	color: var(--pdc-primary);
	border-color: var(--pdc-primary);
}
.pdc-btn--ghost:hover {
	background: var(--pdc-primary);
	color: var(--pdc-primary-text);
}

.pdc-btn--large  { padding: .75rem 1.75rem; font-size: 1rem; }
.pdc-btn--small  { padding: .4rem .85rem; font-size: .875rem; }
.pdc-btn--tiny   { padding: .25rem .65rem; font-size: .8125rem; }
.pdc-btn--full   { width: 100%; }
.pdc-btn:disabled,
.pdc-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Product Grid ──────────────────────────────────────────────────────── */
.pdc-product-grid {
	display: grid;
	gap: 1.5rem;
	margin: 1.5rem 0;
}
.pdc-cols-1 { grid-template-columns: 1fr; }
.pdc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pdc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pdc-cols-4 { grid-template-columns: repeat(4, 1fr); }
.pdc-no-products { color: var(--pdc-muted); text-align: center; padding: 3rem 1rem; }

/* ── Product Card — WooCommerce-style ──────────────────────────────────── */
.pdc-product-card {
	display: flex;
	flex-direction: column;
	background: var(--pdc-bg);
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	overflow: hidden;
	box-shadow: var(--pdc-shadow);
	transition: box-shadow .2s, transform .2s;
	position: relative;
}
.pdc-product-card:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,.13);
	transform: translateY(-2px);
}

/* Image area */
.pdc-product-card__image-wrap {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--pdc-secondary);
	text-decoration: none;
}
.pdc-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.pdc-product-card:hover .pdc-product-card__img { transform: scale(1.04); }

.pdc-product-card__img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pdc-secondary);
}

/* Badge (Licensed, Sale, etc.) */
.pdc-product-card__badge {
	position: absolute;
	top: .6rem;
	left: .6rem;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .2rem .55rem;
	border-radius: 3px;
	pointer-events: none;
}
.pdc-product-card__badge--license {
	background: var(--pdc-primary);
	color: var(--pdc-primary-text);
}

/* Card body */
.pdc-product-card__body {
	padding: .85rem 1rem .5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.pdc-product-card__category {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pdc-primary);
	margin-bottom: .15rem;
}

.pdc-product-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.35;
}
.pdc-product-card__title a {
	color: var(--pdc-text);
	text-decoration: none;
}
.pdc-product-card__title a:hover { color: var(--pdc-primary); }

.pdc-product-card__excerpt {
	font-size: .875rem;
	color: var(--pdc-muted);
	margin: .25rem 0 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer: price + Add to Cart */
.pdc-product-card__footer {
	padding: .75rem 1rem 1rem;
	border-top: 1px solid var(--pdc-border);
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.pdc-product-card__price-row {
	display: flex;
	align-items: baseline;
	gap: .5rem;
}
.pdc-product-card__price {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pdc-text);
	line-height: 1;
}
.pdc-product-card__version {
	font-size: .75rem;
	color: var(--pdc-muted);
	background: var(--pdc-secondary);
	padding: .1rem .4rem;
	border-radius: 3px;
}

.pdc-product-card__cart-form { margin: 0; }
.pdc-product-card__atc-btn {
	width: 100%;
	justify-content: center;
	font-size: .9375rem;
	padding: .6rem 1rem;
}

/* ── Single Product ────────────────────────────────────────────────────── */
.pdc-single-product { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem; }
.pdc-single-product__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	margin-bottom: 2rem;
}
.pdc-single-product__thumbnail img {
	width: 100%;
	border-radius: var(--pdc-radius);
	box-shadow: var(--pdc-shadow);
}
.pdc-product-type-badge {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pdc-muted);
	margin-bottom: .5rem;
}
.pdc-single-product__title { font-size: 1.75rem; margin: 0 0 .75rem; }
.pdc-single-product__price-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.pdc-single-product__price { font-size: 1.5rem; font-weight: 700; color: var(--pdc-text); }
.pdc-single-product__version { font-size: .875rem; color: var(--pdc-muted); }
.pdc-license-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8125rem;
	color: var(--pdc-primary);
	margin-bottom: 1.25rem;
}
.pdc-quantity-row { display: flex; gap: .5rem; align-items: center; margin-top: 1.25rem; }
.pdc-qty-input {
	width: 64px;
	padding: .5rem;
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	font-size: .9375rem;
	text-align: center;
}
.pdc-qty-input--small { width: 56px; padding: .3rem .4rem; }
.pdc-single-product__description { border-top: 1px solid var(--pdc-border); padding-top: 1.5rem; margin-bottom: 2rem; }
.pdc-single-product__changelog h2 { font-size: 1.25rem; margin-bottom: .75rem; }
.pdc-changelog-content {
	background: var(--pdc-secondary);
	border-radius: var(--pdc-radius);
	padding: 1rem 1.25rem;
	font-size: .875rem;
	line-height: 1.7;
}

/* ── Cart ──────────────────────────────────────────────────────────────── */
.pdc-cart-wrap { max-width: 860px; margin: 0 auto; padding: 1rem; }
.pdc-cart-empty { text-align: center; padding: 3rem 1rem; color: var(--pdc-muted); }
.pdc-cart-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.pdc-cart-table th,
.pdc-cart-table td {
	padding: .75rem .5rem;
	border-bottom: 1px solid var(--pdc-border);
	text-align: left;
	font-size: .9375rem;
}
.pdc-cart-table thead th {
	font-weight: 700;
	font-size: .875rem;
	color: var(--pdc-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pdc-col-price, .pdc-col-qty, .pdc-col-total { width: 100px; text-align: right; }
.pdc-col-remove { width: 40px; text-align: center; }
.pdc-cart-remove { color: var(--pdc-muted); font-size: 1.25rem; line-height: 1; text-decoration: none; transition: color .15s; }
.pdc-cart-remove:hover { color: var(--pdc-error); }
.pdc-cart-actions { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.pdc-cart-totals { max-width: 320px; margin-left: auto; }
.pdc-totals-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.pdc-totals-table th, .pdc-totals-table td { padding: .5rem; font-size: .9375rem; }
.pdc-totals-table th { text-align: left; color: var(--pdc-muted); font-weight: 400; }
.pdc-totals-table td { text-align: right; }
.pdc-totals-table__total th,
.pdc-totals-table__total td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--pdc-border); padding-top: .75rem; }

/* ── Checkout ──────────────────────────────────────────────────────────── */
.pdc-checkout-wrap { max-width: 960px; margin: 0 auto; padding: 1rem; }
.pdc-checkout-layout {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 2.5rem;
	align-items: start;
}
.pdc-checkout__section-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 1.5rem 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--pdc-border);
}
.pdc-checkout__section-title:first-child { margin-top: 0; }

/* Form fields */
.pdc-form-row { margin-bottom: 1rem; }
.pdc-form-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pdc-field { margin-bottom: 1rem; }
.pdc-field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .3rem; }
.pdc-field input[type="text"],
.pdc-field input[type="email"] {
	width: 100%;
	padding: .5rem .75rem;
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	font-size: .9375rem;
	box-sizing: border-box;
	transition: border-color .15s;
}
.pdc-field input:focus {
	border-color: var(--pdc-primary);
	outline: none;
	box-shadow: 0 0 0 2px var(--pdc-focus-ring);
}
.pdc-field-hint { font-size: .8125rem; color: var(--pdc-muted); margin-top: .25rem; display: block; }

/* Gateway list */
.pdc-gateway-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.pdc-gateway-option {
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	padding: .75rem 1rem;
	cursor: pointer;
	transition: border-color .15s;
}
.pdc-gateway-option--selected { border-color: var(--pdc-primary); }
.pdc-gateway-label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.pdc-gateway-radio { margin: 0; }
.pdc-gateway-name { font-weight: 600; }
.pdc-gateway-test-badge {
	font-size: .7rem;
	background: var(--pdc-warning-bg);
	color: var(--pdc-warning-text);
	padding: .1rem .4rem;
	border-radius: 3px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pdc-gateway-description { font-size: .8125rem; color: var(--pdc-muted); margin: .3rem 0 0; }

/* Stripe card element */
.pdc-stripe-card-element {
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	padding: .65rem .75rem;
	background: var(--pdc-bg);
	margin-top: .75rem;
}
.pdc-stripe-errors { color: var(--pdc-error); font-size: .875rem; margin-top: .4rem; min-height: 1.25rem; }

/* Order summary sidebar */
.pdc-checkout-col--summary {
	background: var(--pdc-secondary);
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	padding: 1.25rem;
	position: sticky;
	top: 1rem;
}
.pdc-summary-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.pdc-summary-table td, .pdc-summary-table th { padding: .5rem .25rem; font-size: .9375rem; }
.pdc-summary-table tbody td:last-child, .pdc-summary-table tfoot td { text-align: right; }
.pdc-summary-item-name { color: var(--pdc-text); }
.pdc-summary-qty { font-size: .8125rem; color: var(--pdc-muted); }
.pdc-summary-item-total { white-space: nowrap; }
.pdc-summary-total th, .pdc-summary-total td { font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--pdc-border); padding-top: .75rem; }
.pdc-checkout__terms { font-size: .75rem; color: var(--pdc-muted); margin-top: .75rem; }

/* ── Thank-you page ────────────────────────────────────────────────────── */
.pdc-thankyou-wrap { max-width: 640px; margin: 2rem auto; padding: 1rem; text-align: center; }
.pdc-thankyou-banner { margin-bottom: 2rem; }
.pdc-thankyou-icon { color: var(--pdc-success); margin-bottom: 1rem; display: block; margin-left: auto; margin-right: auto; }
.pdc-thankyou-banner h1 { font-size: 1.75rem; margin-bottom: .5rem; }
.pdc-order-confirmation { text-align: left; background: var(--pdc-secondary); border-radius: var(--pdc-radius); padding: 1.25rem; }
.pdc-order-confirmation h2 { font-size: 1.1rem; margin-bottom: .75rem; }
.pdc-confirmation-table { width: 100%; border-collapse: collapse; }
.pdc-confirmation-table th, .pdc-confirmation-table td { padding: .5rem; font-size: .9375rem; border-bottom: 1px solid var(--pdc-border); }
.pdc-confirmation-table th { width: 40%; text-align: left; color: var(--pdc-muted); font-weight: 400; }
.pdc-confirmation-table tr:last-child th, .pdc-confirmation-table tr:last-child td { border-bottom: none; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media ( max-width: 768px ) {
	.pdc-cols-3, .pdc-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.pdc-single-product__inner { grid-template-columns: 1fr; }
	.pdc-checkout-layout { grid-template-columns: 1fr; }
	.pdc-checkout-col--summary { position: static; }
	.pdc-cart-table th.pdc-col-price,
	.pdc-cart-table td.pdc-col-price { display: none; }
}
@media ( max-width: 480px ) {
	.pdc-cols-2, .pdc-cols-3, .pdc-cols-4 { grid-template-columns: 1fr; }
	.pdc-product-card__actions { flex-direction: column; }
	.pdc-form-row--half { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Customer Account Portal
   ═══════════════════════════════════════════════════════════════════════ */

.pdc-account-wrap { max-width: 900px; margin: 0 auto; padding: 1rem; }
.pdc-account-login-prompt { text-align: center; padding: 3rem 1rem; max-width: 480px; margin: 0 auto; }
.pdc-account-login-prompt .pdc-btn { margin-top: 1rem; }
.pdc-account-register-link { margin-top: 1rem; font-size: .9rem; color: var(--pdc-muted); }

/* Account nav */
.pdc-account-nav { margin-bottom: 1.75rem; border-bottom: 2px solid var(--pdc-border); }
.pdc-account-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.pdc-account-nav__item { margin: 0; }
.pdc-account-nav__link {
	display: block;
	padding: .6rem 1.1rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--pdc-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color .15s, border-color .15s;
}
.pdc-account-nav__link:hover { color: var(--pdc-primary); }
.pdc-account-nav__link--active { color: var(--pdc-primary); border-bottom-color: var(--pdc-primary); }

/* Section typography */
.pdc-account-section-title { font-size: 1.25rem; margin: 0 0 1.25rem; }
.pdc-account-section-subtitle { font-size: 1rem; margin: 1.5rem 0 .75rem; color: var(--pdc-text); }
.pdc-account-section-link { text-align: right; margin: .5rem 0 0; font-size: .875rem; }
.pdc-account-empty { color: var(--pdc-muted); padding: 1.5rem 0; }
.pdc-account-back-link { display: inline-block; margin-bottom: 1rem; color: var(--pdc-primary); font-size: .9rem; text-decoration: none; }
.pdc-account-back-link:hover { text-decoration: underline; }
.pdc-muted-text { color: var(--pdc-muted); }
.pdc-text-small { font-size: .8125rem; }

/* Dashboard summary cards */
.pdc-account-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.pdc-account-card {
	background: var(--pdc-bg);
	border: 1px solid var(--pdc-border);
	border-top: 3px solid var(--pdc-primary);
	border-radius: var(--pdc-radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}
.pdc-account-card__number { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--pdc-text); }
.pdc-account-card__label { font-size: .8125rem; color: var(--pdc-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Account tables */
.pdc-account-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pdc-account-table th,
.pdc-account-table td { padding: .65rem .5rem; border-bottom: 1px solid var(--pdc-border); text-align: left; }
.pdc-account-table thead th { font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pdc-muted); }
.pdc-account-table tbody tr:last-child td { border-bottom: none; }
.pdc-col-right { text-align: right; }
.pdc-col-center { text-align: center; }

/* Order detail */
.pdc-order-detail { margin-top: 1rem; }
.pdc-order-detail__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.pdc-order-detail__header h3 { margin: 0; font-size: 1.1rem; }
.pdc-order-detail__meta { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.pdc-order-total-row th, .pdc-order-total-row td { font-weight: 700; border-top: 2px solid var(--pdc-border); }

/* License cards */
.pdc-license-list { display: flex; flex-direction: column; gap: 1rem; }
.pdc-license-card {
	background: var(--pdc-bg);
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	padding: 1.25rem;
}
.pdc-license-card--active   { border-left: 4px solid var(--pdc-success); }
.pdc-license-card--inactive { border-left: 4px solid var(--pdc-border); }
.pdc-license-card__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.pdc-license-card__product { font-weight: 700; font-size: 1rem; }
.pdc-license-card__key { margin-bottom: .75rem; }
.pdc-license-key-display {
	font-family: Consolas, 'Courier New', monospace;
	font-size: .875rem;
	background: var(--pdc-secondary);
	border: 1px solid var(--pdc-border);
	padding: .25rem .6rem;
	border-radius: 3px;
	letter-spacing: .05em;
	word-break: break-all;
}
.pdc-license-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.5rem; }
.pdc-license-meta-row { display: contents; }
.pdc-license-meta-row dt { font-size: .8125rem; color: var(--pdc-muted); padding: .15rem 0; }
.pdc-license-meta-row dd { font-size: .9375rem; margin: 0; padding: .15rem 0; }
.pdc-license-expired { color: var(--pdc-error); }
.pdc-license-expired-badge { font-size: .75rem; color: var(--pdc-error); font-weight: 600; }

/* Account form */
.pdc-account-form { max-width: 520px; }
.pdc-input {
	width: 100%;
	padding: .5rem .75rem;
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	font-size: .9375rem;
	box-sizing: border-box;
}
.pdc-input:focus {
	border-color: var(--pdc-primary);
	outline: none;
	box-shadow: 0 0 0 2px var(--pdc-focus-ring);
}
.pdc-input:disabled { background: var(--pdc-secondary); color: var(--pdc-muted); cursor: not-allowed; }
.pdc-account-section { margin-top: 1.75rem; }

/* Responsive */
@media ( max-width: 640px ) {
	.pdc-account-cards { grid-template-columns: 1fr 1fr; }
	.pdc-account-nav__link { padding: .5rem .6rem; font-size: .875rem; }
	.pdc-license-card__meta { grid-template-columns: 1fr; }
}
@media ( max-width: 420px ) {
	.pdc-account-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Subscription Portal
   ═══════════════════════════════════════════════════════════════════════ */

.pdc-subscription-list { display: flex; flex-direction: column; gap: 1rem; }
.pdc-subscription-card {
	background: var(--pdc-bg);
	border: 1px solid var(--pdc-border);
	border-left: 4px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	padding: 1.25rem;
}
.pdc-subscription-card:has(.pdc-status-complete) { border-left-color: var(--pdc-success); }
.pdc-subscription-card:has(.pdc-status-cancelled),
.pdc-subscription-card:has(.pdc-status-failed)   { border-left-color: var(--pdc-border); opacity: .8; }
.pdc-subscription-card:has(.pdc-status-pending)  { border-left-color: var(--pdc-warning); }
.pdc-subscription-card__header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.pdc-subscription-card__product { font-weight: 700; font-size: 1rem; }
.pdc-subscription-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.5rem; }
.pdc-subscription-meta-row { display: contents; }
.pdc-subscription-meta-row dt { font-size: .8125rem; color: var(--pdc-muted); }
.pdc-subscription-meta-row dd { font-size: .9375rem; margin: 0; }
.pdc-subscription-card__notice { margin-top: .75rem; }
.pdc-license-key-display--small { font-size: .8rem; padding: .15rem .4rem; }

@media ( max-width: 480px ) {
	.pdc-subscription-card__meta { grid-template-columns: 1fr; }
}

/* ── Update access indicator ────────────────────────────────────────────── */
.pdc-update-access { font-size: .8125rem; font-weight: 600; }
.pdc-update-access--yes { color: var(--pdc-success); }
.pdc-update-access--no  { color: var(--pdc-muted); }

/* ── Customer Renewal UX ───────────────────────────────────────────────── */
.pdc-subscription-card--expiring { border-left-color: var(--pdc-warning) !important; }
.pdc-subscription-card--warning  { border-left-color: var(--pdc-error) !important; }
.pdc-subscription-card__message { font-size: .875rem; color: var(--pdc-muted); margin: .4rem 0 .75rem; }
.pdc-subscription-card__message--warn { color: var(--pdc-warning); font-weight: 600; }
.pdc-subscription-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .85rem;
	padding-top: .85rem;
	border-top: 1px solid var(--pdc-border);
}

/* Subscription detail */
.pdc-account-sub-detail { max-width: 760px; }
.pdc-sub-detail-header { display: flex; align-items: center; gap: .85rem; margin: .75rem 0 .5rem; flex-wrap: wrap; }
.pdc-sub-detail-message { font-size: .9375rem; color: var(--pdc-muted); margin-bottom: 1.25rem; }
.pdc-sub-detail-message--warn { color: var(--pdc-warning); font-weight: 600; }
.pdc-sub-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.pdc-sub-detail-section {
	background: var(--pdc-secondary);
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	padding: 1.1rem 1.25rem;
}
.pdc-sub-detail-section-title {
	font-weight: 700;
	margin: 0 0 .75rem;
	color: var(--pdc-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .75rem;
}
.pdc-sub-detail-dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; }
.pdc-sub-detail-dl dt { font-size: .8125rem; color: var(--pdc-muted); align-self: center; }
.pdc-sub-detail-dl dd { font-size: .9375rem; margin: 0; align-self: center; }
.pdc-sub-detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	padding: 1rem 0;
	border-top: 1px solid var(--pdc-border);
	border-bottom: 1px solid var(--pdc-border);
	margin-bottom: 1.5rem;
}
.pdc-text-link { color: var(--pdc-primary); text-decoration: none; font-size: .875rem; }
.pdc-text-link:hover { text-decoration: underline; }

@media ( max-width: 600px ) {
	.pdc-sub-detail-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Coupons
   ═══════════════════════════════════════════════════════════════════════ */

.pdc-coupon-wrap { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pdc-border); }
.pdc-coupon-row { display: flex; gap: .4rem; align-items: center; }
.pdc-coupon-input {
	flex: 1;
	padding: .45rem .7rem;
	border: 1px solid var(--pdc-border);
	border-radius: var(--pdc-radius);
	font-size: .9375rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pdc-coupon-input:focus { border-color: var(--pdc-primary); outline: none; }

/* Applied coupon badge — uses success color from theme */
.pdc-coupon-applied {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: var(--pdc-success-bg);
	border: 1px solid var(--pdc-success-border);
	border-radius: var(--pdc-radius);
	padding: .45rem .75rem;
	font-size: .875rem;
}
.pdc-coupon-applied__code {
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--pdc-success-text);
}
.pdc-coupon-applied__remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--pdc-muted);
	font-size: 1rem;
	line-height: 1;
	padding: 0 .2rem;
}
.pdc-coupon-applied__remove:hover { color: var(--pdc-error); }