/**
 * customizer.css — plugin-override sheet, enqueued at PHP_INT_MAX so its rules
 * win source order against WooCommerce, Ultimate Member, Modern Events Plugin
 * and FullCalendar styles. Pure design tokens and theme-only classes live in
 * the Tailwind build (`tailwind/custom/base.css`,
 * `tailwind/custom/components/theme-overrides.css`).
 */

.wc-block-components-checkout-place-order-button{
  background-color: #FF7575 !important;
  border-radius: 99999px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation {
    float: none !important;
    width: 100% !important;
    margin: 0 0 1.5rem !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation > ul,
.woocommerce-MyAccount-navigation > ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 0.5rem !important;
    row-gap: 0.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 1rem !important;
    text-align: center !important;
    border-bottom: 1px solid #d9d9d9 !important;
}

.woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.woocommerce {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    min-width: 0;
}

.woocommerce-account .woocommerce {
    width: 100%;
    max-width: 100%;
}

.woocommerce-account .entry-content,
.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link:hover,
.woocommerce-MyAccount-navigation-link {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link:first-child {
    padding: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link > a,
.woocommerce-MyAccount-navigation-link > a {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 2.75rem !important;
    padding: 0.5rem 0.125rem !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    color: #0f7d7e !important;
    text-decoration: none !important;
    text-underline-offset: 0.25em !important;
    text-decoration-thickness: 2px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    transition: text-decoration-color 150ms ease !important;
}

/* Viewport-based fallbacks — using @media (not @container) so every account
   endpoint resolves to the same layout at the same viewport width. The earlier
   container query measured the rendered nav width, which sits right around
   380px on common phones and flipped between 2 and 3 columns based on
   subpixel rounding, scrollbar width, and zoom level — making dashboard look
   different from mis-hijos / orders even though the markup is identical. */
@media (max-width: 560px) {
    .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link > a,
    .woocommerce-MyAccount-navigation-link > a {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.0625rem !important;
        letter-spacing: -0.01em !important;
    }
}

@media (max-width: 360px) {
    .woocommerce-account .woocommerce-MyAccount-navigation > ul,
    .woocommerce-MyAccount-navigation > ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link:hover > a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link > a:focus-visible,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active > a,
.woocommerce-MyAccount-navigation-link:hover > a,
.woocommerce-MyAccount-navigation-link.is-active > a {
    color: #0f7d7e !important;
    text-decoration: underline solid #0f7d7e 2px !important;
}

.woocommerce-MyAccount-navigation-link > a:focus-visible {
    outline: 2px solid #0f7d7e;
    outline-offset: 4px;
    border-radius: 2px;
}

@media (min-width: 1024px) {
    .woocommerce-account .woocommerce-MyAccount-navigation > ul,
    .woocommerce-MyAccount-navigation > ul {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        column-gap: 1rem !important;
        row-gap: 0 !important;
        padding-bottom: 0.75rem !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link > a,
    .woocommerce-MyAccount-navigation-link > a {
        min-height: 0 !important;
        padding: 0.25rem 0.25rem !important;
        font-size: 1rem !important;
    }
}

/* The shell wraps every page in `#content { padding: 0 2.5rem; }` (px-10 from
   header.php), leaving a visible gutter around the white account card on
   mobile. Drop that padding for WooCommerce surfaces below the lg breakpoint
   so every endpoint (mis-hijos, cuenta, documentos, orders, …) reaches the
   viewport edge. */
@media (max-width: 1023px) {
    body.woocommerce-account #content,
    body.woocommerce-page #content,
    body.woocommerce-cart #content,
    body.woocommerce-checkout #content,
    body.woocommerce-order-received #content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.woocommerce-account #primary > main,
    body.woocommerce-page #primary > main {
        margin-top: 0 !important;
    }
}

.pagination-sec {
  display: flex !important;
}

/* Pagination styles live in tailwind/custom/components/components.css.
 * The previous duplicate `.page-numbers` block here matched the
 * `<ul class="page-numbers">` wrapper and reapplied padding/shadow at
 * PHP_INT_MAX priority, which is why circles rendered with a clipped
 * drop shadow. Wrapper neutralization is below in the
 * `.woocommerce nav.woocommerce-pagination` block. */

.mep_cat-details {
  margin-bottom: 3em;

  h1 {
    font-family: var(--apacep-font-sans);
    font-style: normal;
    font-size: 3rem;
    line-height: 1;
    font-weight: 500;
  }
}

.mep_event_grid_item {
  border-radius: 24px;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link, .wc-block-grid__product .wc-block-grid__product-title, .wc-block-grid__product .wc-block-grid__product-price {
    font-size: 1rem !important;
}

div.mep_list_thumb > div.mep-ev-start-date {
    border-radius: 8px;
    overflow: hidden;
}

.um-button:not(.um-alt) {
  background-color: #ff7575 !important;
}

.um-button:not(.um-alt):hover {
  background-color: #ff5959 !important;
}

.fc-timeGrid-button{
    text-transform: capitalize !important;
}

/* ---------------------------------------------------------------
   Order received / Thank you page
   Design tokens (--apacep-*) are defined in tailwind/custom/base.css.
   --------------------------------------------------------------- */

.woocommerce-order {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 0 4rem;
  color: var(--apacep-ink);
}

/* "Thank you. Your order has been received." — styled in Tailwind via
   `.apacep-order .woocommerce-thankyou-order-received` (theme-overrides.css).
   Heavy gradient banner removed in favor of the lighter token-based bar. */

/* Order overview grid (number / date / email / total / payment) */
.woocommerce-order .woocommerce-order-overview.order_details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Kill clearfix pseudo-elements WC injects via .order_details::before/::after,
   which would otherwise occupy the first grid cell. */
.woocommerce-order .woocommerce-order-overview.order_details::before,
.woocommerce-order .woocommerce-order-overview.order_details::after {
  content: none;
  display: none;
}

@media (max-width: 540px) {
  .woocommerce-order .woocommerce-order-overview.order_details {
    grid-template-columns: minmax(0, 1fr);
  }
}

.woocommerce-order .woocommerce-order-overview.order_details li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--apacep-muted);
  min-width: 0;
}

.woocommerce-order .woocommerce-order-overview.order_details li::after,
.woocommerce-order .woocommerce-order-overview.order_details li::before {
  display: none;
  content: none;
}

.woocommerce-order .woocommerce-order-overview.order_details li strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apacep-ink);
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.35;
}

.woocommerce-order .woocommerce-order-overview.order_details li.total strong {
  color: var(--apacep-teal);
  font-size: 1.25rem;
}

/* Section titles: Order details, Billing address, Shipping address */
.woocommerce-order h2,
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--apacep-teal);
  display: inline-block;
  color: var(--apacep-ink);
}

/* Order details table */
.woocommerce-order .woocommerce-table--order-details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  overflow: hidden;
  margin-bottom: 2.5rem;
  box-shadow: var(--apacep-shadow);
}

.woocommerce-order .woocommerce-table--order-details thead th {
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .8rem;
  font-weight: 700;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--apacep-border);
}

.woocommerce-order .woocommerce-table--order-details tbody td,
.woocommerce-order .woocommerce-table--order-details tfoot td,
.woocommerce-order .woocommerce-table--order-details tfoot th {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--apacep-border);
  vertical-align: top;
}

.woocommerce-order .woocommerce-table--order-details tbody tr:last-child td,
.woocommerce-order .woocommerce-table--order-details tbody tr:last-child th {
  border-bottom: 1px solid var(--apacep-border);
}

.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  font-size: 1.05rem;
}

.woocommerce-order .woocommerce-table--order-details .product-name a {
  color: var(--apacep-ink);
  text-decoration: none;
  font-weight: 600;
}

.woocommerce-order .woocommerce-table--order-details .product-name a:hover {
  color: var(--apacep-teal);
}

.woocommerce-order .woocommerce-table--order-details .product-quantity {
  color: var(--apacep-muted);
  font-weight: 500;
  margin-left: .25rem;
}

/* Customer details: billing & shipping */
.woocommerce-order .woocommerce-customer-details {
  display: block;
}

/* When both billing AND shipping are present, WC wraps them in .woocommerce-columns--addresses.
   Lay those two blocks out side-by-side; otherwise the title sits above the address naturally. */
.woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  float: none;
  width: 100%;
}

@media (max-width: 640px) {
  .woocommerce-order .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column {
  float: none;
  width: 100%;
  min-width: 0;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column__title {
  margin-bottom: 1rem;
}

.woocommerce-order .woocommerce-customer-details address {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-style: normal;
  line-height: 1.65;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--email {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  color: var(--apacep-teal);
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--phone::before,
.woocommerce-order .woocommerce-customer-details .woocommerce-customer-details--email::before {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .woocommerce-order .woocommerce-table--order-details thead th,
  .woocommerce-order .woocommerce-table--order-details tbody td,
  .woocommerce-order .woocommerce-table--order-details tfoot td,
  .woocommerce-order .woocommerce-table--order-details tfoot th {
    padding: .85rem 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * Shop archive (Tienda) — toolbar (result count + sort dropdown)
 *
 * Goals: result count reads as quiet meta text; the sort select looks like a
 * slim Tailwind-style dropdown (white surface, soft border, custom chevron)
 * instead of the OS-default chunky select.
 * ------------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  margin: 0 0 1rem !important;
  font-weight: 400;
  line-height: 1.4;
}

.woocommerce .woocommerce-ordering {
  margin: 0 0 1rem !important;
}

.woocommerce .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 2.25rem;
  min-width: 12rem;
  padding: 0 2.25rem 0 0.75rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.5rem;
  background-color: #fff;
  /* Inline chevron — slate-500 stroke, no external asset needed. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.woocommerce .woocommerce-ordering select.orderby:hover {
  border-color: #0F7D7E;
}

.woocommerce .woocommerce-ordering select.orderby:focus,
.woocommerce .woocommerce-ordering select.orderby:focus-visible {
  outline: none;
  border-color: #0F7D7E;
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.18);
}

/* Toolbar layout — result count left, sort right, stacked on mobile. */
@media (min-width: 640px) {
  .woocommerce-notices-wrapper + .woocommerce-result-count,
  .woocommerce .woocommerce-result-count {
    display: inline-block;
  }
  .woocommerce .woocommerce-ordering {
    float: right;
  }
}

/* ---------------------------------------------------------------------------
 * Shop archive (Tienda) — responsive product grid + apacep-product-card
 *
 * Mirrors the Actividades/Permanencias card system (`apacep-event-card`) so
 * Tienda shares the same visual language: clean section wrapper (no rounded
 * white panel), bold title, surface card with hover lift, ribbon, price pill,
 * and "Ver más info" CTA. Driven by:
 *   themes/apaceptw/theme/woocommerce/archive-product.php (suppresses the
 *     default `woocommerce_output_content_wrapper` panel and emits this
 *     container directly)
 *   themes/apaceptw/theme/woocommerce/content-product.php (card markup)
 *
 * The plugin still emits `<ul class="products columns-N">` from
 * `loop/loop-start.php`; we neutralize the float-based defaults inside that
 * scope and paint a CSS grid: 4 cols ≥1200, 3 ≥900, 2 ≥600, 1 below.
 * ------------------------------------------------------------------------- */
.apacep-product-archive {
  max-width: 1280px;
  margin: 1.5rem auto 4rem;
  padding: 0 1.25rem;
  color: var(--apacep-ink);
}

.apacep-product-archive__header {
  margin: 0 0 2rem;
  text-align: left;
}

.apacep-product-archive__title {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--apacep-ink);
}

.apacep-product-archive__title::before {
  display: none;
}

/* Result count + sort dropdown row from `woocommerce_before_shop_loop`. */
.apacep-product-archive .woocommerce-result-count {
  margin: 0 0 1rem;
  color: var(--apacep-muted);
  font-size: 0.9rem;
}

.apacep-product-archive .woocommerce-ordering {
  margin: 0 0 1.5rem;
}


.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0 0 2rem !important;
  padding: 0 !important;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
}

@media (min-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/* Reset the plugin's li.product so the inner `.apacep-product-card` paints
 * all chrome (border, shadow, radius). Width/float/text-align defaults from
 * woocommerce.css are forced off here. */
.woocommerce ul.products li.product,
.woocommerce ul.products li.apacep-product-card-item {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  list-style: none;
}

/* ----- Card shell -------------------------------------------------- */
.apacep-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease;
  isolation: isolate;
}

.apacep-product-card:hover,
.apacep-product-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(15, 125, 126, 0.35);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
}

/* ----- Media ------------------------------------------------------- */
.apacep-product-card .apacep-product-card__media-link {
  display: block;
  text-decoration: none;
  outline: none;
}

.apacep-product-card .apacep-product-card__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--apacep-teal-soft);
  overflow: hidden;
}

.apacep-product-card .apacep-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apacep-product-card .apacep-product-card__image--placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(15, 125, 126, 0.16), transparent 60%),
    linear-gradient(135deg, var(--apacep-teal-soft) 0%, #f7fbfb 100%);
}

