/*
 * My Account — sidebar shell, dashboard stats, orders, addresses, auth panels,
 * plus the CSS-only restyle of the plugin-owned endpoints (points, printers,
 * back-in-stock, edit-address, WooCommerce notices).
 * Base rules below are copied verbatim from design/_regions/shop-pages.mock.css
 * ("pages/my-account.css" block) — tokens only, mobile-first.
 */

/* wc-customer-account.php's order-again jQuery (action_after_account_orders_js) appends an
   unsized legacy Bricks <img> ("order-again.svg") into a.order-again — our button already carries
   its own SVG icon, so hide the injected one outright rather than sizing it (kept: the script itself,
   hooks_kept). */
.pm-order__actions a.order-again img,
.pm-order__actions .pm-button img { display: none; }

/* WooCommerce's woocommerce-layout.css floats `.woocommerce-MyAccount-navigation` (30%) and
   `.woocommerce-MyAccount-content` (68%) — our nav carries the first class for wc_get_account_menu_items()
   compatibility, which collapsed the 264px sidebar track down to ~30% of the grid cell. Let the grid own
   the columns. */
.woocommerce .pm-account .woocommerce-MyAccount-navigation,
.woocommerce .pm-account .woocommerce-MyAccount-content { float: none; width: auto; }
.pm-account__nav ul { width: 100%; }

.pm-account { display: grid; gap: var( --space-24 ); align-items: start; }
.pm-account__side { display: grid; gap: var( --space-14 ); }
.pm-account__user { display: flex; align-items: center; gap: var( --space-12 ); padding: var( --space-16 ) var( --space-20 ); background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); }
.pm-account__name { font-weight: var( --fw-bold ); font-size: var( --text-base ); line-height: var( --lh-snug ); }
.pm-account__email { font-size: var( --text-xs ); color: var( --color-text-meta ); overflow-wrap: anywhere; }
.pm-account__nav { padding: var( --space-8 ); background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); }
.pm-account__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var( --space-2 ); }
.pm-account__link { display: flex; align-items: center; gap: var( --space-12 ); min-height: var( --space-44 ); padding: var( --space-8 ) var( --space-12 ); border-radius: var( --radius-control ); font-size: var( --text-sm-5 ); font-weight: var( --fw-semibold ); color: var( --color-text-soft ); text-decoration: none; transition: var( --transition-color ); }
.pm-account__link:hover, .pm-account__link:focus-visible { background: var( --surface-sunken ); color: var( --color-text ); }
.pm-account__link svg { flex: 0 0 auto; width: var( --space-18 ); height: var( --space-18 ); }
.pm-account__link--active { background: var( --color-primary-tint ); color: var( --color-primary ); font-weight: var( --fw-bold ); }
.pm-account__link--logout { margin-top: var( --space-6 ); border-top: var( --border-width ) solid var( --color-border ); border-radius: 0 0 var( --radius-control ) var( --radius-control ); color: var( --color-text-meta ); }
.pm-account__main { display: grid; gap: var( --space-20 ); min-width: 0; }
@media ( min-width: 1024px ) {
	.pm-account { grid-template-columns: var( --width-sidebar ) minmax( 0, 1fr ); gap: var( --space-28 ); }
	.pm-account__side { position: sticky; top: var( --sticky-top-sidebar ); }
}

.pm-account__stats { display: grid; gap: var( --gap-grid ); }
.pm-stat { display: flex; align-items: center; gap: var( --space-14 ); padding: var( --space-18 ); background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); text-decoration: none; color: inherit; }
.pm-stat__icon { flex: 0 0 auto; width: var( --icon-tile-size ); height: var( --icon-tile-size ); border-radius: var( --radius-control ); background: var( --surface-sunken ); display: grid; place-items: center; color: var( --color-secondary-strong ); }
.pm-stat__icon--magenta { color: var( --color-primary ); }
.pm-stat__icon--gold { color: var( --color-accent-strong ); }
.pm-stat__figure { font-size: var( --text-6xl ); font-weight: var( --fw-black ); line-height: var( --lh-none ); letter-spacing: var( --ls-tight ); }
.pm-stat__label { font-size: var( --text-sm ); color: var( --color-text-muted ); margin-top: var( --space-4 ); }
@media ( min-width: 480px ) { .pm-account__stats { grid-template-columns: repeat( 3, 1fr ); } }

