/* REFINE — My Account and My library (spec library, D7 and D8).
 * No prototype draft: built from the checkout's and the confirmation's pieces (checkout.css)
 * and the tokens. Loaded with is_account_page(), after sections.css (.btn-pill).
 *
 * WooCommerce keeps printing its own markup; the checkout's language is mapped onto it, scoped
 * to `.page-account .acc` to outrank woocommerce-layout.css and woocommerce-blocktheme.css
 * without !important:
 * - `.acc-head`        → greeting and h1 (inc/account.php);
 * - navigation         → vertical list at 1440, a row that wraps at 390; text links with a line
 *                        that draws on hover and stays on the active item (design-fixes D3);
 * - `.co-field`        → `.form-row` (label + input) in every account form;
 * - cards              → `.acc-card` (library), `.acc-link` (dashboard);
 * - without a session   → the wp-admin login's design (`.page-account--access`): login and password forms;
 * - tables             → orders and order details, readable at 390 with WooCommerce's
 *                        responsive table (woocommerce-smallscreen.css).
 * Tokens: tokens.css. No hex colors here.
 */

/* ═════════════ Base de página ═════════════ */
.page-account { background: var(--bg-primary); }
.page-account .account-label { display: none; }

/* Width of the site's content (theme.json contentSize) and the same air above and below
   (spec design-fixes, DF-2 / D1 and DF-4 / D2). Same specificity as base.css's
   `.wp-site-blocks > main:not(:has([data-hero]))`, later, so the top padding here wins. */
.wp-site-blocks > main.acc {
  width: min(100% - 2 * var(--gutter), var(--wp--style--global--content-size, 1200px));
  margin-inline: auto;
  padding-block: calc(var(--header-top) + var(--header-h) + var(--space-2xl)) var(--space-2xl);
}
.acc > * { margin-block: 0; }

/* ═════════════ Botones (variantes de la pastilla, como en checkout.css) ═════════════ */
.btn-pill--ink { background: var(--refine-ink); color: var(--refine-cream); }
.btn-pill--ink:hover,
.btn-pill--ink:focus-visible { background: color-mix(in srgb, var(--refine-ink) 86%, var(--refine-offwhite)); }
.btn-pill--line {
  background: transparent;
  color: var(--refine-ink);
  box-shadow: inset 0 0 0 1px var(--refine-ink);
}
.btn-pill--line:hover,
.btn-pill--line:focus-visible { background: color-mix(in srgb, var(--refine-ink) 8%, transparent); }
.btn-pill--sm { min-height: 44px; padding: 0.68em 1.105em; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; }
/* My Account's pills, 15 % smaller and quieter (Fran, AJ-3 / AJ-4): list actions («Descargar»)
   go to a line pill; form submits and the empty-library CTA stay filled, only smaller. The hit
   area stays well above 24 px (WCAG 2.2, 2.5.8). */
.page-account .acc .btn-pill--sm { min-height: 36px; padding: 0.6em 0.95em; font-size: 10.5px; }
.page-account .acc .acc-file__button { background: transparent; color: var(--refine-ink); box-shadow: inset 0 0 0 1px var(--refine-ink); }
.page-account .acc .acc-file__button:hover,
.page-account .acc .acc-file__button:focus-visible { background: color-mix(in srgb, var(--refine-ink) 8%, transparent); color: var(--refine-ink); }

/* ═════════════ Estructura ═════════════ */
.page-account .acc .woocommerce { max-width: none; margin: 0; }
.page-account .acc .woocommerce::before,
.page-account .acc .woocommerce::after { content: none; }

/* With a session: heading on top, menu on the left, content on the right. */
.page-account .acc .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 1024px) {
  .page-account .acc .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: var(--space-xl);
    align-items: start;
  }
  .page-account .acc .acc-head { grid-column: 1 / -1; }
}
.page-account .acc .woocommerce-MyAccount-navigation,
.page-account .acc .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }

/* ═════════════ Encabezado ═════════════ */
.acc-head { display: grid; gap: 10px; }
.acc-head__hello { font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--summer-ink-soft); }
.acc-head__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(clamp(30px, 3vw, 48px) * var(--type-display));
  line-height: 1.05;
  letter-spacing: var(--track-title);
}
.acc-head__lead { color: var(--summer-ink-soft); }
/* Every tab with a session: the logo under the h1 (Fran, DF-3; every tab since 2026-10-12), from the same font-size rule as every logo. */
.acc-head__logo { font-size: clamp(14px, 1.1vw, 18px); }