.apacep-product-card:hover .apacep-product-card__image {
  transform: scale(1.04);
}

/* Diagonal ribbon (Oferta / Agotado). */
.apacep-product-card .apacep-product-card__ribbon {
  position: absolute;
  top: 14px;
  right: -38px;
  width: 150px;
  padding: 6px 0;
  text-align: center;
  transform: rotate(35deg);
  background: var(--apacep-pink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.apacep-product-card .apacep-product-card__ribbon--soldout {
  background: var(--apacep-ink);
}

/* ----- Body -------------------------------------------------------- */
.apacep-product-card .apacep-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.4rem;
  flex: 1 1 auto;
  width: 100%;
}

.apacep-product-card .apacep-product-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--apacep-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.apacep-product-card .apacep-product-card__title::before {
  display: none;
}

.apacep-product-card .apacep-product-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: none;
  transition: color 180ms ease;
}

.apacep-product-card .apacep-product-card__title a:hover,
.apacep-product-card .apacep-product-card__title a:focus-visible {
  color: var(--apacep-teal);
}

/* Price row — pink-emphasized, mirrors the event card price treatment. */
.apacep-product-card .apacep-product-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.apacep-product-card .apacep-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.apacep-product-card .apacep-product-card__price-label {
  color: var(--apacep-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.apacep-product-card .apacep-product-card__price-value {
  color: var(--apacep-pink);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.apacep-product-card .apacep-product-card__price-value .woocommerce-Price-amount,
.apacep-product-card .apacep-product-card__price-value bdi,
.apacep-product-card .apacep-product-card__price-value ins {
  color: inherit;
  font: inherit;
  text-decoration: none;
  background: transparent;
}

.apacep-product-card .apacep-product-card__price-value del {
  opacity: 0.55;
  text-decoration: line-through;
  margin-right: 0.4rem;
  font-size: 0.92em;
  color: var(--apacep-muted);
}

/* ----- CTA --------------------------------------------------------- */
.apacep-product-card .apacep-product-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.apacep-product-card .apacep-product-card__cta-arrow {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apacep-product-card:hover .apacep-product-card__cta,
.apacep-product-card:focus-within .apacep-product-card__cta {
  background: var(--apacep-teal);
  color: #fff;
}

.apacep-product-card:hover .apacep-product-card__cta-arrow,
.apacep-product-card:focus-within .apacep-product-card__cta-arrow {
  transform: translateX(3px);
}

.apacep-product-card .apacep-product-card__cta:focus-visible {
  outline: 2px solid var(--apacep-teal);
  outline-offset: 3px;
}

/* Whole-card click affordance — keep title + CTA links as the real
   interactive targets above the overlay. */
.apacep-product-card .apacep-product-card__media-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.apacep-product-card .apacep-product-card__title a,
.apacep-product-card .apacep-product-card__cta {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
 * Empty-cart suggestion grid (cart/cart-empty.php)
 *
 * The empty-cart surface reuses .apacep-product-card from the Tienda
 * archive, but the cart-page width gives each 4-up card less room than
 * the shop archive. Tighten title type and shrink the CTA pill so the
 * "Ver más info" label stays on one line.
 * ------------------------------------------------------------------------- */
.apacep-cart-empty-suggestions .apacep-product-card__title {
  font-size: 0.92rem;
  line-height: 1.25;
  min-height: 2.3em;
}

.apacep-cart-empty-suggestions .apacep-product-card__cta {
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * WooCommerce pagination
 *
 * Theme rule `.page-numbers { width:48px; height:48px; ... }` was hitting the
 * `<ul class="page-numbers">` wrapper, collapsing the whole list into a single
 * 48x48 white circle and squashing its children. We neutralize the wrapper
 * here while letting the inner anchor/span pills keep their styling.
 * ------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
  margin: 1.5rem 0 2.5rem;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  display: inline-flex;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* WooCommerce's own default pagination rules
 * (`.woocommerce nav.woocommerce-pagination ul li a/span`) carry higher
 * specificity than `a.page-numbers` / `span.page-numbers` and force
 * `display: block`, `padding: .5em`, and a lavender `.current` background.
 * Match their selector here so our pill styling wins. */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  width: 44px;
  height: 44px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 16px;
  font-weight: 600;
  color: #444;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background: #f5fafa;
  border-color: #0F7D7E;
  color: #0F7D7E;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current {
  background: #0F7D7E;
  border-color: #0F7D7E;
  color: #fff;
  font-weight: 700;
}

.woocommerce nav.woocommerce-pagination ul li span.dots {
  border-color: transparent;
  background: transparent;
  color: #888;
}

/* ---------------------------------------------------------------------------
 * Single product page (tienda → product detail)
 *
 * Goal: replace WooCommerce's stock left/right column with a quiet editorial
 * layout that matches the rest of the storefront — apacep teal accents, soft
 * surface card around the gallery + summary, a single pill CTA, and a
 * styled description panel that uses the same table treatment as the
 * order-details and customer-details surfaces.
 * ------------------------------------------------------------------------- */

/* Page chrome: center the product on a comfortable measure and breathe room
   between sections. WooCommerce defaults to full-bleed flush left, which
   reads as cramped against the site's wide chrome. */
.single-product .woocommerce-notices-wrapper:empty {
  margin: 0;
}

.single-product .woocommerce-breadcrumb {
  max-width: 1120px;
  margin: 1.25rem auto 1.5rem;
  padding: 0 1.25rem;
  font-size: 0.85rem;
  color: var(--apacep-muted);
  letter-spacing: 0.01em;
}

.single-product .woocommerce-breadcrumb a {
  color: var(--apacep-muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.single-product .woocommerce-breadcrumb a:hover,
.single-product .woocommerce-breadcrumb a:focus-visible {
  color: var(--apacep-teal);
}

/* Main product grid — image left, summary right at desktop, stacked on
   mobile. WooCommerce paints these as floats so we have to neutralize float
   AND opt them into the grid. */
.single-product div.product {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
  color: var(--apacep-ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

@media (min-width: 900px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

.single-product div.product::before,
.single-product div.product::after {
  content: none !important;
}

/* Gallery: soft surface card with subtle shadow. WooCommerce's default
   `.woocommerce-product-gallery` floats left at 48% — kill that and let
   the grid place it. */
.single-product .woocommerce-product-gallery {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  padding: 1.25rem;
  box-shadow: var(--apacep-shadow);
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder {
  /* Small inset from the gallery card's top edge so the image doesn't sit
     flush against the wrapper border. */
  margin-top: 0.5rem;
  border-radius: calc(var(--apacep-radius) - 4px);
  overflow: hidden;
  background: #f7f7f7;
  /* 1px transparent border at the same radius — same trick used on the
     tienda grid: hides the dark hairline browsers paint along the image
     box edge when the source has a near-black background. */
  border: 1px solid transparent !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  display: block;
  border: 1px solid transparent !important;
  border-radius: calc(var(--apacep-radius) - 4px);
}

/* Thumbnail strip below the main image */
/* WooCommerce ships
     `.woocommerce div.product div.images .flex-control-thumbs { margin: 0 }`
   and `... .flex-control-thumbs li { margin-top: 1em }` at high specificity,
   plus float-based layout. We match the shape and force flex layout with a
   real gap so the thumbnail strip clears the main image. */
.woocommerce div.product div.images .flex-control-thumbs,
.single-product .woocommerce-product-gallery .flex-control-thumbs,
.single-product .woocommerce-product-gallery ol.flex-control-nav {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75rem !important;
  /* Clear vertical gap between the main image and the thumbnail strip so
     the small alt-image tile no longer sits flush under the big one. */
  margin: 1.5rem 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

.woocommerce div.product div.images .flex-control-thumbs li,
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
  width: calc((100% - 2.25rem) / 4) !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  /* Same 1px transparent border + matching radius as the main image, so
     thumbnails don't show the black source-edge hairline either. The
     border switches to teal when the thumb is hovered or active. */
  border: 1px solid transparent !important;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 150ms ease, opacity 150ms ease;
  opacity: 0.7;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  border-color: var(--apacep-teal) !important;
  opacity: 1;
}

/* Summary column — title / price / excerpt / cart */
.single-product div.product .summary.entry-summary {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.single-product .product_title.entry-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--apacep-teal);
}

/* Price block — promote the figure, keep the suffix quiet. */
.single-product .summary .price,
.single-product .summary p.price {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--apacep-ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.single-product .summary .price ins {
  text-decoration: none;
  color: var(--apacep-ink);
}

.single-product .summary .price del {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--apacep-muted);
  margin-right: 0.5rem;
  opacity: 0.85;
}

/* Stock pill */
.single-product .summary .stock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  margin: 0 0 1rem 0;
  background: var(--apacep-teal-soft);
  /* `!important` overrides WooCommerce's default `.stock.in-stock { color: #b3af54 }`
     (the olive shade you saw on "9 in stock"). Specificity tied at 3 classes,
     so source order wasn't enough. */
  color: var(--apacep-teal) !important;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  width: fit-content;
}

.single-product .summary .stock::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: currentColor;
}

.single-product .summary .stock.out-of-stock {
  background: #fdecec;
  color: #c0392b !important;
}

/* Short description — comfortable reading rhythm with optional bold lede. */
.single-product .woocommerce-product-details__short-description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--apacep-ink);
}

.single-product .woocommerce-product-details__short-description > * + * {
  margin-top: 0.6rem;
}

.single-product .woocommerce-product-details__short-description p {
  margin: 0;
}

.single-product .woocommerce-product-details__short-description strong,
.single-product .woocommerce-product-details__short-description b {
  color: var(--apacep-ink);
  font-weight: 700;
}

/* Add-to-cart row: quantity stepper + pill button on a single line.
 * Note: for variable products, the qty + button live inside
 * `.woocommerce-variation-add-to-cart` (a sibling of `.variations` table),
 * so we apply the flex layout to that wrapper too. The form.cart itself
 * stays block-flow so the variations table and the cart row stack vertically. */
.single-product .summary form.cart {
  display: block;
  margin: 0.5rem 0 0 !important;
  padding: 0;
}

.single-product .summary form.cart > .single_variation_wrap,
.single-product .summary form.cart > div:not(.variations_button):not(.woocommerce-variation) {
  display: block;
}

.single-product .summary .woocommerce-variation-add-to-cart,
.single-product .summary form.cart.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.single-product .summary form.cart .quantity,
.single-product .summary .woocommerce-variation-add-to-cart .quantity {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
}

.single-product .summary form.cart .quantity input.qty {
  width: 3.5rem;
  height: 3rem;
  padding: 0 0.4rem;
  border: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--apacep-ink);
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.single-product .summary form.cart .quantity input.qty:focus,
.single-product .summary form.cart .quantity input.qty:focus-visible {
  outline: none;
  box-shadow: none;
}

/*
 * Touch-friendly −/+ stepper. Native number-input spinners are too small to
 * tap on mobile, so the template adds dedicated buttons; CSS welds them and
 * the input into a single rounded pill.
 */
.apacep-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--apacep-border);
  border-radius: 9999px;
  background: var(--apacep-surface);
  overflow: hidden;
  height: 3rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.apacep-qty:focus-within {
  border-color: var(--apacep-teal);
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.18);
}

.apacep-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--apacep-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease;
}

.apacep-qty__btn:hover,
.apacep-qty__btn:focus-visible {
  background: rgb(15 125 126 / 0.08);
  color: var(--apacep-teal);
  outline: none;
}

/* Replacement focus ring — inset because the wrapper has overflow: hidden,
   so a regular box-shadow would be clipped. */
.apacep-qty__btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--apacep-teal);
}

.apacep-qty__btn:active {
  background: rgb(15 125 126 / 0.16);
}

.apacep-qty input.qty {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}

/* Hide native spinners — our buttons replace them. */
.apacep-qty input.qty::-webkit-outer-spin-button,
.apacep-qty input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 480px) {
  .apacep-qty {
    height: 3.25rem;
  }
  .apacep-qty__btn {
    width: 3rem;
    font-size: 1.4rem;
  }
}

.single-product .summary .single_add_to_cart_button.button,
.single-product .summary button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 1.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--apacep-pink) !important;
  border: 0;
  border-radius: 9999px !important;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.single-product .summary .single_add_to_cart_button.button:hover,
.single-product .summary button.single_add_to_cart_button:hover {
  background-color: #ff5959 !important;
  transform: translateY(-1px);
}

.single-product .summary .single_add_to_cart_button.button:active,
.single-product .summary button.single_add_to_cart_button:active {
  transform: translateY(0);
}

.single-product .summary .single_add_to_cart_button.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.25);
}

/* Hide WooCommerce meta block (SKU / category / tags) by default — the
   description panel below carries the structured book data, so the meta
   row in the summary would just repeat the slug. */
.single-product .summary .product_meta {
  margin: 0.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--apacep-border);
  font-size: 0.85rem;
  color: var(--apacep-muted);
}