.pm-order-list { display: grid; gap: var( --space-12 ); }
.pm-order { display: grid; grid-template-columns: 1fr auto; gap: var( --space-10 ) var( --space-16 ); align-items: center; padding: var( --space-16 ); background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); }
.pm-order__number { font-weight: var( --fw-black ); font-size: var( --text-base ); }
.pm-order__date { font-size: var( --text-xs ); color: var( --color-text-meta ); }
.pm-order__items { font-size: var( --text-xs ); color: var( --color-text-meta ); }
.pm-order__total { font-size: var( --text-2xl ); font-weight: var( --fw-black ); letter-spacing: var( --ls-tight ); }
.pm-order__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var( --space-8 ); }
@media ( min-width: 768px ) {
	.pm-order-list { grid-template-columns: minmax( 0, 1fr ) auto auto auto auto; column-gap: var( --space-16 ); }
	.pm-order { grid-column: 1 / -1; grid-template-columns: subgrid; }
	.pm-order__total { text-align: right; }
	.pm-order__actions { grid-column: auto; justify-content: flex-end; }
}



.pm-newsletter-card { display: grid; gap: var( --space-14 ); }
.pm-newsletter-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var( --space-12 ); }

.pm-auth { display: grid; gap: var( --gap-card ); align-items: start; }
.pm-auth__form { display: grid; gap: var( --space-14 ); }
.pm-auth__lost { font-size: var( --text-sm ); font-weight: var( --fw-semibold ); color: var( --color-secondary ); text-decoration: none; }
.pm-auth__lost:hover { color: var( --color-primary ); }
.pm-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var( --space-12 ); }
.pm-auth__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: var( --space-8 ); font-size: var( --text-sm ); color: var( --color-text-soft ); }
.pm-auth__perk { display: flex; gap: var( --space-8 ); align-items: flex-start; }
.pm-auth__perk svg { flex: 0 0 auto; color: var( --color-success ); margin-top: var( --space-3 ); }
.pm-auth__legal { font-size: var( --text-xs ); color: var( --color-text-meta ); line-height: var( --lh-relaxed ); }
.pm-auth__legal a { color: inherit; }
.pm-auth { max-width: 560px; margin-inline: auto; }
/* Logged-out page: breadcrumb strip instead of the "Môj účet" heading, offset like the
   category strip (pages/category.css). `<main>` is already `.pm-container`, so the strip
   drops its own container padding, and `<main>` drops its section padding (the footer
   margin alone spaces the card from the footer). */
.pm-account-page:has( .pm-auth ) { padding-block: 0; }
.pm-account-page .pm-cat__crumbs { max-width: none; margin-inline: 0; padding-inline: 0; padding-block: var( --space-14 ) var( --space-4 ); display: flex; flex-wrap: wrap; align-items: center; gap: var( --space-8 ); margin-bottom: var( --space-24 ); font-size: var( --text-xs ); color: var( --color-text-muted ); }
.pm-account-page .pm-cat__crumb a { color: inherit; text-decoration: none; transition: var( --transition-color ); }
.pm-account-page .pm-cat__crumb a:hover,
.pm-account-page .pm-cat__crumb a:focus-visible { color: var( --color-primary ); }
.pm-account-page .pm-cat__crumb:last-child { font-weight: var( --fw-semibold ); color: var( --color-text ); }
.pm-account-page .pm-cat__crumb-sep { opacity: .45; }
@media ( min-width: 1024px ) { .pm-account-page .pm-cat__crumbs { padding-block: var( --space-18 ) var( --space-4 ); } }
.pm-auth__card[hidden] { display: none; }
/* WooCommerce `.woocommerce form .form-row` (padding 3px, margin-bottom 6px) and the legacy
   label margin stack on top of the grid gaps; the grid gaps are the only spacing. */
.woocommerce .pm-auth .pm-auth__form .form-row { margin: 0; padding: 0; }
.woocommerce .pm-auth .pm-auth__form .form-row .pm-field__label { margin: 0; line-height: var( --lh-tight ); }
.woocommerce .pm-auth .pm-auth__form .form-row label { margin: 0; }
/* WC's clearfix `::before` / `::after` become empty grid / flex items with their own gaps. */
.woocommerce .pm-auth .pm-auth__form::before,
.woocommerce .pm-auth .pm-auth__form::after,
.woocommerce .pm-auth .pm-auth__form .form-row::before,
.woocommerce .pm-auth .pm-auth__form .form-row::after { display: none; }
.woocommerce .pm-auth .pm-auth__form .pm-check { width: auto; min-height: 0; }
.woocommerce .pm-auth .pm-auth__form .pm-button { margin: 0; }
/* Turnstile (register form) injects a `<br>` and an inline-margined widget — each a grid
   item of `.pm-auth__form`, so they open an empty gap above the privacy text. */