/* ═════════════ Menú ═════════════ */
/* Below 1024px the items wrap onto as many rows as needed: all five items (Salir included) are
   visible without a horizontal scroll that clients may not notice (Fran, G8, 2026-10-06).
   No fills (Fran, DF-5): a 1 px line under the text draws from the left on hover and stays on
   the active item, which is also bold, so it does not depend on color alone (D3). */
.page-account .acc .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}
.page-account .acc .woocommerce-MyAccount-navigation li { flex: none; padding: 0; list-style: none; }
.page-account .acc .woocommerce-MyAccount-navigation li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.page-account .acc .woocommerce-MyAccount-navigation li a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.page-account .acc .woocommerce-MyAccount-navigation li a:hover { text-decoration: none; }
.page-account .acc .woocommerce-MyAccount-navigation li a:hover::after,
.page-account .acc .woocommerce-MyAccount-navigation li.is-active a::after { transform: scaleX(1); }
.page-account .acc .woocommerce-MyAccount-navigation li.is-active a { font-weight: 700; text-decoration: none; }
@media (max-width: 1023px) {
  /* Two rows on a phone: 36 px targets, so the rows do not drift apart (Fran, 2026-10-11). */
  .page-account .acc .woocommerce-MyAccount-navigation ul { gap: 0 20px; }
  .page-account .acc .woocommerce-MyAccount-navigation li a { min-height: 36px; }
  .page-account .acc .woocommerce-MyAccount-navigation li a::after { bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-account .acc .woocommerce-MyAccount-navigation li a::after { transition: none; }
}
@media (min-width: 1024px) {
  .page-account .acc .woocommerce-MyAccount-navigation ul { flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; overflow: visible; }
  .page-account .acc .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    align-self: stretch;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--summer-line);
  }
  .page-account .acc .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--summer-ink-soft); }
}

/* ═════════════ Foco ═════════════ */
.page-account .acc a:focus-visible,
.page-account .acc button:focus-visible,
.page-account .acc .woocommerce-MyAccount-navigation li a:focus-visible { outline: 2px solid var(--refine-ink); outline-offset: 3px; }

/* ═════════════ Contenido ═════════════ */
.page-account .acc .woocommerce-MyAccount-content { display: grid; gap: var(--space-md); font-size: var(--t-md); line-height: 1.55; }
.page-account .acc .woocommerce-MyAccount-content > * { margin: 0; }
.page-account .acc .woocommerce-MyAccount-content a:not(.btn-pill):not(.button):not(.acc-link) { text-decoration: underline; text-underline-offset: 3px; }
.page-account .acc .woocommerce-MyAccount-content h2,
.page-account .acc .woocommerce-MyAccount-content h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: var(--track-title); }

/* — Notices: WooCommerce's block notices as the site's cards (Fran, 2026-10-11): offwhite, the line
   border, ink text, no colored icon; an error keeps a red border. Their link («Reenviar», «Conocé
   Summer») is a line pill. WooCommerce focuses the notice from script: no ring on a container. — */
.page-account .acc .woocommerce-notices-wrapper:empty { display: none; }
.page-account .acc .wc-block-components-notice-banner {
  align-items: center;
  margin: 0 0 var(--space-sm);
  border: 1px solid var(--summer-line-strong);
  border-radius: 18px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
}
.page-account .acc .wc-block-components-notice-banner:focus { outline: none; }
.page-account .acc .wc-block-components-notice-banner > svg { display: none; }
.page-account .acc .wc-block-components-notice-banner.is-error { border-color: var(--co-error); }
/* Only a notice with a button lays out in a row: a plain message keeps its inline links in the text. */
.page-account .acc .wc-block-components-notice-banner__content:has(.wc-forward) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.page-account .acc .wc-block-components-notice-banner__content a:not(.wc-forward) { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.page-account .acc .wc-block-components-notice-banner .wc-forward {
  order: 2;
  float: none;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  /* WooCommerce's blocks CSS sets `padding: 0 !important` (and the color) on this link: only !important beats it. */
  padding: 0 15px !important;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--refine-ink);
  color: var(--refine-ink) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 1;
}
.page-account .acc .wc-block-components-notice-banner .wc-forward:hover { background: color-mix(in srgb, var(--refine-ink) 8%, transparent); }