.single-product .summary .product_meta > span {
  display: block;
  margin: 0.15rem 0;
}

.single-product .summary .product_meta a {
  color: var(--apacep-teal);
  text-decoration: none;
}

.single-product .summary .product_meta a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Description / additional info tabs
 * ------------------------------------------------------------------------- */
.single-product .woocommerce-tabs.wc-tabs-wrapper {
  grid-column: 1 / -1;
  max-width: 1120px;
  width: 100%;
  margin: 0.5rem auto 0;
  padding: 0;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  box-shadow: var(--apacep-shadow);
  overflow: hidden;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 !important;
  /* Inset the tab strip so the active tab pill doesn't sit flush against the
     card's rounded top-left corner — that's what made the panel read as
     "cropped" even though the inner padding was generous. */
  padding: 1rem 1.5rem 0 !important;
  list-style: none;
  border: 0 !important;
  background: var(--apacep-teal-soft);
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs::after {
  content: none !important;
  display: none !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  list-style: none;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li::before,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li::after {
  content: none !important;
  display: none !important;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
  /* `!important` is required: WooCommerce ships
     `.woocommerce div.product .woocommerce-tabs ul.tabs li a {
        display: inline-block; padding: .5em 0 }`
     at higher specificity, which was hijacking the tab padding. */
  display: inline-flex !important;
  align-items: center;
  padding: 1rem 1.85rem !important;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--apacep-muted);
  text-decoration: none;
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: 3px solid transparent;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:hover,
.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:focus-visible {
  color: var(--apacep-teal);
  background-color: rgb(255 255 255 / 0.5);
  outline: none;
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li a:focus-visible {
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.25);
}

.single-product .woocommerce-tabs ul.tabs.wc-tabs li.active a {
  color: var(--apacep-teal);
  background-color: var(--apacep-surface);
  border-bottom-color: var(--apacep-teal);
  /* Subtle lift so the active tab reads as a card flap on top of the panel. */
  box-shadow: 0 -1px 0 var(--apacep-border) inset, 1px 0 0 var(--apacep-border) inset, -1px 0 0 var(--apacep-border) inset;
}

.single-product .woocommerce-tabs .panel {
  /* `!important` is required: WooCommerce ships
     `.woocommerce div.product .woocommerce-tabs .panel { padding: 0 }` which
     beats us on selector specificity (4 classes + element vs. our 3
     classes), and stripping the panel padding made the description text and
     wide pack tables sit flush against the card edge. */
  margin: 0 !important;
  padding: 2.75rem 3rem 3rem !important;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--apacep-ink);
}

.single-product .woocommerce-tabs .panel > * + * {
  margin-top: 1rem;
}

.single-product .woocommerce-tabs .panel h2 {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--apacep-teal);
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--apacep-ink);
}

.single-product .woocommerce-tabs .panel p {
  margin: 0;
}

.single-product .woocommerce-tabs .panel strong {
  color: var(--apacep-ink);
  font-weight: 700;
}

/* Description tables (book pack / single book metadata: ETAPA, CURSO,
   LIBRO, COLECCIÓN, EDITORIAL, ISBN). The same teal-soft header treatment
   used on order details. The chrome (border, radius, shadow) lives on a
   wrapping `.apacep-table-scroll` div injected by `apacep_wrap_product_tables`
   so wide tables can scroll horizontally on small viewports without the
   table itself losing column alignment between thead and tbody. */
.apacep-table-scroll {
  margin: 1.25rem 0 0;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle vertical clipping so the wrapping border-radius reads cleanly
     against the inner thead background. */
  overflow-y: hidden;
}

.single-product .woocommerce-tabs .panel .apacep-table-scroll table,
.single-product .woocommerce-tabs .panel table {
  /* `min-width: max-content` lets the table grow as wide as its content
     needs so the wrapper actually scrolls on mobile (sm-and-down in
     Tailwind terms) instead of squeezing every column. On `md`+ it sits
     at 100% as long as content fits. */
  width: 100%;
  min-width: max-content;
  max-width: none;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.95rem;
  table-layout: auto;
}

/* Tables that haven't gone through the content filter (e.g. additional
   info / shop_attributes) still need the rounded chrome themselves. */
.single-product .woocommerce-tabs .panel > table {
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: 12px;
  overflow: hidden;
}

.single-product .woocommerce-tabs .panel table thead th,
.single-product .woocommerce-tabs .panel table th {
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--apacep-border);
  vertical-align: middle;
  white-space: nowrap;
}

.single-product .woocommerce-tabs .panel table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--apacep-border);
  vertical-align: middle;
  color: var(--apacep-ink);
  white-space: nowrap;
}

.single-product .woocommerce-tabs .panel table tbody tr:last-child td {
  border-bottom: 0;
}

.single-product .woocommerce-tabs .panel table tbody tr:nth-child(even) td {
  background-color: rgb(232 244 244 / 0.35);
}

/* Subtle right-edge fade on the scroll wrapper so users get a visual hint
   that there's more table content off-screen. Sits below the `md`
   breakpoint (Tailwind's 768px) where the table is most likely to need it. */
@media (max-width: 767.98px) {
  .apacep-table-scroll {
    position: relative;
    background:
      linear-gradient(to right, var(--apacep-surface) 30%, transparent),
      linear-gradient(to right, transparent, var(--apacep-surface) 70%) right,
      linear-gradient(to right, rgb(0 0 0 / 0.06), transparent) right,
      var(--apacep-surface);
    background-size: 2rem 100%, 2rem 100%, 0.75rem 100%, 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, local;
  }
}

/* WooCommerce additional information table (attribute list) shares the
   `.shop_attributes` class — match the same table look. */
.single-product .woocommerce-tabs .panel table.shop_attributes th {
  width: 35%;
  min-width: 8rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Related / up-sell products under the description
 * ------------------------------------------------------------------------- */
.single-product .related.products,
.single-product .upsells.products {
  grid-column: 1 / -1;
  max-width: 1120px;
  width: 100%;
  margin: 2.5rem auto 0;
  padding: 0;
}

.single-product .related.products > h2,
.single-product .upsells.products > h2 {
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--apacep-teal);
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--apacep-ink);
}

/* Mobile: drop the side gutter so the layout reaches the viewport edge,
   matching the rest of the storefront's mobile chrome. */
@media (max-width: 640px) {
  .single-product .woocommerce-breadcrumb {
    padding: 0 1rem;
    margin-top: 1rem;
  }

  .single-product div.product {
    padding: 0 1rem 2rem;
    gap: 1.5rem;
  }

  .single-product .woocommerce-product-gallery {
    padding: 0.75rem;
  }

  .single-product .woocommerce-tabs .panel {
    padding: 1.75rem 1.25rem 2rem;
  }

  .single-product .woocommerce-tabs ul.tabs.wc-tabs {
    padding: 0.75rem 0.75rem 0 !important;
  }

  .single-product .woocommerce-tabs ul.tabs.wc-tabs li a {
    padding: 0.85rem 1.4rem !important;
  }

  .single-product .summary form.cart .single_add_to_cart_button.button,
  .single-product .summary button.single_add_to_cart_button {
    flex: 1 1 auto;
  }
}

/* ---------------------------------------------------------------------------
 * MEP single event detail page (Actividades / Permanencias)
 *
 * Driven by the forked template at
 *   themes/apaceptw/theme/mage-events/themes/default-theme.php
 * plus a handful of inner-partial overrides under mage-events/single/.
 *
 * The forked wrapper uses `.apacep-event-detail` markup we control end to
 * end; the plugin's `mpwem_style.css` still loads and still paints the
 * default `.mep-events-wrapper` chrome AROUND our card (an outer 1320px
 * white box from `single-events.php`). The wrapper rules below neutralize
 * that outer chrome and let our card breathe inside the page.
 *
 * Internal MEP markup that lives inside our card and CAN'T be overridden
 * by template (`event_add_cart.php`, `add_calender.php`, action hooks
 * that emit raw HTML in PHP) is styled with descendant selectors below.
 * ------------------------------------------------------------------------- */

/* ----- Outer wrapper neutralization ---------------------------------- *
 * The plugin's `single-events.php` wraps everything in
 *   <div class="mep-events-wrapper wrapper">
 *     <div class="mep-events-container"> ... template ... </div>
 *   </div>
 * That outer wrapper paints a 1320px white box with 20px padding. We keep
 * it transparent and let the inner article own the chrome.
 * -------------------------------------------------------------------- */
.mep-events-wrapper.wrapper,
.mep-events-wrapper {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--apacep-ink);
}

/* ----- Article shell ------------------------------------------------- */
.apacep-event-detail {
  max-width: 1120px;
  margin: 1.5rem auto 3rem;
  padding: 0 1.25rem;
  color: var(--apacep-ink);
  font-size: 1rem;
  line-height: 1.6;
}

.apacep-event-detail__header {
  margin: 0 0 1.5rem;
}

.apacep-event-detail__title {
  margin: 0;
  padding: 0;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--apacep-teal);
}

/* Two-column layout: main + aside on desktop, stacked on mobile. */
.apacep-event-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Two-column kicks in at 1180px so small laptops (1280–1440px) get a
   comfortable left-card width — at 960px the cart action row (qty + total
   + REGISTRAR ACTIVIDAD pill, button has min-width: 220px) overflowed the
   left column and collided with the schedule card on the right. */
@media (min-width: 1180px) {
  .apacep-event-detail__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.75rem;
  }
}

.apacep-event-detail--full .apacep-event-detail__layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
  margin: 0 auto;
}

.apacep-event-detail__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.apacep-event-detail__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

@media (min-width: 1180px) {
  .apacep-event-detail__aside {
    position: sticky;
    /* Header is fixed; clear it plus a small breathing gap so the aside
       never slides under the white nav bar while the user scrolls. */
    top: calc(var(--apacep-header-h, 200px) + 1rem);
  }
}

/* Single-column mode (<1180px): flatten __main and __aside via
   `display: contents` so the cart card can be ordered as a sibling of
   the aside content. The cart is pushed to the end with a large `order`
   so users see media → description → schedule/seats/facts → registration
   form last. Two-column mode (≥1180px) is unaffected. */
@media (max-width: 1179px) {
  .apacep-event-detail__layout {
    display: flex;
    flex-direction: column;
    /* Override `align-items: start` inherited from the grid setup; flex
       children need `stretch` to fill the full content width once `__main`
       / `__aside` are flattened with `display: contents` below. */
    align-items: stretch;
  }

  .apacep-event-detail__main,
  .apacep-event-detail__aside {
    display: contents;
  }

  .apacep-event-detail__cart {
    order: 99;
  }
}

/* ----- Hero media ---------------------------------------------------- */
.apacep-event-detail__media {
  margin: 0 auto;
  padding: 0.75rem;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  box-shadow: var(--apacep-shadow);
  overflow: hidden;
  /* In single-column mode (<1180px) the main column is the full content
     width, which made the 1:1 hero illustration dominate the viewport.
     Cap its size so it stays a hero, not a billboard. The desktop rule
     below removes the cap once the column itself is narrow. */
  max-width: 520px;
  width: 100%;
}

@media (min-width: 1180px) {
  .apacep-event-detail__media {
    max-width: none;
  }
}

.apacep-event-detail__media img,
.apacep-event-detail__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--apacep-radius) - 4px);
  background: #f5f7f7;
}

/* If the post had no thumbnail, drop the empty card so the title doesn't
   sit on a phantom box. */
.apacep-event-detail__media:empty {
  display: none;
}

/* ----- Facts row (date / time / location) ----------------------------
 * Lives inside `.apacep-event-detail__aside`, immediately after the
 * seats / Detalles / schedule card. On mobile (≤719px) the row collapses
 * to a 3-up grid — at that breakpoint the aside is full-width and the
 * pills can sit side-by-side comfortably. On desktop the aside is the
 * narrow right column, so each pill stacks 1-up. */
.apacep-event-detail__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tablet + small laptop — aside is still full-width here (layout splits
   at 1180px), so 3-up reads well across this range. */
@media (min-width: 720px) and (max-width: 1179px) {
  .apacep-event-detail__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.apacep-event-fact {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--apacep-teal-soft);
  border: 1px solid rgb(15 125 126 / 0.15);
  border-radius: 12px;
  min-width: 0;
}

.apacep-event-fact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--apacep-teal);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
}

.apacep-event-fact__icon i {
  color: #fff;
  background: transparent !important;
  width: auto;
  height: auto;
  font-size: 1rem;
}

.apacep-event-fact__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.apacep-event-fact__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--apacep-muted);
}

.apacep-event-fact__value,
.apacep-event-fact__value p,
.apacep-event-fact__value span {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--apacep-ink);
  line-height: 1.4;
  word-break: break-word;
}

/* ----- Body content -------------------------------------------------- *
 * Surface card matching the cart and FAQ panels so the description doesn't
 * float on the page background. Same chrome tokens as `.apacep-event-detail__cart`.
 * -------------------------------------------------------------------- */