.pm-auth__form .cf-turnstile-br,
.pm-auth__form .cf-turnstile:not( :has( iframe ) ) { display: none; }
.pm-auth__form .cf-turnstile { margin: 0 !important; }
/* Legacy scorg snippet #252 adds `margin-top: … !important` to both. */
.woocommerce .pm-auth .woocommerce-form-register .woocommerce-privacy-policy-text,
.woocommerce .pm-auth .woocommerce-form-register .woocommerce-form-register__submit { margin-top: 0 !important; }
.pm-auth__form .woocommerce-privacy-policy-text p { margin: 0; }
.pm-auth__switch { margin: var( --space-20 ) 0 0; padding-top: var( --space-18 ); border-top: var( --border-width ) solid var( --color-border ); font-size: var( --text-sm ); color: var( --color-text-soft ); }
.pm-auth__switch a { font-weight: var( --fw-semibold ); color: var( --color-secondary ); }
.pm-auth__switch a:hover { color: var( --color-primary ); }

.pm-points-hero { display: grid; gap: var( --space-14 ); padding: var( --space-24 ); border-radius: var( --radius-3xl ); background: var( --gradient-newsletter ); color: var( --color-text-invert ); }
.pm-points-hero__figure { font-size: var( --text-10xl ); font-weight: var( --fw-black ); line-height: var( --lh-none ); letter-spacing: var( --ls-display-xl ); }
.pm-points-hero__label { font-size: var( --text-sm ); opacity: .85; }
.pm-points-hero__meta { display: flex; flex-wrap: wrap; gap: var( --space-24 ); font-size: var( --text-sm ); }
.pm-points-hero__meta strong { display: block; font-size: var( --text-2xl ); }

.pm-table-wrap { overflow-x: auto; max-width: 100%; }
.pm-table { width: 100%; border-collapse: collapse; font-size: var( --text-sm ); }
.pm-table th { text-align: left; font-size: var( --text-xs ); font-weight: var( --fw-black ); letter-spacing: var( --ls-wide-6 ); text-transform: uppercase; color: var( --color-text-meta ); padding: var( --space-10 ) var( --space-12 ); border-bottom: var( --border-width ) solid var( --color-border ); }
.pm-table td { padding: var( --space-12 ); border-bottom: var( --border-width ) solid var( --color-border ); color: var( --color-text-soft ); }
.pm-table td:last-child, .pm-table th:last-child { text-align: right; }
.pm-table__plus { color: var( --color-success-strong ); font-weight: var( --fw-black ); }

/* --------------------------------------------------------------------------
   Plugin-owned endpoints — CSS-only restyle, markup stays the plugin's own.
   -------------------------------------------------------------------------- */

/* "Moje tlačiarne" (includes/modules/tchm-customer-printers/views/my-printers.php). `.pm-panel`
   comes from components/form.css; `.pm-cart-empty` is page-local because pages/cart.css isn't
   enqueued on account pages. */