/* ═════════════ Inicio: accesos ═════════════ */
.acc-links { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .acc-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.page-account .acc .acc-link {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--summer-line);
  border-radius: 24px;
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.page-account .acc .acc-link:hover { border-color: var(--refine-ink); }
.acc-link__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: var(--track-title); }
.acc-link__meta { font-size: 14px; color: var(--summer-ink-soft); }

/* ═════════════ Mi biblioteca ═════════════ */
.acc-library { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .acc-library { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.acc-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--summer-line);
  border-radius: 24px;
  background: var(--bg-card);
}
.acc-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: var(--track-display);
  word-spacing: var(--word-display);
  text-transform: uppercase;
}
.acc-card__meta { font-size: 13px; color: var(--summer-ink-soft); }
.acc-files { display: grid; margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.acc-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-block: 12px;
  border-top: 1px solid var(--summer-line);
}
.acc-file__name { flex: 1 1 12em; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }

.acc-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--summer-line);
  border-radius: 24px;
  background: var(--bg-card);
}
.acc-empty__text { font-family: var(--font-display); font-size: clamp(18px, 1.4vw, 22px); }

/* ═════════════ Formularios (`.co-field`) ═════════════ */
/* Inputs: 46 px pills, like the checkout (Fran, 2026-10-11). The height comes from the padding
   (12 + 20 + 12 + the border): Stripe's «Agregar tarjeta» form copies the padding of an account input
   and ignores min-height, as in the checkout. */
.page-account .acc form .form-row { display: grid; gap: 8px; float: none; width: 100%; margin: 0; padding: 0; }
/* WooCommerce's clearfix would add an empty grid row (and a gap) above and below every field. */
.page-account .acc form .form-row::before,
.page-account .acc form .form-row::after { content: none; }
.page-account .acc form .form-row > label,
.page-account .acc form fieldset > legend {
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-account .acc form .form-row > label .required { color: var(--summer-ink-soft); text-decoration: none; }
.page-account .acc form .input-text,
.page-account .acc form input[type="password"],
.page-account .acc form input[type="email"],
.page-account .acc form input[type="text"] {
  width: 100%;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid var(--summer-line-strong);
  border-radius: 999px;
  background: var(--bg-card);
  font: inherit;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.page-account .acc form .input-text:focus,
.page-account .acc form input:focus { outline: none; border-color: var(--refine-ink); box-shadow: 0 0 0 3px var(--summer-accent); }
.page-account .acc form .password-input { display: block; position: relative; }
.page-account .acc form .password-input .input-text { padding-right: 52px; }
/* WooCommerce already centres the eye (top 50% + transform): only the inset is ours. */
.page-account .acc form .show-password-input { right: 16px; }
.page-account .acc form .form-row em,
.page-account .acc form .woocommerce-privacy-policy-text p { font-size: 13px; font-style: normal; color: var(--summer-ink-soft); }
.page-account .acc form .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.page-account .acc form .woocommerce-form__input-checkbox { width: 18px; height: 18px; margin: 0; accent-color: var(--refine-ink); }
.page-account .acc form .clear { display: none; }

/* Buttons: WooCommerce's submit buttons («Guardar cambios», «Agregar tarjeta») as the site's ink
   pills: uppercase, the height of the 46 px fields, like «Ingresar» and «Confirmar mi compra»
   (Fran, 2026-10-14). */
.page-account .acc .woocommerce button.button,
.page-account .acc .woocommerce .woocommerce-Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--refine-ink);
  color: var(--refine-cream);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--t-btn);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.page-account .acc .woocommerce button.button:hover,
.page-account .acc .woocommerce button.button:focus-visible { background: color-mix(in srgb, var(--refine-ink) 86%, var(--refine-offwhite)); color: var(--refine-cream); }
/* Link buttons outside tables (e.g. "Volver a pedirlo"): line pills. */
.page-account .acc .woocommerce .order-again { margin: 12px 0 0; }
.page-account .acc .woocommerce .order-again .button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--refine-ink);
  color: var(--refine-ink);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.page-account .acc .woocommerce .order-again .button:hover { background: color-mix(in srgb, var(--refine-ink) 8%, transparent); }