.apacep-event-detail__content {
  padding: 1.75rem;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  box-shadow: var(--apacep-shadow);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--apacep-ink);
}

.apacep-event-detail__content > *:first-child {
  margin-top: 0;
}

.apacep-event-detail__content > * + * {
  margin-top: 0.85rem;
}

.apacep-event-detail__content p {
  margin: 0;
}

.apacep-event-detail__content h2,
.apacep-event-detail__content h3 {
  margin: 1.75rem 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--apacep-teal);
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--apacep-ink);
}

.apacep-event-detail__content a {
  color: var(--apacep-teal);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.apacep-event-detail__content a:hover {
  color: #0a6566;
}

/* ----- Cart card (registration form) -------------------------------- *
 * Outer chrome from us, inner table/qty stepper/button from the plugin's
 * `event_add_cart.php` (raw HTML, not template-overridable). Descendant
 * selectors style that emitted markup in apacep tokens.
 * -------------------------------------------------------------------- */
.apacep-event-detail__cart {
  margin: 0;
  padding: 1.75rem;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  box-shadow: var(--apacep-shadow);
}

.apacep-event-detail__cart h4.mep-cart-table-title {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--apacep-ink);
  border-bottom: 2px solid var(--apacep-teal);
  display: inline-block;
}

.apacep-event-detail__cart form#mage_event_submit {
  margin: 0;
}

.apacep-event-detail__cart .mep_event_add_cart_table {
  width: 100%;
  margin: 1rem 0 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  background: linear-gradient(180deg, #fafbfb, var(--apacep-teal-soft));
  border: 1px solid var(--apacep-border);
  border-radius: 14px;
  overflow: hidden;
}

.apacep-event-detail__cart .mep_event_add_cart_table td {
  padding: 1.1rem 1.25rem;
  border: 0;
  vertical-align: middle;
  font-size: 0.95rem;
  color: var(--apacep-ink);
  background: transparent;
}

.apacep-event-detail__cart .mep_event_add_cart_table td.total-col {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.apacep-event-detail__cart .mep_event_add_cart_table .the-total {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgb(15 125 126 / 0.18);
  color: var(--apacep-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.apacep-event-detail__cart .mep_event_add_cart_table #usertotal,
.apacep-event-detail__cart .mep_event_add_cart_table #ttyttl {
  font-weight: 800;
  color: var(--apacep-ink);
  font-size: 1.05rem;
  margin-left: 0.15rem;
}

/* ----- Ticket type table (alternativas / alumnos / precio) ---------- *
 * Emitted by apacep/templates/mage-eventpress/ticket_type_list.php and
 * the apacep `mep_ev_ticket_type2()` action. The plugin's user_custom_style
 * paints `thead.ex-sec-title` with the label_bg_color (salmon) and uses
 * raw <table>/<th>/<td>; we redesign here as a clean card grid: pill-style
 * child rows, teal-soft header strip, price chip on the right.
 * -------------------------------------------------------------------- */
/* The whole table chain is taken out of native table layout so the
   per-row CSS grid below can actually span the card width. Without
   this, `<thead>` / `<tbody>` stay `display: table-*` and shrink-wrap
   their grid-row children to content width. */
.apacep-event-detail__cart #mep_event_ticket_type_table,
.apacep-event-detail__cart #mep_event_ticket_type_table > thead,
.apacep-event-detail__cart #mep_event_ticket_type_table > tbody {
  display: block;
  width: 100%;
}

.apacep-event-detail__cart #mep_event_ticket_type_table {
  margin: 0 0 1rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--apacep-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--apacep-surface);
}

/* Override the plugin's salmon thead with apacep teal-soft strip. The
   header row uses the same 2-column grid as body rows so labels align
   with the data cells below. */
.apacep-event-detail__cart #mep_event_ticket_type_table thead.ex-sec-title.mep_ticket_type_title {
  background: var(--apacep-teal-soft) !important;
  color: var(--apacep-teal) !important;
}

.apacep-event-detail__cart #mep_event_ticket_type_table thead tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: center;
}

.apacep-event-detail__cart #mep_event_ticket_type_table thead th {
  padding: 0.85rem 1rem !important;
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid rgb(15 125 126 / 0.18);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apacep-teal) !important;
  text-align: left;
}

/* "Precio por plaza" header drops out — the price chip moves into the
   left column of each body row as part of the slot card, so the third
   header label becomes redundant. */
.apacep-event-detail__cart #mep_event_ticket_type_table thead th:last-child {
  display: none;
}

/* Plugin emits inline `text-align` on inner spans — neutralize them. */
.apacep-event-detail__cart #mep_event_ticket_type_table thead th .tkt-qty,
.apacep-event-detail__cart #mep_event_ticket_type_table thead th .tkt-pric {
  display: inline !important;
  text-align: inherit !important;
  color: inherit !important;
  font: inherit !important;
}

/* Body rows render as a 2-column grid: name + time chip + price chip
   stack in the left cell, children list fills the right cell. The
   user-innnf row is excluded — it stays a single colspan'd container. */
.apacep-event-detail__cart #mep_event_ticket_type_table > tbody > tr:not(:has(> td.user-innnf)),
.apacep-event-detail__cart #mep_event_ticket_type_table > tr:not(:has(> td.user-innnf)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
  border-top: 1px solid var(--apacep-border);
}

/* Hidden user-info row stays block-level so it never sneaks into the
   grid above and shifts price/list cells around. */
.apacep-event-detail__cart #mep_event_ticket_type_table > tbody > tr:has(> td.user-innnf),
.apacep-event-detail__cart #mep_event_ticket_type_table > tr:has(> td.user-innnf) {
  display: block;
}

.apacep-event-detail__cart #mep_event_ticket_type_table .mep_ticket_details {
  white-space: nowrap;
}

/* First body row's top border is the thead bottom-border — drop the duplicate. */
.apacep-event-detail__cart #mep_event_ticket_type_table thead + tr,
.apacep-event-detail__cart #mep_event_ticket_type_table thead ~ tr:first-of-type {
  border-top: 0;
}

/* Body cells. */
.apacep-event-detail__cart #mep_event_ticket_type_table td {
  padding: 1rem;
  vertical-align: top;
  border: 0;
  font-size: 0.95rem;
  color: var(--apacep-ink);
  background: var(--apacep-surface);
}

/* Column 1 — slot title + time chip. Price chip stacks below via
   padding-bottom: 0 here and padding-top: 0 on the price cell. */
.apacep-event-detail__cart #mep_event_ticket_type_table td:first-child {
  padding-bottom: 0.5rem;
}

.apacep-event-detail__cart span.mep_ticket_type_name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--apacep-teal);
  line-height: 1.25;
}

.apacep-event-detail__cart .mep_ticket_details {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 9999px;
  background: var(--apacep-teal-soft);
  font-weight: 600;
}

.apacep-event-detail__cart .mep_ticket_details p {
  margin: 0 !important;
  padding: 0;
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  color: var(--apacep-teal) !important;
  letter-spacing: 0.02em;
}

/* Column 2 — children checkboxes as selectable pill rows. Spans both
   left-column grid rows (name + price) so the list takes the full row
   height on the right. */
.apacep-event-detail__cart #mep_event_ticket_type_table td.ticket-qty {
  text-align: left;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.apacep-event-detail__cart .ticket-qty label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.45rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--apacep-border);
  border-radius: 10px;
  background: #fafbfb;
  font-size: 0.95rem;
  color: var(--apacep-ink);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.apacep-event-detail__cart .ticket-qty label:last-of-type {
  margin-bottom: 0;
}

.apacep-event-detail__cart .ticket-qty label:hover {
  border-color: var(--apacep-teal);
  background: var(--apacep-teal-soft);
}

.apacep-event-detail__cart .ticket-qty label:has(input.child-class:checked) {
  border-color: var(--apacep-pink);
  background: rgb(255 117 117 / 0.08);
  font-weight: 600;
}

.apacep-event-detail__cart .ticket-qty label:has(input.child-class:disabled:not(:checked)) {
  opacity: 0.5;
  cursor: not-allowed;
}

.apacep-event-detail__cart .ticket-qty label:has(input.child-class:disabled:not(:checked)):hover {
  border-color: var(--apacep-border);
  background: #fafbfb;
}

.apacep-event-detail__cart input.child-class {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid #c7ccd1;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.apacep-event-detail__cart input.child-class:checked {
  background: var(--apacep-pink);
  border-color: var(--apacep-pink);
}

.apacep-event-detail__cart input.child-class:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.5 6.8 11.8 12.5 5.2'/></svg>") center/72% no-repeat;
}

.apacep-event-detail__cart input.child-class:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.25);
  border-color: var(--apacep-teal);
}

/* Column 3 in the source — price chip moves into the left column,
   directly under the slot name + time chip. Grid-row: 2 places it on
   the second row of the left column. */
.apacep-event-detail__cart #mep_event_ticket_type_table td.ticket-price {
  grid-column: 1;
  grid-row: 2;
  padding-top: 0;
  padding-bottom: 1rem;
  text-align: left;
  white-space: nowrap;
}

.apacep-event-detail__cart #mep_event_ticket_type_table td.ticket-price strong {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--apacep-ink);
}

.apacep-event-detail__cart #mep_event_ticket_type_table td.ticket-price .woocommerce-Price-amount {
  color: inherit !important;
  font-weight: inherit;
}

/* Hidden user-info row stays out of the visual flow until populated. */
.apacep-event-detail__cart #mep_event_ticket_type_table td.user-innnf {
  padding: 0;
  border: 0;
}

.apacep-event-detail__cart .user-info-sec:not(:has(.dada-info > *)) {
  display: none;
}

.apacep-event-detail__cart .dada-info:empty {
  display: none;
}

/* Quantity stepper inside cart — match the apacep-qty pill from products. */
.apacep-event-detail__cart .mage_input_group {
  max-width: 9rem;
  height: 2.5rem;
  margin: 0;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--apacep-border);
  border-radius: 9999px;
  background: var(--apacep-surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.apacep-event-detail__cart .mage_input_group:focus-within {
  border-color: var(--apacep-teal);
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.18);
}

.apacep-event-detail__cart .mage_input_group span {
  width: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--apacep-ink);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.apacep-event-detail__cart .mage_input_group span:hover {
  background: rgb(15 125 126 / 0.08);
  color: var(--apacep-teal);
}

.apacep-event-detail__cart .mage_input_group input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 600;
  color: var(--apacep-ink);
  font-size: 0.95rem;
  height: 100%;
  -moz-appearance: textfield;
}

.apacep-event-detail__cart .mage_input_group input::-webkit-outer-spin-button,
.apacep-event-detail__cart .mage_input_group input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add-to-cart button. The plugin chains 8 classes on this element with
   yellow defaults; matching specificity here without `!important` is
   noisier than just lifting the brand colors with `!important`. */
.apacep-event-detail__cart button.single_add_to_cart_button,
.apacep-event-detail__cart .button.button-default.woocommerce.button.alt.button.alt.btn-mep-event-cart {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 3rem;
  min-width: 220px;
  padding: 0 1.75rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff !important;
  background: var(--apacep-pink) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

/* Plugin emits the icon span FIRST then the text span — keep them on one
   row with the icon to the left. Override plugin's `inline-block + margin`
   so the flex `gap` above is the single source of spacing. */
.apacep-event-detail__cart .btn-mep-event-cart .mep-cart-btn-icon {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 1.05em;
  line-height: 1;
}

.apacep-event-detail__cart .btn-mep-event-cart .mep-cart-btn-icon i {
  display: inline-block;
}

.apacep-event-detail__cart .btn-mep-event-cart .mep-cart-btn-text {
  display: inline-block;
  line-height: 1;
}

.apacep-event-detail__cart button.single_add_to_cart_button:hover,
.apacep-event-detail__cart .btn-mep-event-cart:hover {
  background: #ff5959 !important;
  transform: translateY(-1px);
}

.apacep-event-detail__cart button.single_add_to_cart_button:focus-visible,
.apacep-event-detail__cart .btn-mep-event-cart:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.25);
}

.apacep-event-detail__cart p#mep_btn_notice {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #c0392b;
  text-align: center;
}

.apacep-event-detail__cart .mep_warning {
  display: block;
  padding: 1rem 1.25rem;
  margin: 0;
  background: var(--apacep-teal-soft);
  border: 1px solid rgb(15 125 126 / 0.18);
  border-radius: 12px;
  color: var(--apacep-ink);
  font-weight: 500;
  font-size: 0.95rem;
  text-align: center;
  text-transform: none;
}

/* "Already in cart" state. mage-eventpress reuses the add-to-cart class chain
   on an <a> (the real button is a <button>), so it inherits the pink pill
   above. Re-skin only the anchor into the same teal notice as .mep_warning,
   with a link affordance — the localized copy already ends in "Ver tu
   carrito". The element-qualified `a` + full class chain outscores the
   add-to-cart rule, and customizer.css is enqueued last so it also wins
   source order; `!important` only where the plugin rule used it. */