.pm-printers { display: grid; gap: var( --space-20 ); }
.pm-printers .pm-page-head { margin-bottom: 0; }
.pm-account .pm-cart-empty { display: grid; justify-items: center; text-align: center; gap: var( --space-14 ); padding: var( --space-40 ) var( --space-24 ); }
.pm-account .pm-cart-empty__mascot { width: var( --space-200 ); max-width: 100%; filter: drop-shadow( var( --drop-shadow-stage ) ); }
.pm-account .pm-cart-empty__title { font-size: var( --text-display-newsletter ); }
.pm-account .pm-cart-empty__text { max-width: var( --width-prose-sm ); color: var( --color-text-muted ); font-size: var( --text-sm-5 ); }
.pm-printers__grid { display: grid; gap: var( --gap-grid ); }
@media ( min-width: 600px ) { .pm-printers__grid { grid-template-columns: repeat( auto-fill, minmax( var( --width-alt-card ), 1fr ) ); } }
.pm-printers__empty { display: none; font-size: var( --text-sm ); color: var( --color-text-meta ); }
.pm-printers__grid:not( .has-items ) .pm-printers__empty { display: block; grid-column: 1 / -1; }
.pm-printer { position: relative; display: grid; grid-template-columns: var( --space-72 ) minmax( 0, 1fr ); gap: var( --space-14 ); align-items: center; padding: var( --space-14 ) var( --space-44 ) var( --space-14 ) var( --space-14 ); background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); transition: border-color var( --duration-base ) ease, box-shadow var( --duration-base ) ease, opacity var( --duration-base ) ease; }
.pm-printer:hover { border-color: var( --color-border-strong ); box-shadow: var( --shadow-1 ); }
.pm-printer.deleting { opacity: .45; pointer-events: none; }
.pm-printer__thumb { width: var( --space-72 ); height: var( --space-72 ); border-radius: var( --radius-md ); background: var( --surface-sunken ); display: grid; place-items: center; overflow: hidden; color: var( --color-text-meta ); }
.pm-printer__thumb img { max-width: 86%; max-height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.pm-printer__body { display: grid; gap: var( --space-6 ); justify-items: start; min-width: 0; }
.pm-printer__name { font-size: var( --text-sm-5 ); font-weight: var( --fw-bold ); line-height: var( --lh-snug ); color: var( --color-text ); text-decoration: none; transition: var( --transition-color ); }
.pm-printer__name:hover, .pm-printer__name:focus-visible { color: var( --color-primary ); }
.pm-printer__link { display: inline-flex; align-items: center; gap: var( --space-6 ); font-size: var( --text-xs-5 ); font-weight: var( --fw-bold ); color: var( --color-secondary ); text-decoration: none; transition: var( --transition-color ); }
.pm-printer__link:hover, .pm-printer__link:focus-visible { color: var( --color-primary ); }
.pm-printer__remove { position: absolute; top: var( --space-4 ); right: var( --space-4 ); width: var( --space-40 ); height: var( --space-40 ); display: grid; place-items: center; padding: 0; border: 0; border-radius: var( --radius-circle ); background: transparent; color: var( --color-text-meta ); cursor: pointer; transition: var( --transition-color ); }
.pm-printer__remove:hover, .pm-printer__remove:focus-visible { background: var( --color-primary-tint ); color: var( --color-primary ); }

/* Vernostné body (woocommerce/myaccount/my-points-view.php) — history rows. */
.pm-table__minus { color: var( --color-primary ); font-weight: var( --fw-black ); }
.pm-table__link { font-weight: var( --fw-bold ); color: var( --color-secondary ); text-decoration: none; }
.pm-table__link:hover, .pm-table__link:focus-visible { color: var( --color-primary ); }
/* Phones: each history row as a two-line item — reason + points, then date · order — so the
   points column never hides behind the table's horizontal scroll. */
@media ( max-width: 599px ) {
	.pm-points-history thead { display: none; }
	.pm-points-history tr { display: grid; grid-template-columns: auto minmax( 0, 1fr ) auto; grid-template-areas: "reason reason points" "date order order"; column-gap: var( --space-10 ); row-gap: var( --space-2 ); padding: var( --space-12 ) 0; border-bottom: var( --border-width ) solid var( --color-border ); }
	.pm-points-history td { padding: 0; border: 0; }
	.pm-points-history td:nth-child( 1 ) { grid-area: date; font-size: var( --text-xs ); color: var( --color-text-meta ); }
	.pm-points-history td:nth-child( 2 ) { grid-area: reason; font-weight: var( --fw-semibold ); color: var( --color-text ); }
	.pm-points-history td:nth-child( 3 ) { grid-area: order; font-size: var( --text-xs ); text-align: left; }
	.pm-points-history td:nth-child( 4 ) { grid-area: points; }
}

/* Order detail total — WC prints the VAT note as an inline `<small class="includes_tax">`;
   the mockup puts it under the price as `.pm-kv__vat`. */
.pm-kv__row--total .includes_tax { display: block; font-size: var( --text-xs ); font-weight: var( --fw-regular ); letter-spacing: normal; color: var( --color-text-meta ); }

/* Back-in-stock notifications (includes plugin, `backinstock` endpoint) — wide tables scroll. */
.pm-account .woocommerce-notifications-activity-table,
.pm-account table.woocommerce-orders-table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var( --text-sm ); }
.pm-account table.woocommerce-orders-table th { text-align: left; font-size: var( --text-xs ); font-weight: var( --fw-black ); letter-spacing: var( --ls-wide-6 ); text-transform: uppercase; color: var( --color-text-meta ); padding: var( --space-10 ) var( --space-12 ); border-bottom: var( --border-width ) solid var( --color-border ); white-space: nowrap; }
.pm-account table.woocommerce-orders-table td { padding: var( --space-12 ); border-bottom: var( --border-width ) solid var( --color-border ); color: var( --color-text-soft ); white-space: nowrap; }