/* Small buttons inside tables (view, pay, cancel): line pills. */
.page-account .acc .woocommerce table .button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 2px 0;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--refine-ink);
  color: var(--refine-ink);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.page-account .acc .woocommerce table .button:hover { background: color-mix(in srgb, var(--refine-ink) 8%, transparent); }

/* ═════════════ Sin sesión: acceso, contraseña olvidada y nueva ═════════════ */
/* The wp-admin login's design (refine-core, assets/admin/login.css; Fran, 2026-10-11): its own
   template without the site header and footer (templates/page-mi-cuenta-acceso.html), the pearl
   texture behind, the logo, a small uppercase title, one frosted card with underlined fields and
   an uppercase ink pill, and «Volver al inicio» under it. Registration from My Account is off, so
   the login form comes alone. The site's fonts stay (the wp-admin login uses the system's only to
   load no web fonts). */
body.page-account--access {
  --acc-field-line: color-mix(in srgb, var(--refine-ink) 55%, transparent); /* 3,6:1 on the card, a field's only edge */
  min-height: 100svh;
  background: var(--refine-offwhite) url("../img/pearl-1200.webp") center / cover no-repeat;
}
@media (min-width: 1300px) {
  body.page-account--access { background-image: url("../img/pearl-2400.webp"); }
}
.page-account--access .wp-site-blocks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
}
.wp-site-blocks > main.acc.acc--access {
  width: min(100% - 32px, 420px);
  margin: 0 auto;
  padding: 40px 0;
}
.page-account--access .acc .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)) {
  display: grid;
  gap: 18px;
  width: 100%;
  margin: 0;
}

/* Heading: the logo (to the home page), the title as a small uppercase line, the lead under it.
   WooCommerce prints its notices before the heading: the heading goes first, the notices between
   it and the card, as in the wp-admin login. */
.page-account--access .acc .acc-head { order: -1; justify-items: center; gap: 10px; margin-bottom: 8px; text-align: center; }
.acc-head__brand { font-size: 44px; color: var(--refine-ink); text-decoration: none; }
.page-account--access .acc .acc-head__title {
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--summer-ink-soft);
}
.page-account--access .acc .acc-head__lead { font-size: 15px; }

/* «Acceder» repeats the heading: kept for screen readers, hidden on screen. */
.page-account .acc .woocommerce > h2:has(+ form.woocommerce-form-login) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The card: frosted glass over the texture, big rounded corners, no shadow. The lost-password
   confirmation («Te mandamos el email…») is a paragraph right after the heading: the same card. */
.page-account--access .acc form.woocommerce-form-login,
.page-account--access .acc form.lost_reset_password,
.page-account--access .acc form.woocommerce-ResetPassword,
.page-account--access .acc .woocommerce > .acc-head + p {
  width: 100%;
  margin: 0;
  padding: 38px 34px 34px;
  border: 1px solid color-mix(in srgb, white 75%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.page-account--access .acc form.woocommerce-form-login,
.page-account--access .acc form.lost_reset_password,
.page-account--access .acc form.woocommerce-ResetPassword { display: grid; gap: 24px; }
.page-account--access .acc .woocommerce > .acc-head + p { line-height: 1.55; }
/* WooCommerce's intro of the password forms («Ingresá tu email…»). */
.page-account--access .acc form > p:not(.form-row) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--summer-ink-soft); }

/* Labels: the brand's small uppercase label. */
.page-account--access .acc form .form-row { gap: 2px; }
.page-account--access .acc form .form-row > label { font-size: 12px; letter-spacing: 0.14em; color: var(--summer-ink-soft); }

/* Fields: only a line underneath; it gets thicker and darker on focus. */
.page-account--access .acc form .input-text,
.page-account--access .acc form input[type="password"],
.page-account--access .acc form input[type="email"],
.page-account--access .acc form input[type="text"] {
  min-height: 0;
  padding: 10px 2px 12px;
  border: 0;
  border-bottom: 1px solid var(--acc-field-line);
  border-radius: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1.3;
}
.page-account--access .acc form .input-text:focus,
.page-account--access .acc form input:focus {
  border-bottom-color: var(--refine-ink);
  box-shadow: 0 1px 0 0 var(--refine-ink);
  outline: 2px solid transparent; /* visible in forced-colors mode */
}
.page-account--access .acc form .password-input .input-text { padding-right: 40px; }
.page-account--access .acc form .show-password-input { right: 2px; }