.apacep-event-detail__cart
  a.button.button-default.woocommerce.button.alt.button.alt.btn-mep-event-cart {
  display: block !important;
  flex-direction: initial !important;
  height: auto;
  min-width: 0;
  padding: 1rem 1.25rem;
  margin: 0;
  background: var(--apacep-teal-soft) !important;
  border: 1px solid rgb(15 125 126 / 0.18) !important;
  border-radius: 12px !important;
  color: var(--apacep-ink) !important;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: normal;
  line-height: 1.4;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.apacep-event-detail__cart
  a.button.button-default.woocommerce.button.alt.button.alt.btn-mep-event-cart:hover,
.apacep-event-detail__cart
  a.button.button-default.woocommerce.button.alt.button.alt.btn-mep-event-cart:focus-visible {
  background: var(--apacep-teal-soft) !important;
  color: var(--apacep-teal) !important;
  text-decoration: underline;
  transform: none;
  outline: none;
}

/* Mobile cart layout — the plugin emits a 2-column table that crams the
   qty + button on one row. Below 640px we split them onto stacked rows. */
@media (max-width: 640px) {
  .apacep-event-detail__cart {
    padding: 1.25rem;
  }

  .apacep-event-detail__cart .mep_event_add_cart_table,
  .apacep-event-detail__cart .mep_event_add_cart_table tbody,
  .apacep-event-detail__cart .mep_event_add_cart_table tr {
    display: block;
  }

  .apacep-event-detail__cart .mep_event_add_cart_table td {
    display: block;
    width: 100%;
    text-align: left !important;
    padding: 0.75rem 1rem;
    border-bottom: 0;
  }

  .apacep-event-detail__cart .mep_event_add_cart_table tr {
    border-bottom: 1px solid var(--apacep-border);
    padding: 0.5rem 0.5rem;
  }

  .apacep-event-detail__cart .mep_event_add_cart_table tr:last-child {
    border-bottom: 0;
  }

  .apacep-event-detail__cart button.single_add_to_cart_button,
  .apacep-event-detail__cart .btn-mep-event-cart {
    width: 100%;
    min-width: 0;
  }

  /* Stack the ticket-type table so children rows get full width. */
  .apacep-event-detail__cart #mep_event_ticket_type_table,
  .apacep-event-detail__cart #mep_event_ticket_type_table tbody,
  .apacep-event-detail__cart #mep_event_ticket_type_table thead,
  .apacep-event-detail__cart #mep_event_ticket_type_table thead tr {
    display: block;
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table thead th {
    display: none;
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table > tbody > tr,
  .apacep-event-detail__cart #mep_event_ticket_type_table > tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name  price"
      "list  list";
    gap: 0.5rem 1rem;
    padding: 1rem;
    border-top: 1px solid var(--apacep-border);
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table > tbody > tr:first-child,
  .apacep-event-detail__cart #mep_event_ticket_type_table > tr:first-child {
    border-top: 0;
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table td {
    display: block;
    width: auto !important;
    padding: 0;
    border: 0;
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table td:first-child {
    grid-area: name;
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table td.ticket-qty {
    grid-area: list;
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table td.ticket-price {
    grid-area: price;
    align-self: start;
  }

  .apacep-event-detail__cart #mep_event_ticket_type_table tr:has(> td.user-innnf:only-child) {
    display: none;
  }
}

/* ----- FAQ accordion (overridden template, native <details>) -------- */
.apacep-event-faq {
  margin: 0;
}

.apacep-event-faq__title {
  display: inline-block;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--apacep-teal);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--apacep-ink);
}

.apacep-event-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apacep-event-faq__item {
  margin: 0;
  padding: 0;
}

.apacep-event-faq__details {
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.apacep-event-faq__details[open] {
  border-color: rgb(15 125 126 / 0.25);
  box-shadow: 0 4px 14px rgb(15 125 126 / 0.08);
}

.apacep-event-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  font-weight: 600;
  color: var(--apacep-ink);
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.apacep-event-faq__summary::-webkit-details-marker {
  display: none;
}

.apacep-event-faq__summary:hover {
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
}

.apacep-event-faq__details[open] .apacep-event-faq__summary {
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  border-bottom: 1px solid rgb(15 125 126 / 0.18);
}

.apacep-event-faq__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--apacep-teal);
  transition: transform 200ms ease;
  flex: 0 0 auto;
}

.apacep-event-faq__details[open] .apacep-event-faq__chevron {
  transform: rotate(180deg);
}

.apacep-event-faq__answer {
  padding: 1rem 1.15rem 1.15rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--apacep-ink);
}

/* ----- Aside: map ---------------------------------------------------- */
.apacep-event-aside__map {
  margin: 0;
  padding: 1rem;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  box-shadow: var(--apacep-shadow);
}

.apacep-event-aside__map .mep_google_map,
.apacep-event-aside__map iframe {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--apacep-border);
  margin-top: 0.75rem;
  overflow: hidden;
}

/* ----- Aside card (seats / org / schedule / share / calendar) ------- */
.apacep-event-aside__card {
  margin: 0;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  box-shadow: var(--apacep-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.apacep-event-aside__section {
  padding: 1.25rem;
  border-bottom: 1px solid var(--apacep-border);
  margin: 0;
}

.apacep-event-aside__section:last-child {
  border-bottom: 0;
}

.apacep-event-aside__title {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0 0 0.35rem;
  border-bottom: 2px solid var(--apacep-teal);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--apacep-ink);
  letter-spacing: 0;
  text-transform: none;
}

.apacep-event-aside__title--schedule i {
  margin-right: 0.45rem;
  color: var(--apacep-teal);
}

/* Seats stat block (overridden template) */
.apacep-event-aside__seats {
  background: var(--apacep-teal-soft);
  text-align: left;
}

.apacep-event-aside__seats-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.apacep-event-aside__seats-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.apacep-event-aside__seats-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0.25rem;
}

.apacep-event-aside__seats-stat + .apacep-event-aside__seats-stat {
  border-left: 1px solid color-mix(in srgb, var(--apacep-teal) 18%, transparent);
  padding-left: 0.85rem;
}

.apacep-event-aside__seats-stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--apacep-teal);
  letter-spacing: -0.01em;
}

.apacep-event-aside__seats-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--apacep-muted);
}

.apacep-event-aside__seats-stat--left .apacep-event-aside__seats-stat-value {
  color: var(--apacep-teal);
}

.apacep-event-aside__seats-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--apacep-teal) 14%, transparent);
  overflow: hidden;
}

.apacep-event-aside__seats-bar-fill {
  display: block;
  height: 100%;
  background: var(--apacep-teal);
  border-radius: inherit;
  transition: width 300ms ease-out;
}

/* Organizer */
.apacep-event-aside__org {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.apacep-event-aside__org-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--apacep-teal);
  color: #fff;
  border-radius: 50%;
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.apacep-event-aside__org-icon i {
  color: #fff;
  background: transparent !important;
  width: auto;
  height: auto;
  font-size: 0.95rem;
}

.apacep-event-aside__org-body {
  flex: 1 1 auto;
  min-width: 0;
}

.apacep-event-aside__org-text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--apacep-ink);
  line-height: 1.4;
}

.apacep-event-aside__org-prefix {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--apacep-muted);
}

.apacep-event-aside__org-link {
  color: var(--apacep-teal);
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease;
}

.apacep-event-aside__org-link:hover {
  color: #0a6566;
  text-decoration: underline;
}

/* Schedule list — h3 emitted by date_list_title.php (overridden), <ul>/<li>
   emitted directly by mep_date_in_default_theme. */
.apacep-event-aside__schedule h3 {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--apacep-teal);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--apacep-ink);
  text-transform: none;
}

.apacep-event-aside__schedule ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.apacep-event-aside__schedule ul li {
  position: relative;
  padding: 0.85rem 0;
  border-top: 1px solid var(--apacep-border);
  font-size: 0.9rem;
  color: var(--apacep-ink);
  line-height: 1.45;
}

.apacep-event-aside__schedule ul li:first-child {
  border-top: 0;
  padding-top: 0;
}

.apacep-event-aside__schedule ul li:last-child {
  padding-bottom: 0;
}

/* Structured schedule grid (overridden date_list.php) */
.apacep-event-schedule__grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
}

.apacep-event-schedule__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
}

.apacep-event-schedule__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--apacep-muted);
}

.apacep-event-schedule__value {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--apacep-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}

.apacep-event-schedule__value--weekday {
  font-weight: 700;
  color: var(--apacep-teal);
  text-transform: capitalize;
}

.apacep-event-schedule__date-text {
  font-weight: 600;
  color: var(--apacep-ink);
  text-transform: capitalize;
}

.apacep-event-schedule__value--time .apacep-event-schedule__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--apacep-ink);
}

.apacep-event-schedule__time-sep,
.apacep-event-schedule__date-sep {
  color: var(--apacep-muted);
}

.apacep-event-schedule__value--period {
  font-variant-numeric: tabular-nums;
}

.apacep-event-schedule__value--period .apacep-event-schedule__date-text {
  text-transform: none;
}

.apacep-event-aside__schedule .mep_date_scdl_separator {
  color: var(--apacep-muted);
}

@media (max-width: 480px) {
  .apacep-event-schedule__row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.apacep-event-aside__schedule p.mep_single_date_btn {
  margin: 0.75rem 0 0;
  padding: 0.4rem 0.75rem;
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
}

/* Share buttons (overridden template) */
.apacep-event-share {
  text-align: left;
}

.apacep-event-share__label {
  display: block;
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--apacep-muted);
}

.apacep-event-share__list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apacep-event-share__list li {
  margin: 0;
}

.apacep-event-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--apacep-teal);
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.apacep-event-share__link:hover,
.apacep-event-share__link:focus-visible {
  background: #0a6566;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

/* Calendar dropdown — `mep_event_add_calender` emits a `<div class="calender-url">`
   wrapper containing the plugin's `#mep_add_calender_button` and (when open)
   the `ul#mep_add_calender_links` flyout. We can't override that PHP, so
   target the markup it emits inside our card. */
.apacep-event-aside__calendar .calender-url {
  position: relative;
}

.apacep-event-aside__calendar #mep_add_calender_button.mep-add-calender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.75rem;
  padding: 0 1.25rem;
  background: var(--apacep-teal);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  border-radius: 9999px !important;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

.apacep-event-aside__calendar #mep_add_calender_button.mep-add-calender:hover {
  background: #0a6566;
  opacity: 1;
  transform: translateY(-1px);
}

.apacep-event-aside__calendar #mep_add_calender_button.mep-add-calender i {
  margin: 0 0.5rem 0 0;
  font-size: 0.85rem;
}

.apacep-event-aside__calendar ul#mep_add_calender_links {
  margin-top: 0.5rem;
  padding: 0;
  max-width: 100%;
  list-style: none;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--apacep-shadow);
}

.apacep-event-aside__calendar ul#mep_add_calender_links li {
  margin: 0;
}

.apacep-event-aside__calendar ul#mep_add_calender_links li a {
  display: block;
  margin: 0;
  padding: 0.6rem 1rem;
  width: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--apacep-ink);
  background: transparent;
  border-radius: 0 !important;
  transition: background-color 150ms ease, color 150ms ease;
}

.apacep-event-aside__calendar ul#mep_add_calender_links li a:hover {
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
}

/* ----- Related events footer (kept after the main article) ---------- */
.mep-related-events-sec {
  max-width: 1120px;
  margin: 2rem auto 0;
  padding: 0 1.25rem;
}

/* ----- Mobile gutters ------------------------------------------------ */
@media (max-width: 640px) {
  .apacep-event-detail {
    margin: 1rem auto 2rem;
    padding: 0 1rem;
  }

  .apacep-event-detail__layout {
    gap: 1.5rem;
  }

  .apacep-event-detail__main {
    gap: 1.5rem;
  }

  .apacep-event-detail__media {
    padding: 0.5rem;
  }

  .apacep-event-detail__content {
    padding: 1.25rem;
  }

  .apacep-event-fact {
    padding: 0.85rem 1rem;
  }

  .apacep-event-aside__section,
  .apacep-event-aside__map {
    padding: 1rem;
  }

  .mep-related-events-sec {
    padding: 0 1rem;
  }
}

/* The pre-existing rule at line ~167 already strips `#content` padding for
   `body.woocommerce-page` below 1024px (MEP piggybacks on the WooCommerce
   product type), so the article's own gutter handles mobile. No further
   override needed here, but documenting the dependency for the next reader. */

/* ---------------------------------------------------------------------------
 * MEP event archive (Actividades / Permanencias listing)
 *
 * Driven by the forked templates at:
 *   themes/apaceptw/theme/mage-events/taxonomy-category.php
 *   themes/apaceptw/theme/mage-events/list/default.php
 *
 * Plugin still emits its outer `.mep-events-wrapper` chrome and its
 * `.mep_event_grid_item` / `.mep_list_thumb` / `.mep_list_event_details`
 * defaults from `mpwem_style.css`. We neutralize those inside the archive
 * scope so our `.apacep-event-card` chrome is the only thing that paints.
 * ------------------------------------------------------------------------- */