/* Plugin edit-address form (wooptima-checkout/src — `.wooptima-checkout-field`) — field look. */
.pm-account .wooptima-checkout-field { display: grid; gap: var( --space-6 ); min-width: 0; margin-bottom: var( --space-14 ); }
.pm-account .wooptima-checkout-field label { font-size: var( --text-sm ); font-weight: var( --fw-semibold ); color: var( --color-text ); }
.pm-account .wooptima-checkout-field .field-required { color: var( --color-primary ); margin-left: var( --space-2 ); }
.pm-account .wooptima-checkout-field input,
.pm-account .wooptima-checkout-field select,
.pm-account .wooptima-checkout-field textarea { width: 100%; min-height: var( --control-height ); padding: 0 var( --space-14 ); border: var( --border-width-strong ) solid var( --color-border ); border-radius: var( --radius-control ); background: var( --surface ); font: inherit; font-size: var( --text-sm-5 ); color: var( --color-text ); transition: var( --transition-color ); }
.pm-account .wooptima-checkout-field input:focus-visible,
.pm-account .wooptima-checkout-field select:focus-visible { outline: none; border-color: var( --color-secondary ); }
.pm-account .woocommerce-address-fields__field-wrapper { display: grid; gap: 0; }
@media ( min-width: 768px ) { .pm-account .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr 1fr; gap: 0 var( --space-14 ); } }
.pm-account .wa-myaccount-purchase-for-company { grid-column: 1 / -1; }
.pm-account .wa-myaccount-purchase-for-company__toggle label { display: flex; align-items: center; gap: var( --space-10 ); min-height: var( --space-44 ); padding: var( --space-10 ) var( --space-16 ); background: var( --surface-chip ); border-radius: var( --radius-control ); font-weight: var( --fw-semibold ); color: var( --color-text ); cursor: pointer; margin-bottom: var( --space-14 ); }
.pm-account .wa-myaccount-purchase-for-company__fields-wrapper { display: grid; gap: 0; }
@media ( min-width: 768px ) { .pm-account .wa-myaccount-purchase-for-company__fields-wrapper { grid-template-columns: 1fr 1fr; gap: 0 var( --space-14 ); } }
.pm-account .section-toggle__wrapper label { display: flex; align-items: center; gap: var( --space-10 ); min-height: var( --space-44 ); font-size: var( --text-sm ); color: var( --color-text-soft ); }

/* Plugin edit-address save button (form-edit-address.php, plain `.button`, no `.pm-button` class
   to add from theme code) — reassert the CTA look; scoped to `button[name="save_address"]` only,
   so it doesn't also catch the ecomail dashboard button (also `.button` inside a `.pm-account` form). */
.woocommerce .pm-account form button[name="save_address"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-9 );
	min-height: 44px;
	padding: var( --space-14 ) var( --space-26 );
	border: 0;
	border-radius: var( --radius-control );
	background-image: var( --gradient-cta );
	background-repeat: var( --gradient-cta-repeat );
	background-size: var( --gradient-cta-size );
	background-position: var( --gradient-cta-position );
	box-shadow: var( --shadow-inset-cta );
	font-size: var( --text-base );
	font-weight: var( --fw-bold );
	letter-spacing: normal;
	text-transform: none;
	color: var( --color-text-invert );
	cursor: pointer;
	transition: background-position var( --duration-wipe ) var( --ease-cta ), transform var( --duration-base ) ease;
}
.woocommerce .pm-account form button[name="save_address"]:hover,
.woocommerce .pm-account form button[name="save_address"]:focus-visible {
	background-position: var( --gradient-cta-position-hover );
	box-shadow: var( --shadow-2 );
	filter: saturate( 1.25 ) brightness( 1.1 );
	transform: translateY( var( --lift-cta ) );
}

/* WooCommerce notices — simple bordered rows in success/primary/secondary tints. */
.pm-account .woocommerce-message,
.pm-account .woocommerce-error,
.pm-account .woocommerce-info,
.pm-account .woocommerce-notice { list-style: none; margin: 0 0 var( --space-16 ); padding: var( --space-12 ) var( --space-16 ); border-radius: var( --radius-control ); border: var( --border-width ) solid; font-size: var( --text-sm ); }
.pm-account .woocommerce-message { background: var( --color-success-tint ); border-color: var( --color-success ); color: var( --color-success-strong ); }
.pm-account .woocommerce-error { background: var( --color-primary-tint-soft ); border-color: var( --color-primary ); color: var( --color-primary ); }
.pm-account .woocommerce-info { background: var( --color-secondary-tint ); border-color: var( --color-secondary ); color: var( --color-secondary-strong ); }
.pm-account .woocommerce-message a,
.pm-account .woocommerce-error a,
.pm-account .woocommerce-info a { color: inherit; font-weight: var( --fw-bold ); }

/* Ecomail dashboard subscription block (plugins/ecomail) — dressed as the `.pm-newsletter-card` row.
   The plugin re-prints its own <style> tag on every render (bug — cannot be removed from theme code);
   this selector's specificity wins over it without !important. */