/* Login: «Recordarme» and «¿Olvidaste…?» on one row, then «Ingresar» across the card. The submit
   row is opened up (display: contents) so its pieces become grid items; whatever plugins print
   after it keeps its place at the end. */
.page-account .acc form.woocommerce-form-login { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.page-account .acc form.woocommerce-form-login > * { grid-column: 1 / -1; }
.page-account .acc form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: contents; }
/* The form's own clearfix would be an empty grid row too (the fields' one is gone above). */
.page-account .acc form.woocommerce-form-login::before,
.page-account .acc form.woocommerce-form-login::after { content: none; }
.page-account .acc form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) ~ * { order: 3; }
.page-account .acc form.woocommerce-form-login .form-row > .woocommerce-form-login__rememberme {
  grid-column: 1;
  order: 1;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
}
.page-account .acc form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) ~ .woocommerce-LostPassword { grid-column: 2; order: 1; text-align: right; }
.page-account .acc .woocommerce-LostPassword { margin: 0; font-size: 14px; }
.page-account .acc .woocommerce-LostPassword a { text-decoration: underline; text-underline-offset: 3px; }

/* The button: a full-width ink pill with uppercase cream text. */
.page-account--access .acc .woocommerce button.button {
  grid-column: 1 / -1;
  order: 2;
  width: 100%;
  min-height: 52px;
  padding: 0 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Notices over the card: the text stays ink, the color goes on the left border. */
.page-account--access .acc .wc-block-components-notice-banner {
  margin: 0;
  border: 1px solid var(--refine-beige);
  border-left: 4px solid var(--refine-ink);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}
.page-account--access .acc .wc-block-components-notice-banner.is-error { border-color: var(--refine-beige); border-left-color: var(--co-error); }
/* «Te mandamos el email…»: WooCommerce prints a notice and a paragraph that say the same thing;
   the paragraph stays, as the card. */
.page-account .acc .woocommerce:has(> .acc-head + p) > :is(.wc-block-components-notice-banner, .woocommerce-notices-wrapper) { display: none; }

/* «Volver al inicio» under the card (inc/account.php). */
.acc-back { margin: 4px 0 0; text-align: center; font-size: 14px; }
.page-account--access .acc .acc-back a { color: var(--summer-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.page-account--access .acc .acc-back a:hover { color: var(--refine-ink); }

/* Entrance: heading, card and link rise 8 px and fade in, 400 ms at most (DESIGN.md), as in the
   wp-admin login. */
@keyframes acc-access-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.page-account--access .acc .woocommerce > * { animation: acc-access-in 400ms var(--ease-out) both; }
.page-account--access .acc .woocommerce > :not(.acc-head) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .page-account--access .acc .woocommerce > * { animation: none; }
}

@media (max-width: 420px) {
  .acc-head__brand { font-size: 38px; }
  .page-account--access .acc form.woocommerce-form-login,
  .page-account--access .acc form.lost_reset_password,
  .page-account--access .acc form.woocommerce-ResetPassword,
  .page-account--access .acc .woocommerce > .acc-head + p { padding: 30px 22px 26px; }
}

/* — Account details: two columns from tablet up — */
/* Its own cap, so the form does not stretch to the 1200 px content width (DF-4 / D2). */
.page-account .acc form.woocommerce-EditAccountForm { display: grid; gap: 20px; max-width: 720px; }
@media (min-width: 768px) {
  .page-account .acc form.woocommerce-EditAccountForm { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .page-account .acc form.woocommerce-EditAccountForm > *:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; }
}
.page-account .acc form.woocommerce-EditAccountForm fieldset {
  margin: 0;
  padding: var(--space-sm) 0 0;
  border: 0;
  border-top: 1px solid var(--summer-line);
  border-radius: 0;
}
/* Floated, the legend sits inside the fieldset, under the rule, instead of on its border. */
.page-account .acc form.woocommerce-EditAccountForm fieldset > legend {
  float: left;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: var(--track-title);
  text-transform: none;
}
.page-account .acc form.woocommerce-EditAccountForm fieldset > .form-row { clear: both; }
.page-account .acc form.woocommerce-EditAccountForm fieldset > .form-row + .form-row { margin-top: 20px; }
/* «Nombre visible» is for reviews and the admin; buyers do not need it. Hidden, it still posts its value. */
.page-account .acc form.woocommerce-EditAccountForm .form-row:has(#account_display_name) { display: none; }

/* ═════════════ Pedidos y Ver pedido ═════════════ */
.page-account .acc table.shop_table {
  width: 100%;
  margin: 0;
  border: 1px solid var(--summer-line);
  border-radius: 18px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  font-size: 15px;
}
.page-account .acc table.shop_table th,
.page-account .acc table.shop_table td { padding: 12px 16px; border-top: 1px solid var(--summer-line); text-align: left; vertical-align: middle; }
.page-account .acc table.shop_table thead th { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.page-account .acc table.shop_table tfoot th,
.page-account .acc table.shop_table tfoot td { font-weight: 600; }
.page-account .acc .woocommerce-orders-table__cell-order-number a { font-weight: 700; }
.page-account .acc mark { background: none; color: inherit; font-weight: 700; }
@media (max-width: 768px) {
  /* woocommerce-smallscreen.css stacks the cells with their label; keep them on the card. */
  .page-account .acc table.shop_table_responsive tbody tr { display: block; border-top: 1px solid var(--summer-line); }
  .page-account .acc table.shop_table_responsive tbody tr:first-child { border-top: 0; }
  .page-account .acc table.shop_table_responsive tbody td { border-top: 0; padding-block: 6px; }
  /* woocommerce-smallscreen.css greys every second row (`tr:nth-child(2n) td`): the card has no zebra (Fran, 2026-10-14). */
  .page-account .acc table.shop_table_responsive tbody tr td { background: none; }
  .page-account .acc table.shop_table_responsive tbody td::before { font-weight: 400; color: var(--summer-ink-soft); }
  /* woocommerce-smallscreen.css hides the row header (the order number): keep it, it is the link. */
  .page-account .acc table.shop_table_responsive tbody th { display: block; padding: 12px 16px 6px; border-top: 0; text-align: left; }
}
.page-account .acc .woocommerce-customer-details address {
  padding: 16px;
  border: 1px solid var(--summer-line);
  border-radius: 18px;
  font-style: normal;
}
.page-account .acc .woocommerce-pagination { display: flex; gap: 12px; }

/* — Métodos de pago (Fran, 2026-10-11): «Agregar tarjeta» as a line pill; the add-card form as the
   checkout's payment option (offwhite card, ink border, no WooCommerce grey and lilac). — */
.page-account .acc .woocommerce-MyAccount-content > a.button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--refine-ink);
  color: var(--refine-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.page-account .acc .woocommerce-MyAccount-content > a.button:hover { background: color-mix(in srgb, var(--refine-ink) 8%, transparent); }
.page-account .acc #add_payment_method { max-width: 720px; }
.page-account .acc #add_payment_method #payment { display: grid; gap: 20px; background: none; border-radius: 0; }
.page-account .acc #add_payment_method #payment ul.payment_methods { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; list-style: none; }
.page-account .acc #add_payment_method #payment ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 12px;
  padding: 0 16px;
  border: 1px solid var(--refine-ink);
  border-radius: 14px;
  background: var(--bg-card);
  line-height: 1.4;
}
.page-account .acc #add_payment_method #payment ul.payment_methods li > input.input-radio { flex: none; width: 18px; height: 18px; margin: 19px 0 0; accent-color: var(--refine-ink); }
.page-account .acc #add_payment_method #payment ul.payment_methods li > label { display: flex; flex: 1; align-items: center; min-height: 56px; margin: 0; padding-block: 15px; cursor: pointer; }
.page-account .acc #add_payment_method #payment div.payment_box { flex: 0 0 100%; margin: 0 0 16px; padding: 0; background: none; color: var(--text-primary); font-size: 15px; }
.page-account .acc #add_payment_method #payment div.payment_box::before { content: none; }
.page-account .acc #add_payment_method #payment .payment_box fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.page-account .acc #add_payment_method #payment div.form-row { margin: 0; padding: 0; border: 0; }

/* — Ver pedido (Fran, 2026-10-11): a summary, not WooCommerce's stretched tables. Its own cap like the
   account details; section titles as the site's small labels, so they do not stack up as headings
   under «Pedido #…»; product and total read as lines, with the amount to the right. — */
.page-account .acc .woocommerce-MyAccount-content:has(.woocommerce-order-details) { max-width: 720px; }
.page-account .acc .woocommerce-MyAccount-content:has(.woocommerce-order-details) > p:first-child { margin: 0; color: var(--summer-ink-soft); }
.page-account .acc .woocommerce-MyAccount-content:has(.woocommerce-order-details) > p:first-child mark { color: var(--text-primary); }
.page-account .acc .woocommerce-order-downloads,
.page-account .acc .woocommerce-order-details,
.page-account .acc .woocommerce-customer-details { display: grid; gap: 12px; margin: 0; }
.page-account .acc .woocommerce-MyAccount-content h2.woocommerce-order-downloads__title,
.page-account .acc .woocommerce-MyAccount-content h2.woocommerce-order-details__title,
.page-account .acc .woocommerce-MyAccount-content h2.woocommerce-column__title {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--summer-ink-soft);
}
/* The column headers («Producto», «Total», «Descargar») say what the title already says: kept for
   screen readers, hidden on screen. */
.page-account .acc .woocommerce-table--order-details thead,
.page-account .acc .woocommerce-table--order-downloads thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-account .acc .woocommerce-table--order-details tbody tr:first-child > *,
.page-account .acc .woocommerce-table--order-downloads tbody tr:first-child > * { border-top: 0; }
.page-account .acc .woocommerce-table--order-details td:last-child,
.page-account .acc .woocommerce-table--order-details tfoot td,
.page-account .acc .woocommerce-table--order-downloads td:last-child { text-align: right; }
.page-account .acc .woocommerce-table--order-details .product-quantity { font-weight: 400; color: var(--summer-ink-soft); }
.page-account .acc .woocommerce-table--order-details tfoot th,
.page-account .acc .woocommerce-table--order-details tfoot td { font-weight: 400; color: var(--summer-ink-soft); }
.page-account .acc .woocommerce-table--order-details tfoot tr:last-child th,
.page-account .acc .woocommerce-table--order-details tfoot tr:last-child td { font-weight: 700; font-size: 17px; color: var(--text-primary); }
@media (max-width: 768px) {
  /* Downloads on a phone: the product, then its button; no «Producto:» / «Descargar:» labels or zebra. */
  .page-account .acc table.woocommerce-table--order-downloads tbody tr { display: grid; gap: 8px; padding: 12px 16px; }
  /* woocommerce-smallscreen.css sets `text-align: right !important` on these cells: only !important beats it. */
  .page-account .acc table.woocommerce-table--order-downloads tbody tr td { padding: 0; text-align: left !important; background: none; }
  .page-account .acc table.woocommerce-table--order-downloads tbody tr td::before { content: none; }
}
/* Billing address: plain lines, without WooCommerce's icon font. */
.page-account .acc .woocommerce-customer-details .woocommerce-columns { margin: 0; }
.page-account .acc .woocommerce-customer-details .woocommerce-columns::before,
.page-account .acc .woocommerce-customer-details .woocommerce-columns::after { content: none; }
.page-account .acc .woocommerce-customer-details .woocommerce-column { float: none; width: auto; display: grid; gap: 12px; }
.page-account .acc .woocommerce-customer-details address { padding: 16px; font-size: 15px; line-height: 1.6; background: var(--bg-card); }
.page-account .acc .woocommerce-customer-details address p { margin: 0; padding: 0; color: var(--summer-ink-soft); }
.page-account .acc .woocommerce-customer-details address p::before { content: none; }

/* ═════════════ Responsive ═════════════ */
@media (max-width: 767px) {
  .wp-site-blocks > main.acc { padding-block: calc(var(--header-top) + var(--header-h) + var(--space-xl)) var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .page-account .acc .woocommerce-MyAccount-navigation li a,
  .page-account .acc form .input-text,
  .page-account .acc .acc-link { transition: none; }
}