.apacep-event-archive {
  max-width: 1280px;
  margin: 1.5rem auto 4rem;
  padding: 0 1.25rem;
  color: var(--apacep-ink);
}

.apacep-event-archive__header {
  margin: 0 0 2rem;
  text-align: left;
}

.apacep-event-archive__title {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--apacep-ink);
}

.apacep-event-archive__lede {
  margin: 0.75rem 0 0;
  max-width: 60ch;
  color: var(--apacep-muted);
  font-size: 1rem;
  line-height: 1.55;
}

/* Plan 05-01: archive filter form (name + curso checkboxes). */
.apacep-event-archive__filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 2.5rem;
  padding: 1.25rem;
  background: var(--apacep-teal-soft);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
}

.apacep-event-archive__filter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.apacep-event-archive__filter-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--apacep-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.apacep-event-archive__filter--search input[type="search"] {
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--apacep-ink);
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: calc(var(--apacep-radius) - 6px);
  font-family: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.apacep-event-archive__filter--search input[type="search"]::placeholder {
  color: var(--apacep-muted);
}

.apacep-event-archive__filter--search input[type="search"]:focus {
  outline: 0;
  border-color: var(--apacep-teal);
  box-shadow: 0 0 0 3px rgba(15, 125, 126, 0.18);
}

.apacep-event-archive__filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
}

.apacep-event-archive__filter-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--apacep-ink);
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.apacep-event-archive__filter-option:hover {
  border-color: var(--apacep-teal);
}

.apacep-event-archive__filter-option:has(input:checked) {
  background: var(--apacep-teal);
  color: var(--apacep-surface);
  border-color: var(--apacep-teal);
}

.apacep-event-archive__filter-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: background 150ms ease;
}

.apacep-event-archive__filter-option input[type="checkbox"]:checked {
  background: currentColor;
}

.apacep-event-archive__filter-option input[type="checkbox"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.apacep-event-archive__filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.apacep-event-archive__filter-submit {
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--apacep-surface);
  background: var(--apacep-teal);
  border: 0;
  border-radius: calc(var(--apacep-radius) - 6px);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 150ms ease;
}

.apacep-event-archive__filter-submit:hover {
  background: var(--apacep-ink);
}

.apacep-event-archive__filter-submit:focus-visible {
  outline: 2px solid var(--apacep-ink);
  outline-offset: 2px;
}

.apacep-event-archive__filter-clear {
  font-size: 0.9rem;
  color: var(--apacep-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.apacep-event-archive__filter-clear:hover {
  color: var(--apacep-ink);
}

@media (prefers-reduced-motion: reduce) {
  .apacep-event-archive__filter--search input[type="search"],
  .apacep-event-archive__filter-option,
  .apacep-event-archive__filter-option input[type="checkbox"],
  .apacep-event-archive__filter-submit,
  .apacep-event-archive__filter-clear {
    transition: none;
  }
}

@media (min-width: 768px) {
  .apacep-event-archive__filters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
  }

  .apacep-event-archive__filter--search {
    flex: 1 1 220px;
    min-width: 200px;
  }

  .apacep-event-archive__filter--cursos {
    flex: 2 1 360px;
  }

  /* Plan 05-02: third axis joins the 768px filter row; a flex basis keeps
     the 3-fieldset row wrapping sanely against search + cursos. Reuses the
     shared --options pill layout — no new option styling. */
  .apacep-event-archive__filter--weekdays {
    flex: 1 1 240px;
  }

  .apacep-event-archive__filter-actions {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

.apacep-event-archive__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--apacep-muted);
  font-size: 1.05rem;
}

/* Grid: 4 columns at >=1200px, 3 at >=900px, 2 at >=600px, 1 below.
   We override the plugin's flex-row defaults inside this scope. */
.apacep-event-archive .apacep-event-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .apacep-event-archive .apacep-event-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .apacep-event-archive .apacep-event-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .apacep-event-archive .apacep-event-archive__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/* Neutralize the inline `width: calc(% - 14px)` and the plugin grid item
   defaults (border / box-shadow / margin) so our card chrome takes over.
   Background is intentionally kept (set on .apacep-event-card below) so the
   page's decorative SVG lines don't bleed through the body of the card. */
.apacep-event-archive .apacep-event-card {
  width: auto !important;
  margin: 0 !important;
}

/* ----- Card shell -------------------------------------------------- */
.apacep-event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease;
  isolation: isolate;
}

.apacep-event-card:hover,
.apacep-event-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(15, 125, 126, 0.35);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
}

/* ----- Media ------------------------------------------------------- */
.apacep-event-card .apacep-event-card__media-link {
  display: block;
  text-decoration: none;
  outline: none;
}

.apacep-event-card .apacep-event-card__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--apacep-teal-soft);
  overflow: hidden;
}

.apacep-event-card .apacep-event-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apacep-event-card .apacep-event-card__image--placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(15, 125, 126, 0.16), transparent 60%),
    linear-gradient(135deg, var(--apacep-teal-soft) 0%, #f7fbfb 100%);
}

.apacep-event-card:hover .apacep-event-card__image {
  transform: scale(1.04);
}

/* Diagonal ribbon (Múltiples horarios / Sold out / Virtual). */
.apacep-event-card .apacep-event-card__ribbon {
  position: absolute;
  top: 14px;
  right: -38px;
  width: 150px;
  padding: 6px 0;
  text-align: center;
  transform: rotate(35deg);
  background: var(--apacep-pink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.apacep-event-card .apacep-event-card__ribbon--soldout {
  background: var(--apacep-ink);
}

.apacep-event-card .apacep-event-card__ribbon--virtual {
  background: var(--apacep-teal);
  box-shadow: 0 4px 10px rgba(15, 125, 126, 0.35);
}

/* ----- Body -------------------------------------------------------- */
.apacep-event-card .apacep-event-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.4rem;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
}

.apacep-event-card .apacep-event-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--apacep-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.apacep-event-card .apacep-event-card__title::before {
  display: none;
}

.apacep-event-card .apacep-event-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: none;
  transition: color 180ms ease;
}

.apacep-event-card .apacep-event-card__title a:hover,
.apacep-event-card .apacep-event-card__title a:focus-visible {
  color: var(--apacep-teal);
}

.apacep-event-card .apacep-event-card__waitlist {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 117, 117, 0.12);
  color: var(--apacep-pink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Plan 05-02: badge row — assigned curso(s) + derived weekday(s). Small,
   subordinate pills below the title; static (no transition) so it is
   reduced-motion-safe by construction. Reset the <ul> defaults. */
.apacep-event-card .apacep-event-card__badges {
  list-style: none;
  margin: -0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.apacep-event-card .apacep-event-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  border-radius: 999px;
  border: 1px solid var(--apacep-border);
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
}

/* Curso vs día: subtle, not loud — día borrows the muted neutral surface so
   the curso badge stays the visually primary one in the pair. */
.apacep-event-card .apacep-event-card__badge--dow {
  background: var(--apacep-surface);
  border-color: var(--apacep-border);
  color: var(--apacep-muted);
}

/* Meta rows (price + location). Reset the plugin's <ul> defaults. */
.apacep-event-card .apacep-event-card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.apacep-event-card .apacep-event-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Price row — emphasize value, dim the label. */
.apacep-event-card .apacep-event-card__price {
  align-items: baseline;
}

.apacep-event-card .apacep-event-card__price .apacep-event-card__meta-label {
  color: var(--apacep-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.apacep-event-card .apacep-event-card__price-value {
  color: var(--apacep-pink);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.apacep-event-card .apacep-event-card__price-value .woocommerce-Price-amount,
.apacep-event-card .apacep-event-card__price-value bdi {
  color: inherit;
  font: inherit;
}

/* Location row */
.apacep-event-card .apacep-event-card__location {
  color: var(--apacep-muted);
}

.apacep-event-card .apacep-event-card__meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(15, 125, 126, 0.1);
  color: var(--apacep-teal);
  flex: 0 0 22px;
}

.apacep-event-card .apacep-event-card__location .apacep-event-card__meta-value {
  color: var(--apacep-ink);
  font-weight: 500;
}

/* ----- CTA --------------------------------------------------------- */
.apacep-event-card .apacep-event-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.apacep-event-card .apacep-event-card__cta-arrow {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apacep-event-card:hover .apacep-event-card__cta,
.apacep-event-card:focus-within .apacep-event-card__cta {
  background: var(--apacep-teal);
  color: #fff;
}

.apacep-event-card:hover .apacep-event-card__cta-arrow,
.apacep-event-card:focus-within .apacep-event-card__cta-arrow {
  transform: translateX(3px);
}

.apacep-event-card .apacep-event-card__cta:focus-visible {
  outline: 2px solid var(--apacep-teal);
  outline-offset: 3px;
}

/* Click affordance: make the whole card feel clickable while keeping the
   inner CTA / title links as proper interactive targets. */
.apacep-event-card .apacep-event-card__media-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.apacep-event-card .apacep-event-card__title a,
.apacep-event-card .apacep-event-card__cta {
  position: relative;
  z-index: 2;
}

/* ----- Pagination -------------------------------------------------- */
.apacep-event-archive__pagination {
  margin: 2.5rem 0 0;
  display: flex;
  justify-content: center;
}

.apacep-event-archive__pagination .pagination,
.apacep-event-archive__pagination .nav-links {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ----- Reset stale plugin defaults inside the archive scope --------
 * The plugin's mpwem_style.css ships:
 *   .mep_event_grid_item { border, box-shadow, margin }
 *   .mep_event_grid_item .mep_list_event_details { padding: 15px, min-height }
 *   .mep_event_grid_item .mep_list_thumb { min-height: 160px }
 * Our card paints its own chrome; force-override at higher specificity so
 * the page's decorative SVG lines never bleed through the body. */
.apacep-event-archive .apacep-event-card.mep_event_grid_item {
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  border-radius: var(--apacep-radius);
  margin: 0;
}

.apacep-event-archive .apacep-event-card.mep_event_grid_item:hover,
.apacep-event-archive .apacep-event-card.mep_event_grid_item:focus-within {
  border-color: rgba(15, 125, 126, 0.35);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
}

.apacep-event-archive .apacep-event-card .mep_list_thumb,
.apacep-event-archive .apacep-event-card .mep_list_event_details {
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
}

.apacep-event-archive .apacep-event-card .apacep-event-card__body {
  padding: 1.25rem 1.25rem 1.4rem;
}

/* =========================================================================
 * News archive (category/archive listings — Noticias)
 * Reuses the visual language of `.apacep-event-card` (surface card, hover
 * lift, pill CTA) but tuned for editorial 3-up layout: image, title, short
 * excerpt, "Leer más" CTA. Driven by:
 *   themes/apaceptw/theme/archive.php
 *   themes/apaceptw/theme/template-parts/content/content-excerpt.php
 * ------------------------------------------------------------------------- */

.apacep-news-archive {
  max-width: 1280px;
  margin: 1.5rem auto 4rem;
  padding: 0 1.25rem;
  color: var(--apacep-ink);
}

.apacep-news-archive__header {
  margin: 0 0 2rem;
  text-align: left;
}

.apacep-news-archive__title {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--apacep-ink);
}

.apacep-news-archive__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--apacep-muted);
  font-size: 1.05rem;
}

/* Grid: 3 columns at >=900px, 2 at >=600px, 1 below. */
.apacep-news-archive .apacep-news-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .apacep-news-archive .apacep-news-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .apacep-news-archive .apacep-news-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/* ----- Card shell -------------------------------------------------- */
.apacep-news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  border-radius: var(--apacep-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease;
  isolation: isolate;
}

.apacep-news-card:hover,
.apacep-news-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(15, 125, 126, 0.35);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
}

/* ----- Media ------------------------------------------------------- */
.apacep-news-card .apacep-news-card__media-link {
  display: block;
  text-decoration: none;
  outline: none;
}

.apacep-news-card .apacep-news-card__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--apacep-teal-soft);
  overflow: hidden;
}

.apacep-news-card .apacep-news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apacep-news-card .apacep-news-card__image--placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(15, 125, 126, 0.16), transparent 60%),
    linear-gradient(135deg, var(--apacep-teal-soft) 0%, #f7fbfb 100%);
}

.apacep-news-card:hover .apacep-news-card__image {
  transform: scale(1.04);
}

/* ----- Body -------------------------------------------------------- */
.apacep-news-card .apacep-news-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.4rem;
  flex: 1 1 auto;
}

.apacep-news-card .apacep-news-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--apacep-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.apacep-news-card .apacep-news-card__title::before {
  display: none;
}

.apacep-news-card .apacep-news-card__title a {
  color: inherit;
  text-decoration: none;
  background-image: none;
  transition: color 180ms ease;
}