.pm-account .ecomail-subscribtion-info { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var( --space-12 ); }
.pm-account .ecomail-subscribtion-info__text { flex: 1 1 auto; min-width: 0; }
.pm-account .ecomail-subscribtion-info__text h3 { display: none; }
.pm-account .ecomail-subscribtion-info__text p { font-size: var( --text-sm ); color: var( --color-text-muted ); margin: 0 0 var( --space-8 ); }
.pm-account .ecomail-subscribtion-info__badge { display: inline-flex; align-items: center; gap: var( --space-6 ); padding: var( --space-4 ) var( --space-10 ); border-radius: var( --radius-pill ); font-size: var( --text-xs ); font-weight: var( --fw-bold ); background: var( --surface-chip ); color: var( --color-text-soft ); }
.pm-account .ecomail-subscribtion-info__badge.ecomail-subscribed { background: var( --color-success-tint ); color: var( --color-success-strong ); }
.pm-account .ecomail-subscribtion-info__badge.ecomail-unsubscribed { background: var( --surface-chip ); color: var( --color-text-soft ); }
.pm-account .ecomail-subscribtion-info__form { margin: 0; flex-shrink: 0; }
.pm-account .ecomail-subscribtion-info__form .button { display: inline-flex; align-items: center; justify-content: center; gap: var( --space-9 ); min-height: var( --space-40 ); padding: var( --space-10 ) var( --space-16 ); border: 0; border-radius: var( --radius-control ); background: var( --surface-dark ); color: var( --color-text-invert ); font-size: var( --text-sm ); font-weight: var( --fw-bold ); cursor: pointer; transition: var( --transition-color ); }
.pm-account .ecomail-subscribtion-info__form .button:hover,
.pm-account .ecomail-subscribtion-info__form .button:focus-visible { background: var( --color-primary ); }

/* --------------------------------------------------------------------------
   Legacy override fix — uploads/scorg/css/165-header-compiled.css carries
   `.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce
   button.button, .woocommerce input.button { background: var(--dark-gradient);
   text-transform: uppercase; … }` at specificity 0,2,1, which out-specifies a
   bare `.pm-button--cta` (0,1,0) on any button that also carries WC's own
   `button`/`woocommerce-Button` class (save_account_details, login, register,
   lost/reset password submits). Same pattern as the CF7 override documented in
   DESIGN-SYSTEM.md §8 — reassert the design's button at 0,3,0 specificity.
   -------------------------------------------------------------------------- */
.woocommerce .pm-account .pm-button,
.woocommerce .pm-auth .pm-button {
	background-image: none;
	background-color: transparent;
	background-position: 0 0;
	background-size: auto;
	border-radius: var( --radius-control );
	font-size: var( --text-base );
	font-weight: var( --fw-bold );
	letter-spacing: normal;
	text-transform: none;
	padding: var( --space-14 ) var( --space-26 );
	color: var( --color-text );
}
.woocommerce .pm-account .pm-button--sm,
.woocommerce .pm-auth .pm-button--sm { padding: var( --space-10 ) var( --space-16 ); font-size: var( --text-sm ); }
.woocommerce .pm-account .pm-button--cta,
.woocommerce .pm-auth .pm-button--cta {
	background-image: var( --gradient-cta );
	background-repeat: var( --gradient-cta-repeat );
	background-size: var( --gradient-cta-size );
	background-position: var( --gradient-cta-position );
	box-shadow: var( --shadow-inset-cta );
	color: var( --color-text-invert );
	transition: background-position var( --duration-wipe ) var( --ease-cta ), transform var( --duration-base ) ease;
}
.woocommerce .pm-account .pm-button--cta:hover, .woocommerce .pm-account .pm-button--cta:focus-visible,
.woocommerce .pm-auth .pm-button--cta:hover, .woocommerce .pm-auth .pm-button--cta:focus-visible {
	/* WooCommerce's `button.button:hover` resets to `background-image: none` + grey fill. */
	background-image: var( --gradient-cta );
	background-color: transparent;
	color: var( --color-text-invert );
	background-position: var( --gradient-cta-position-hover );
	box-shadow: var( --shadow-2 );
	filter: saturate( 1.25 ) brightness( 1.1 );
	transform: translateY( var( --lift-cta ) );
}
.woocommerce .pm-account .pm-button--dark,
.woocommerce .pm-auth .pm-button--dark { background: var( --surface-dark ); color: var( --color-text-invert ); }
.woocommerce .pm-account .pm-button--dark:hover, .woocommerce .pm-account .pm-button--dark:focus-visible,
.woocommerce .pm-auth .pm-button--dark:hover, .woocommerce .pm-auth .pm-button--dark:focus-visible { background: var( --color-primary ); }
.woocommerce .pm-account .pm-button--ghost,
.woocommerce .pm-auth .pm-button--ghost {
	background: var( --surface );
	border: var( --border-width-strong ) solid var( --color-border );
	color: var( --color-text );
}
.woocommerce .pm-account .pm-button--ghost:hover, .woocommerce .pm-account .pm-button--ghost:focus-visible,
.woocommerce .pm-auth .pm-button--ghost:hover, .woocommerce .pm-auth .pm-button--ghost:focus-visible { border-color: var( --color-border-strong ); }
.woocommerce .pm-account .pm-button--full,
.woocommerce .pm-auth .pm-button--full { width: 100%; }
/* WooCommerce/legacy rules turn the register submit into `inline-block`, which drops the arrow icon onto its own line. */
.woocommerce .pm-auth form .pm-button.button { display: inline-flex; }

/* --------------------------------------------------------------------------
   Login / register (form-login.php) — WooCommerce's own woocommerce.css adds a
   bordered, padded box to `form.login` / `form.register` (both classes are on our
   <form> for compatibility), duplicating the `.pm-auth__card` panel it already sits
   inside. Strip it, and defensively re-hide the native checkbox and reassert the
   button recipe under the `.woocommerce-page` body class too, in case a template in
   the chain renders under that class instead of (or as well as) `.woocommerce`.
   -------------------------------------------------------------------------- */
.woocommerce .pm-auth__card form.login,
.woocommerce .pm-auth__card form.register,
.woocommerce-page .pm-auth__card form.login,
.woocommerce-page .pm-auth__card form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}
.woocommerce-page .pm-account .pm-button,
.woocommerce-page .pm-auth .pm-button,
.woocommerce-page .pm-panel .pm-button.button,
.woocommerce .pm-panel .pm-button.button {
	text-transform: none;
	letter-spacing: normal;
}
.woocommerce-page .pm-account .pm-button--cta,
.woocommerce-page .pm-auth .pm-button--cta {
	background-image: var( --gradient-cta );
	background-repeat: var( --gradient-cta-repeat );
	background-size: var( --gradient-cta-size );
	background-position: var( --gradient-cta-position );
	box-shadow: var( --shadow-inset-cta );
	color: var( --color-text-invert );
}
.woocommerce-page .pm-account .pm-button--dark,
.woocommerce-page .pm-auth .pm-button--dark { background: var( --surface-dark ); color: var( --color-text-invert ); }
.woocommerce .pm-auth .pm-check__input,
.woocommerce-page .pm-auth .pm-check__input,
.woocommerce .pm-account .pm-check__input,
.woocommerce-page .pm-account .pm-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; appearance: none; -webkit-appearance: none; }
/* WooCommerce sets `.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme
   { display: inline-block }` (0,3,0), which beats `.pm-check { display: flex }` and drops the
   label under the box; `.form-row label { line-height: 2 }` also inflates the row. */
.woocommerce .pm-auth .pm-check.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	line-height: var( --lh-normal );
}
.woocommerce .pm-auth .pm-check.woocommerce-form-login__rememberme .pm-check__box { margin-top: 0; }
/* uploads/scorg/css/165-header-compiled.css draws its own legacy checkbox indicator via
   `.woocommerce .woocommerce-form-login label input[type=checkbox] + span:before` (0,3,4) —
   our `<input class="pm-check__input">` + `<span class="pm-check__box">` pair matches that
   selector's shape exactly (WC's own `woocommerce-form__input-checkbox` class is kept on the
   input for markup compatibility), so a second, offset, undrawn box rendered behind ours. Kill
   it at (0,4,1), which beats (0,3,4) on the class tier regardless of type count. */
.woocommerce .pm-auth .pm-check__input + .pm-check__box::before,
.woocommerce .pm-account .pm-check__input + .pm-check__box::before {
	content: none;
	display: none;
}

/* WooCommerce `.woocommerce form .form-row-first/-last { width: 47% }` (0,2,1) shrinks the
   half-width fields inside their `.pm-form-grid` column — the grid already does the split. */
.pm-account .pm-form-grid > .form-row-first,
.pm-account .pm-form-grid > .form-row-last { width: 100%; float: none; }

/* --------------------------------------------------------------------------
   Edit-address (plugin markup, wooptima-checkout/includes/templates/woocommerce/
   myaccount/form-edit-address.php) — the form itself carries no `.pm-panel` class
   (theme adds none, markup is the plugin's), so it inherits no surface/border and
   the page background shows through as a false "sunken" look; the company toggle
   is a native checkbox with no `.pm-check--toggle` custom box; the submit is a
   plain `.button` needing the CTA recipe restated at real-world specificity.
   -------------------------------------------------------------------------- */
.pm-account .pm-account__main > form:not( .woocommerce-EditAccountForm ) {
	background: var( --surface );
	border: var( --border-width ) solid var( --color-border );
	border-radius: var( --radius-card );
	padding: var( --space-20 );
}
@media ( min-width: 768px ) {
	.pm-account .pm-account__main > form:not( .woocommerce-EditAccountForm ) { padding: var( --card-padding ); }
}
.pm-account .wa-myaccount-purchase-for-company__toggle input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: var( --space-20 );
	height: var( --space-20 );
	margin: 0 var( --space-10 ) 0 0;
	border: var( --border-width-box ) solid var( --color-control-border );
	border-radius: var( --radius-3xs );
	background: var( --surface );
	vertical-align: middle;
	cursor: pointer;
	transition: var( --transition-color );
}
.pm-account .wa-myaccount-purchase-for-company__toggle input[type="checkbox"]:checked {
	background: var( --color-primary );
	border-color: var( --color-primary );
}
.pm-account .wa-myaccount-purchase-for-company__toggle input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 6px;
	height: 11px;
	border: solid var( --color-text-invert );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}