.apacep-news-card .apacep-news-card__title a:hover,
.apacep-news-card .apacep-news-card__title a:focus-visible {
  color: var(--apacep-teal);
}

.apacep-news-card .apacep-news-card__excerpt {
  margin: 0;
  color: var(--apacep-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- CTA --------------------------------------------------------- */
.apacep-news-card .apacep-news-card__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    transform 200ms ease;
}

.apacep-news-card .apacep-news-card__cta-arrow {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apacep-news-card:hover .apacep-news-card__cta,
.apacep-news-card:focus-within .apacep-news-card__cta {
  background: var(--apacep-teal);
  color: #fff;
}

.apacep-news-card:hover .apacep-news-card__cta-arrow,
.apacep-news-card:focus-within .apacep-news-card__cta-arrow {
  transform: translateX(3px);
}

.apacep-news-card .apacep-news-card__cta:focus-visible {
  outline: 2px solid var(--apacep-teal);
  outline-offset: 3px;
}

/* Whole-card click affordance — keep title + CTA as real interactive
   targets above the overlay. */
.apacep-news-card .apacep-news-card__media-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.apacep-news-card .apacep-news-card__title a,
.apacep-news-card .apacep-news-card__cta {
  position: relative;
  z-index: 2;
}

/* ----- Pagination -------------------------------------------------- */
.apacep-news-archive__pagination {
  margin: 2.5rem 0 0;
  display: flex;
  justify-content: center;
}

.apacep-news-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.65rem;
  margin: 0 0.15rem;
  border-radius: 999px;
  background: var(--apacep-surface);
  border: 1px solid var(--apacep-border);
  color: var(--apacep-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.apacep-news-archive__pagination .page-numbers:hover,
.apacep-news-archive__pagination .page-numbers:focus-visible {
  background: var(--apacep-teal-soft);
  color: var(--apacep-teal);
  border-color: rgba(15, 125, 126, 0.35);
}

.apacep-news-archive__pagination .page-numbers.current {
  background: var(--apacep-teal);
  border-color: var(--apacep-teal);
  color: #fff;
}

/* Home variant: parent layout already provides width/centering, so neutralize
 * the archive wrapper's own max-width/padding so the grid fills the column. */
.apacep-news-archive--home {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
 * Related posts (single post footer)
 *
 * Driven by themes/apaceptw/theme/template-parts/content/content-single.php.
 * Reuses the .apacep-news-card chrome from the Noticias archive so the prev/
 * next posts share the same visual rhythm as the home grid, with a clear
 * "Seguir leyendo" eyebrow header and Anterior / Siguiente kicker labels.
 * ------------------------------------------------------------------------- */
.apacep-related-posts {
  margin: 0;
  padding: 2.25rem 1.5rem 2.5rem;
  border-top: 1px solid var(--apacep-border);
}

@media (min-width: 768px) {
  .apacep-related-posts {
    padding: 2.75rem 2rem 3rem;
  }
}

@media (min-width: 1024px) {
  .apacep-related-posts {
    padding: 3rem 2.5rem 3.5rem;
  }
}

.apacep-related-posts__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0 0.25rem;
}

.apacep-related-posts__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--apacep-ink);
}

.apacep-related-posts__see-more {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--apacep-muted);
  text-decoration: none;
  transition: color 180ms ease;
}

.apacep-related-posts__see-more:hover,
.apacep-related-posts__see-more:focus-visible {
  color: var(--apacep-teal);
  text-decoration: underline;
}

.apacep-related-posts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 720px) {
  .apacep-related-posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/* Kicker label inside the related card body — small, uppercase, teal accent
   that doubles as the "Anterior / Siguiente" affordance the old layout was
   missing. */
.apacep-news-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apacep-teal);
}