.pm-account .wa-myaccount-purchase-for-company__toggle input[type="checkbox"]:focus-visible { border-color: var( --color-secondary ); outline: none; }

/* --------------------------------------------------------------------------
   Dashboard Ecomail card — the plugin prints its own "Email: …" line, which
   duplicates the address already shown by the panel lead (dashboard.php prints
   the user's e-mail as `.pm-panel__lead`); hide the plugin's copy and lay the
   badge + button out as the mockup's `.pm-newsletter-card__row`.
   -------------------------------------------------------------------------- */
.pm-account .ecomail-subscribtion-info__text p { display: none; }

/* --------------------------------------------------------------------------
   Order detail addresses — WooCommerce's woocommerce.css boxes the `<address>`
   (`.woocommerce .woocommerce-customer-details address`, border + padding) and
   prefixes phone / e-mail with icon-font glyphs; the mockup shows plain lines.
   -------------------------------------------------------------------------- */
.woocommerce .pm-address-grid.woocommerce-customer-details address { padding: 0; border: 0; border-radius: 0; }
.woocommerce .pm-address .woocommerce-customer-details--phone,
.woocommerce .pm-address .woocommerce-customer-details--email { padding-left: 0; }
.woocommerce .pm-address .woocommerce-customer-details--phone::before,
.woocommerce .pm-address .woocommerce-customer-details--email::before { content: none; }
.pm-order > .pm-status { justify-self: start; }

/* --------------------------------------------------------------------------
   "Zopakovať objednávku" modal (printmania_order_again_modal() + assets/js/order-again.js).
   Base `.pm-modal` rules mirror pages/single-product.css, which isn't enqueued here.
   -------------------------------------------------------------------------- */
.pm-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var( --space-24 ); background-color: var( --color-backdrop, var( --c-ink-900 ) ); }
.pm-modal[hidden] { display: none; }
.pm-modal__panel { width: 100%; max-width: var( --width-modal-sm ); max-height: 86vh; padding: var( --space-28 ); overflow: auto; border-radius: var( --radius-4xl ); background-color: var( --surface ); box-shadow: var( --shadow-modal, var( --shadow-9 ) ); }
.pm-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var( --space-16 ); margin-bottom: var( --space-10 ); }
.pm-modal__title { margin: 0; font-size: var( --text-3xl ); font-weight: var( --fw-black ); letter-spacing: var( --ls-tight ); }
.pm-modal__close { display: grid; flex-shrink: 0; place-items: center; width: var( --space-44 ); height: var( --space-44 ); padding: 0; border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-md ); background-color: var( --surface ); color: var( --color-text-muted ); cursor: pointer; transition: var( --transition-base ); }
.pm-modal__close:hover, .pm-modal__close:focus-visible { background-color: var( --surface-sunken ); color: var( --color-text ); }
.pm-modal__lead { margin: 0 0 var( --space-20 ); font-size: var( --text-sm ); line-height: var( --lh-body ); color: var( --color-text-muted ); }
.pm-modal-open { overflow: hidden; }
.pm-order-again__choices { display: grid; gap: var( --space-10 ); }
.pm-order-again__choice { display: flex; align-items: center; gap: var( --space-14 ); padding: var( --space-14 ) var( --space-16 ); border: var( --border-width-strong ) solid var( --color-border ); border-radius: var( --radius-control ); background: var( --surface ); color: var( --color-text ); text-decoration: none; transition: var( --transition-color ); }
.pm-order-again__choice:hover, .pm-order-again__choice:focus-visible { border-color: var( --color-primary ); background: var( --color-primary-tint-soft ); outline: none; }
.pm-order-again__icon { flex: 0 0 auto; width: var( --icon-tile-size ); height: var( --icon-tile-size ); border-radius: var( --radius-control ); background: var( --color-primary-tint ); color: var( --color-primary ); display: grid; place-items: center; }
.pm-order-again__icon--swap { background: var( --color-secondary-tint ); color: var( --color-secondary-strong ); }
.pm-order-again__name { display: block; font-size: var( --text-base ); font-weight: var( --fw-bold ); line-height: var( --lh-snug ); }
.pm-order-again__note { display: block; margin-top: var( --space-2 ); font-size: var( --text-xs-5 ); line-height: var( --lh-snug ); color: var( --color-text-muted ); }