.apacep-news-card__kicker-arrow {
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.apacep-news-card--related:hover .apacep-news-card__kicker-arrow {
  transform: translateX(2px);
}

.apacep-news-card--related:hover
  .apacep-news-card__kicker-arrow:first-child,
.apacep-news-card--related:focus-within
  .apacep-news-card__kicker-arrow:first-child {
  transform: translateX(-2px);
}

/* ---------------------------------------------------------------------------
 * Carrito (WooCommerce Cart Block)
 *
 * The cart already lives inside the apaceptw surface section provided by
 * `template-parts/content/content-woocommerce.php` (white card with shadow
 * and rounded corners). This block tunes only the *contents*: layout,
 * dividers, type, and the pink Finalizar compra CTA. Don't add another card
 * shell — that crushed the columns at lg:p-16.
 * ------------------------------------------------------------------------- */

/* Tighten the WC content wrapper's huge desktop padding so the two-column
   cart has breathing room. The original lg:p-16 (4rem each side) is fine
   for prose pages but starves the cart of horizontal space. */
@media (min-width: 1024px) {
  body.woocommerce-cart article > section > .lg\:p-16,
  body.woocommerce-cart article > section > div.inter {
    padding: 2rem 2.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Classic cart (yourtheme/woocommerce/cart/cart.php via [woocommerce_cart])
 *
 * The Cart page renders through the [woocommerce_cart] shortcode so the
 * classic templates own the markup. These rules pair with the structural
 * styling in tailwind/custom/components/theme-overrides.css (.apacep-cart).
 * ------------------------------------------------------------------------- */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals .cart_totals {
  background: transparent;
  padding: 0;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table {
  border: 0;
  margin: 0;
  background: transparent;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table th {
  font-family: var(--apacep-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apacep-muted);
  border-bottom: 1px solid var(--apacep-border);
  background: transparent;
}

body.woocommerce-cart .woocommerce-cart-form table.shop_table td {
  border-top: 1px solid var(--apacep-border);
  padding: 1rem 0.75rem;
  vertical-align: middle;
  background: transparent;
}

body.woocommerce-cart .woocommerce-cart-form .product-thumbnail img {
  border-radius: 12px;
  background: var(--apacep-teal-soft);
  max-width: 64px;
  height: auto;
}

body.woocommerce-cart .woocommerce-cart-form .product-name a {
  color: var(--apacep-ink);
  font-weight: 600;
  text-decoration: none;
}

body.woocommerce-cart .woocommerce-cart-form .product-name a:hover {
  color: var(--apacep-teal);
  text-decoration: underline;
}

body.woocommerce-cart .woocommerce-cart-form .product-remove a.remove {
  color: var(--apacep-muted) !important;
  background: transparent !important;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 150ms ease;
}

body.woocommerce-cart .woocommerce-cart-form .product-remove a.remove:hover {
  color: var(--apacep-pink) !important;
}

body.woocommerce-cart .woocommerce-cart-form td.actions {
  padding-top: 1.25rem;
  border-top: 1px solid var(--apacep-border);
}

body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input.input-text {
  border: 1px solid var(--apacep-border);
  border-radius: 12px;
  padding: 0.65rem 0.9rem;
  margin-right: 0.5rem;
}

body.woocommerce-cart .woocommerce-cart-form td.actions .coupon input.input-text:focus {
  border-color: var(--apacep-teal);
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.15);
  outline: none;
}

body.woocommerce-cart .woocommerce-cart-form td.actions button[name="apply_coupon"],
body.woocommerce-cart .woocommerce-cart-form td.actions button[name="update_cart"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}

body.woocommerce-cart .woocommerce-cart-form td.actions button[name="apply_coupon"] {
  background-color: var(--apacep-teal-soft);
  color: var(--apacep-teal);
}

body.woocommerce-cart .woocommerce-cart-form td.actions button[name="apply_coupon"]:hover {
  background-color: var(--apacep-teal);
  color: #fff;
}

body.woocommerce-cart .woocommerce-cart-form td.actions button[name="update_cart"] {
  background-color: var(--apacep-ink);
  color: #fff;
}

body.woocommerce-cart .woocommerce-cart-form td.actions button[name="update_cart"]:hover {
  background-color: #0f172a;
  transform: translateY(-1px);
}

body.woocommerce-cart .cart_totals h2 {
  font-family: var(--apacep-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apacep-muted);
  margin: 0 0 1rem;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
  font-size: 1.1rem;
  font-weight: 700;
  padding-top: 1rem;
}

body.woocommerce-cart .cart_totals .order-total .amount {
  color: var(--apacep-teal);
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3rem;
  padding: 0 1.75rem;
  margin-top: 0.5rem;
  font-family: var(--apacep-font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--apacep-pink);
  border: 0;
  border-radius: 9999px;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: #ff5959;
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
 * Checkout — "Resumen del pedido" order summary panel
 *
 * Default WC block markup wraps each line item with a fixed-width thumbnail
 * column, a circular qty badge, and oversized body copy that, in a narrow
 * sidebar, wraps the title word-by-word and stacks the metadata into a
 * column of 2-3 word fragments. Below: tighter typography, calmer qty
 * affordance, and a compact meta block that matches the cart styling.
 *
 * --- On the `body.woocommerce-checkout` prefix ---
 *
 * Every rule in this section (and the cart-block rules that follow) is
 * prefixed with `body.woocommerce-checkout` — about 74 selectors total.
 * It looks like a specificity war but isn't: WC Blocks ships its own CSS
 * at `.wc-block-components-*` (specificity 0,1,0); our rules at 0,2,1
 * beat them on specificity AND load after them (customizer.css is
 * enqueued at PHP_INT_MAX — see functions.php `apacep_enqueue_styles`).
 * The body-class prefix is belt-and-suspenders defence, not the source
 * of complexity.
 *
 * Why we don't refactor it away:
 *
 * 1. WC Blocks renders the checkout DOM from React, not from any PHP
 *    template in `theme/woocommerce/checkout/*.php`. Those files style
 *    the legacy classic checkout, which is NOT what these rules target.
 *    There is no template file where we can inject a `.apacep-checkout`
 *    wrapper class — the markup is JS-generated.
 *
 * 2. The only way to inject a wrapper is a `render_block` filter on
 *    `woocommerce/checkout` (PHP) or a JS post-mount DOM wrap. Both add
 *    machinery for what would be ~10 characters saved per selector and
 *    a one-step specificity drop (0,2,1 → 0,2,0). Not worth the risk on
 *    the most business-critical page.
 *
 * 3. Many selectors here share components with the cart block (the
 *    `.wc-block-components-totals-*` family in particular renders in
 *    both surfaces). The body-class prefix is what keeps these rules
 *    from bleeding into `is_cart()` — dropping it would require a
 *    different scoping strategy, not just a deletion.
 *
 * When this section IS worth refactoring:
 *   - When customizer.css gets moved into the Tailwind build chain
 *     (postcss.config.js already has `tailwindcss/nesting`), letting
 *     us collapse 74 sibling rules into one nested block.
 *   - When a WC Blocks update breaks these selectors en masse and we
 *     have to rewrite them anyway.
 *
 * Until then: keep the prefix, add new checkout-block rules with the
 * same `body.woocommerce-checkout` prefix for consistency.
 * ------------------------------------------------------------------------- */

/* Panel chrome (collapsible "Resumen del pedido" header). Bottom padding is
   intentionally tight so the collapsed state reads as just title + chevron;
   the expanded content adds its own internal spacing via the divider that
   sits on the items wrapper, not on the heading itself. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

body.woocommerce-checkout .wc-block-components-panel > h2 {
  margin: 0;
}

/* Order-summary heading: matches the cart's "RESUMEN DEL PEDIDO" treatment —
   uppercase, tracked, muted label paired with a centered chevron. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-components-sidebar > .wc-block-components-panel > h2 .wc-block-components-panel__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--apacep-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--apacep-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button-icon,
body.woocommerce-checkout .wc-block-components-sidebar > .wc-block-components-panel .wc-block-components-panel__button-icon {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  color: var(--apacep-muted);
}

/* Divider + spacing only when the order-summary panel is expanded. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__content,
body.woocommerce-checkout .wc-block-components-sidebar > .wc-block-components-panel > .wc-block-components-panel__content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--apacep-border);
}

/* Coupon panel toggle — mirrors the cart's "¿TIENES UN CÓDIGO DE DESCUENTO? +"
   row so both surfaces share the same uppercase-tracked label and rotating
   plus glyph. The toggle spans the full panel width and the open state is
   carried by a trailing "+" that rotates 45° to "×".
   Recent WC ships `.wc-block-components-totals-coupon-link` for the toggle;
   older releases use `.wc-block-components-panel__button` inside the panel. */
body.woocommerce-checkout .wc-block-components-totals-coupon-link,
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.25rem 0;
  margin: 0;
  border: 0;
  background: transparent;
  font-family: var(--apacep-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--apacep-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}

body.woocommerce-checkout .wc-block-components-totals-coupon-link:hover,
body.woocommerce-checkout .wc-block-components-totals-coupon-link:focus-visible,
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover,
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:focus-visible {
  color: var(--apacep-teal);
  outline: none;
}

/* Trailing "+" glyph that rotates to "×" when expanded. Replaces the default
   chevron icon entirely so the affordance matches the cart's coupon toggle. */
body.woocommerce-checkout .wc-block-components-totals-coupon-link::after,
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button::after {
  content: "+";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--apacep-muted);
  transition: transform 200ms ease, color 150ms ease;
}

body.woocommerce-checkout .wc-block-components-totals-coupon-link[aria-expanded="true"]::after,
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button[aria-expanded="true"]::after {
  transform: rotate(45deg);
  color: var(--apacep-teal);
}

body.woocommerce-checkout .wc-block-components-totals-coupon-link:hover::after,
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover::after {
  color: var(--apacep-teal);
}

/* Hide the default chevron icon on the coupon toggle — the +/× glyph carries
   the open/closed state. */
body.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button-icon,
body.woocommerce-checkout .wc-block-components-totals-coupon-link svg {
  display: none;
}

/* Item row layout: force a clean 3-column flex (thumb / copy / total) so the
   default block grid can't allocate huge gutters around the thumbnail. The
   gap is tight on purpose — the sidebar column is narrow on laptop widths,
   so every horizontal pixel earned here goes back into the title column. */
body.woocommerce-checkout .wc-block-components-order-summary-item {
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--apacep-border);
  border-right: 0;
  position: relative;
}

body.woocommerce-checkout .wc-block-components-order-summary-item:first-child {
  padding-top: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item > * {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Thumbnail — fixed slim column, no padding, position relative so the qty
   badge can anchor to the corner. Slim enough that the title column keeps
   room to breathe at narrow laptop widths. */
body.woocommerce-checkout .wc-block-components-order-summary-item__image {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: auto;
  padding: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--apacep-teal-soft);
}

/* Description column: takes the remaining space and is allowed to shrink so
   long titles wrap on word boundaries instead of being squeezed by the
   default 50/50-style allocation. */
body.woocommerce-checkout .wc-block-components-order-summary-item__description {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
}

/* Force the description's own children to honour normal word boundaries so a
   title like "Leyendo con Cuentos" can't stack one word per line just because
   a parent set a tight word-break somewhere up the cascade. */
body.woocommerce-checkout .wc-block-components-order-summary-item__description > *,
body.woocommerce-checkout .wc-block-components-order-summary-item__description {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Quantity badge — hidden everywhere. The qty is now composed into the
   "{qty} × <price/>" unit-price line below each title (via the WC Blocks
   `subtotalPriceFormat` filter in `javascript/checkout-filters.js`), so the
   floating circle on the thumbnail is redundant noise on every viewport. */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
  display: none !important;
}

/* Title: smaller, no aggressive word-wrap, balanced line-height. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
  display: block;
  font-family: var(--apacep-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--apacep-ink);
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  margin: 0;
}

/* Per-item price under the title — kept visible because event tickets from
   mage-eventpress don't always emit a `__total-price` in the right column.
   Compact caption, single line, anchored right under the title. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
  display: block;
  margin: 0.15rem 0 0;
  font-family: var(--apacep-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--apacep-ink);
}

body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-price .wc-block-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices .wc-block-formatted-money-amount {
  color: var(--apacep-ink);
}

/* If the right-column total is rendered AND empty (no amount), collapse it so
   it doesn't claim horizontal width that would push the title to wrap word
   by word. */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price:empty {
  display: none;
}

/* Meta block (Date / Location / etc.): caption typography, comfortable line
   height. Allow the line to fill the column so long values flow naturally
   instead of fragmenting word-by-word. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-details {
  display: block;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--apacep-muted);
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
}

body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata strong,
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-details strong {
  color: var(--apacep-ink);
  font-weight: 600;
}

/* The mage-eventpress filter wraps everything inside a `dl.variation` with
   a `dt` that reads "Details Information:" — the same wrapper we hide on the
   cart side. Mirror that here so the meta block reads as clean icon rows
   instead of a wall of text. */
body.woocommerce-checkout .wc-block-components-order-summary-item dl.variation,
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-item-meta {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

body.woocommerce-checkout .wc-block-components-order-summary-item dl.variation dt,
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-item-meta strong {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item dl.variation dd,
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-item-meta li {
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item dl.variation dd > p {
  margin: 0;
}

/* event-custom-price list: same icon-row treatment used in the cart. The
   first row (Date) gets a calendar icon, the second (Location) gets a pin,
   and any subsequent rows (Hijos / tickets) get a user glyph. */
body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price > li {
  position: relative;
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--apacep-muted);
  background: none;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 0.85rem;
  height: 0.85rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F7D7E'><circle cx='8' cy='8' r='3'/></svg>");
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price > li:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230F7D7E'><path fill-rule='evenodd' d='M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zM4.75 5.5c-.69 0-1.25.56-1.25 1.25v1.5h13v-1.5c0-.69-.56-1.25-1.25-1.25H4.75zM16.5 9.75h-13v5.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-5.5z' clip-rule='evenodd'/></svg>");
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price > li:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230F7D7E'><path fill-rule='evenodd' d='M10 2a6 6 0 00-6 6c0 4.5 6 10 6 10s6-5.5 6-10a6 6 0 00-6-6zm0 8a2 2 0 110-4 2 2 0 010 4z' clip-rule='evenodd'/></svg>");
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price > li:nth-child(n+3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230F7D7E'><path fill-rule='evenodd' d='M10 9a3.5 3.5 0 100-7 3.5 3.5 0 000 7zm-7 8.5a7 7 0 1114 0v.25c0 .14-.11.25-.25.25H3.25A.25.25 0 013 17.75v-.25z' clip-rule='evenodd'/></svg>");
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price ul {
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--apacep-muted);
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price ul li {
  margin: 0;
  padding-left: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price ul li::before {
  display: none;
}

body.woocommerce-checkout .wc-block-components-order-summary-item .apacep-cart__children-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--apacep-muted);
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price > li p {
  display: inline;
  margin: 0;
  color: var(--apacep-muted);
}

body.woocommerce-checkout .wc-block-components-order-summary-item ul.event-custom-price > li .apacep-cart__children-label + p {
  display: block;
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Right-aligned total price — slim auto-width column on its own. */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: auto;
  padding-left: 0.5rem;
  font-family: var(--apacep-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--apacep-ink);
  white-space: nowrap;
}

/* Laptop breakpoint reflow — between 1024px and 1399px the right sidebar
   column is narrow enough that the default 3-col flex (thumb / desc / total)
   crams the title into 2-3 word fragments per line. Switch to a 2-col grid:

     row 1: image | title  (title spans the rest of the row)
     row 2: image | metadata / short description
     row 3: .     | unit (now "{qty} × <price/>")  ........  total

   The "qty × <price/>" string is produced by `subtotalPriceFormat` in
   `javascript/checkout-filters.js` — WC renders the result inside its own
   `__individual-prices` element, so currency / locale / tax-display all keep
   working. The floating qty bubble is hidden since the qty now lives in
   that composed line. `display: contents` on `__description` is the only
   wrapper-flatten we do — needed because `__individual-prices` is a
   description child but has to land in the math row of the outer grid. */
@media (min-width: 1024px) and (max-width: 1399px) {
  body.woocommerce-checkout .wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "img  title  title"
      "img  meta   meta"
      ".    math   total";
    column-gap: 0.6rem;
    row-gap: 0.35rem;
    align-items: baseline;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item__image {
    grid-area: img;
    align-self: start;
    flex: none;
    width: 44px;
    height: auto;
    margin-top: 0.15rem;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item__description {
    display: contents;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
    grid-area: title;
    min-width: 0;
    margin: 0;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-metadata,
  body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-details {
    grid-area: meta;
    min-width: 0;
    margin: 0;
  }

  /* "{qty} × <price/>" line — WC renders this inside `__individual-prices`
     when our `subtotalPriceFormat` filter prefixes the format string. The
     in-description `wc-block-components-product-price` covers the qty=1 case
     where WC falls back to a single product-price element instead of
     `__individual-prices`. Scoped to `__description` so the price WC nests
     inside `__total-price` doesn't pick up these rules. */
  body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
  body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-price {
    grid-area: math;
    align-self: baseline;
    justify-self: start;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--apacep-muted) !important;
    font-family: var(--apacep-font-sans);
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    line-height: 1.3;
    white-space: nowrap;
  }

  body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices .wc-block-formatted-money-amount,
  body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-price .wc-block-formatted-money-amount {
    color: var(--apacep-muted);
  }

  /* Line total — bold ink, larger than the muted "qty × price" expression on
     its left so it reads as the answer, not another caption. */
  body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
    grid-area: total;
    align-self: baseline;
    justify-self: end;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    font-family: var(--apacep-font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--apacep-ink) !important;
    white-space: nowrap;
  }
}

/* Coupon block — pill input on top, pill button below. The checkout sidebar
   column is too narrow to hold both side-by-side without crowding, so we
   stack them and make the button full-width. Both surfaces share the same
   pill shape so the coupon row reads consistent with the cart even though
   the layout differs. The button stays sentence-case "Aplicar" so both
   surfaces speak with the same voice.
   Checkout only — see classic cart styles above for [woocommerce_cart]. */
body.woocommerce-checkout .wc-block-components-totals-coupon__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

/* `ValidatedTextInput` lands `wc-block-components-text-input` AND
   `wc-block-components-totals-coupon__input` on the SAME wrapper div, not
   nested. So `.wc-block-components-totals-coupon__input` is the wrapper
   itself — descendant selectors against `.wc-block-components-text-input`
   never matched, which is why the WC default rectangular border + visible
   floating label leaked through. Style the wrapper directly here.
   `position: relative` anchors the floating label re-styled below. */
body.woocommerce-checkout .wc-block-components-totals-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;
}

/* Match WC's `[type="text"]` selector specificity and reset its top-heavy
   `padding: 18px 16px 4px` / inherited line-height so the typed value
   actually centers in the 2.5rem pill instead of hugging the top edge. */
body.woocommerce-checkout .wc-block-components-totals-coupon__input input[type="text"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.5rem;
  margin: 0;
  padding: 0 1rem;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-family: var(--apacep-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  color: var(--apacep-ink);
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  vertical-align: middle;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__input input[type="text"]::placeholder {
  color: var(--apacep-muted);
  opacity: 1;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__input input[type="text"]:focus {
  outline: none;
  border-color: var(--apacep-teal);
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.2);
}

/* WC blocks `TextInput` uses the <label> as a floating-label placeholder
   (not the HTML `placeholder` attribute), so hiding it leaves the input
   visually empty. Re-style the label as a static placeholder positioned
   inside the pill, then hide it once the field is focused or filled.
   WC adds `.is-active` to the wrapper when the input has focus or a value;
   `:focus-within` covers browsers/states where `is-active` lags. Use a
   descendant selector (no `>`) because some WC blocks releases wrap the
   label in an inner container. `transform: none` cancels WC's default
   floating-label translate/scale animation. */
body.woocommerce-checkout .wc-block-components-totals-coupon__input label {
  position: absolute;
  top: 50%;
  left: 1rem;
  right: 1rem;
  margin: 0;
  padding: 0;
  font-family: var(--apacep-font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  color: var(--apacep-muted);
  pointer-events: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  transform: translateY(-50%);
  transition: opacity 120ms ease;
  z-index: 1;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__input.is-active label,
body.woocommerce-checkout .wc-block-components-totals-coupon__input:focus-within label {
  opacity: 0;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.25rem;
  font-family: var(--apacep-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--apacep-ink);
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button:hover {
  border-color: var(--apacep-teal);
  color: var(--apacep-teal);
  background-color: rgb(15 125 126 / 0.06);
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button:focus-visible {
  outline: none;
  border-color: var(--apacep-teal);
  box-shadow: 0 0 0 3px rgb(15 125 126 / 0.2);
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form button.wc-block-components-totals-coupon__button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Totals stack at the bottom of the panel — match the cart sidebar. */
body.woocommerce-checkout .wc-block-components-totals-wrapper {
  border-top: 1px solid var(--apacep-border);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

body.woocommerce-checkout .wc-block-components-totals-wrapper:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

body.woocommerce-checkout .wc-block-components-totals-item {
  align-items: baseline;
  font-size: 0.95rem;
  color: var(--apacep-ink);
}

/* Mid-row labels (Subtotal, taxes, shipping) — uppercase tracked, muted, to
   echo the cart's `.cart_totals .shop_table th` treatment. */
body.woocommerce-checkout .wc-block-components-totals-item .wc-block-components-totals-item__label {
  font-family: var(--apacep-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apacep-muted);
}

body.woocommerce-checkout .wc-block-components-totals-item .wc-block-components-totals-item__value {
  font-weight: 700;
  color: var(--apacep-ink);
}

body.woocommerce-checkout .wc-block-components-totals-footer-item {
  font-size: 1.15rem;
  font-weight: 700;
}

/* The "Total" footer row gets a slightly larger uppercase label and the teal
   amount — same hierarchy the cart uses. */
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--apacep-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apacep-muted);
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  font-size: 1.25rem;
  color: var(--apacep-teal);
}