/* Hallmark · component: pagination · genre: playful · theme: existing Mickey Toys tokens
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (46–50)
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Hallmark · macrostructure: Ecosystem Index · tone: playful gift-shop · theme: Hum · nav: N7 · footer: Ft8 */
:root {
  --mt-paper: var(--color-paper);
  --mt-surface: #ffffff;
  --mt-ink: #172033;
  --mt-muted: #667085;
  --mt-line: #e7e5e4;
  --mt-brand: var(--color-pear);
  --mt-brand-dark: var(--color-ink);
  --mt-promo: var(--color-coral);
  --mt-promo-dark: var(--color-coral);
  --mt-whatsapp: #168a46;
  --mt-radius-card: 1.25rem;
  --mt-shadow-card: 0 12px 34px rgba(23, 32, 51, 0.08);
}

@layer base {
  html, body { overflow-x: clip; }
  body { background: var(--mt-paper); color: var(--color-ink); font-family: var(--font-body); }
}

@layer components {
  .admin-workspace-nav { border-bottom: 1px solid var(--mt-line); background: var(--color-paper-2); }
  .admin-workspace-nav__inner { display: flex; min-height: 3.5rem; align-items: center; gap: var(--space-lg); overflow-x: auto; }
  .admin-workspace-nav__label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .5rem; color: var(--color-ink); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
  .admin-workspace-nav__dot { width: .625rem; height: .625rem; border-radius: var(--radius-pill); background: var(--color-pear-deep); }
  .admin-workspace-nav__links { display: flex; align-items: center; gap: .25rem; min-width: max-content; }
  .admin-workspace-nav__link { display: inline-flex; min-height: 2.25rem; align-items: center; border-radius: .625rem; padding: 0 .75rem; color: var(--color-ink-muted); font-size: .875rem; font-weight: 700; white-space: nowrap; }
  .admin-workspace-nav__link:hover { background: var(--color-paper); color: var(--color-ink); }
  .admin-workspace-nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .admin-workspace-nav__link--active { background: var(--color-ink); color: var(--color-paper); }

  .admin-page-intro { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
  .admin-page-intro__eyebrow { margin-bottom: .25rem; color: var(--color-cyan); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
  .admin-page-intro h1 { color: var(--color-ink); font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
  .admin-page-intro p:not(.admin-page-intro__eyebrow) { margin-top: .5rem; color: var(--color-ink-muted); font-size: .9375rem; }
  .admin-list-primary-action { min-height: 2.75rem; padding: .625rem 1rem; }
  .admin-product-table { min-width: 56rem; color: var(--color-ink-muted); font-size: .9375rem; }
  .admin-product-table__header, .admin-product-row { display: grid; grid-template-columns: minmax(5rem, .7fr) minmax(16rem, 2fr) minmax(10rem, 1.1fr) minmax(6rem, .7fr) minmax(15rem, 1.3fr); align-items: center; column-gap: var(--space-md); }
  .admin-product-table__header { background: var(--color-paper-2); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
  .admin-product-table__header > div, .admin-product-row > div { min-width: 0; padding: 1rem; }
  .admin-product-row { border-top: 1px solid var(--mt-line); background: var(--mt-surface); }
  .admin-product-row:first-of-type { border-top: 0; }
  .admin-product-row__code { color: var(--color-ink-muted); font-family: var(--font-mono); font-size: .8125rem; }
  .admin-product-row__name { display: block; color: var(--color-ink); font-weight: 800; overflow-wrap: anywhere; }
  .admin-product-row__name:hover { color: var(--color-focus); text-decoration: underline; }
  .admin-product-row__summary p { display: -webkit-box; margin-top: .25rem; overflow: hidden; color: var(--color-ink-muted); font-size: .8125rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .admin-product-row__summary span { display: block; margin-top: .375rem; color: var(--color-ink-muted); font-size: .75rem; }
  .admin-product-row__category { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }
  .admin-status { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: .25rem .625rem; font-size: .75rem; font-weight: 800; white-space: nowrap; }
  .admin-status--active { background: var(--color-mint); color: var(--color-ink); }
  .admin-status--inactive { background: var(--color-paper-2); color: var(--color-ink-muted); }
  .admin-product-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
  .admin-row-action { display: inline-flex; min-height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--mt-line); border-radius: .625rem; padding: 0 .625rem; background: var(--mt-surface); color: var(--color-ink); font-size: .75rem; font-weight: 800; white-space: nowrap; }
  .admin-row-action:hover { border-color: var(--color-focus); color: var(--color-focus); }
  .admin-row-action:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .admin-row-action--danger { color: var(--color-coral); }
  .admin-row-action--success { color: var(--color-pear-deep); }
  .admin-product-page { min-height: calc(100dvh - 8rem); background: var(--color-paper); padding-block: var(--space-xl); }
  .admin-product-page__container { max-width: 80rem; }
  .admin-product-page__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
  .admin-product-page__back { color: var(--color-ink-muted); font-size: .875rem; font-weight: 800; white-space: nowrap; }
  .admin-product-page__back:hover { color: var(--color-focus); }
  .admin-product-page__actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
  .admin-product-page__danger-action { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--color-coral); border-radius: .75rem; padding: .625rem 1rem; background: var(--mt-surface); color: var(--color-coral); font-size: .875rem; font-weight: 800; white-space: nowrap; }
  .admin-product-page__danger-action:hover { background: var(--color-coral); color: var(--mt-surface); }
  .admin-product-page__danger-action:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .admin-product-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .42fr); gap: var(--space-xl); align-items: start; }
  .admin-product-page__content, .admin-product-page__details, .admin-product-page__prices > div { border: 1px solid var(--mt-line); border-radius: var(--radius-card); background: var(--mt-surface); box-shadow: var(--mt-shadow-card); }
  .admin-product-page__content { padding: var(--space-xl); }
  .admin-product-page__details { padding: var(--space-lg); }
  .admin-product-page__details h2 { color: var(--color-ink); font-size: 1rem; font-weight: 800; }
  .admin-product-page__details dl { margin-top: var(--space-md); }
  .admin-product-page__details dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-sm); border-top: 1px solid var(--mt-line); padding-block: .875rem; }
  .admin-product-page__details dt { color: var(--color-ink-muted); font-size: .8125rem; }
  .admin-product-page__details dd { min-width: 0; color: var(--color-ink); font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
  .admin-product-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
  .admin-product-gallery__item { overflow: hidden; border: 1px solid var(--mt-line); border-radius: .875rem; background: var(--color-paper-2); }
  .admin-product-gallery__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
  .admin-product-gallery__item figcaption { padding: .625rem .75rem; color: var(--color-ink); font-size: .8125rem; font-weight: 700; }
  .admin-product-gallery__empty { display: grid; grid-column: 1 / -1; place-items: center; gap: var(--space-md); min-height: 16rem; padding: var(--space-lg); border: 1px dashed var(--mt-line); border-radius: .875rem; color: var(--color-ink-muted); text-align: center; }
  .admin-product-gallery__empty img { width: 5rem; height: 5rem; object-fit: contain; }
  .admin-product-page__prices { margin-top: var(--space-xl); }
  .admin-user-profile { min-height: calc(100dvh - 8rem); background: var(--color-paper); padding-block: var(--space-xl); }
  .admin-user-profile__container { max-width: 72rem; }
  .admin-user-profile__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-xl); }
  .admin-user-profile__identity { display: flex; align-items: center; gap: var(--space-lg); border: 1px solid var(--mt-line); border-radius: var(--radius-card); background: var(--mt-surface); padding: var(--space-xl); box-shadow: var(--mt-shadow-card); }
  .admin-user-profile__avatar { display: flex; width: 5rem; height: 5rem; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; border-radius: 1.25rem; background: var(--color-pear); color: var(--color-ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; }
  .admin-user-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .admin-user-profile__identity h1 { min-width: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; overflow-wrap: anywhere; }
  .admin-user-profile__identity h1 + p { margin-top: .375rem; color: var(--color-ink-muted); overflow-wrap: anywhere; }
  .admin-user-profile__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-md); }
  .admin-user-profile__badge { display: inline-flex; min-height: 1.625rem; align-items: center; border: 1px solid var(--mt-line); border-radius: var(--radius-pill); padding: 0 .625rem; color: var(--color-ink-muted); font-size: .75rem; font-weight: 800; }
  .admin-user-profile__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
  .admin-user-profile__card { min-width: 0; border: 1px solid var(--mt-line); border-radius: var(--radius-card); background: var(--mt-surface); padding: var(--space-lg); box-shadow: var(--mt-shadow-card); }
  .admin-user-profile__card h2 { color: var(--color-ink); font-size: 1rem; font-weight: 800; }
  .admin-user-profile__card dl { margin-top: var(--space-md); }
  .admin-user-profile__card dl > div { border-top: 1px solid var(--mt-line); padding-block: .75rem; }
  .admin-user-profile__card dt { color: var(--color-ink-muted); font-size: .75rem; font-weight: 700; }
  .admin-user-profile__card dd { margin-top: .25rem; color: var(--color-ink); font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
  .admin-workspace-nav + section.bg-white { min-height: calc(100dvh - 8rem); background: var(--color-paper); padding-block: var(--space-xl); }
  .admin-workspace-nav + section.bg-white > div.max-w-2xl { border: 1px solid var(--mt-line); border-radius: var(--radius-card); background: var(--mt-surface); box-shadow: var(--mt-shadow-card); padding: var(--space-xl); }
  .admin-workspace-nav + section.bg-white h2 { color: var(--color-ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
  .admin-workspace-nav + section.bg-white form { margin-top: var(--space-lg); }
  .admin-workspace-nav + section.bg-white form label { display: block; color: var(--color-ink); font-weight: 700; }
  .admin-workspace-nav + section.bg-white form input:not([type="checkbox"]), .admin-workspace-nav + section.bg-white form select, .admin-workspace-nav + section.bg-white form textarea { min-height: 2.75rem; border-color: var(--mt-line); background: var(--color-paper); color: var(--color-ink); }
  .admin-workspace-nav + section.bg-white form input:focus, .admin-workspace-nav + section.bg-white form select:focus, .admin-workspace-nav + section.bg-white form textarea:focus { border-color: var(--color-focus); box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-focus); }
  .admin-workspace-nav + section.bg-white form input[type="submit"] { min-height: 2.75rem; border-radius: .75rem; background: var(--color-ink); color: var(--color-paper); font-weight: 800; box-shadow: 0 3px 0 var(--color-cyan); }
  .admin-workspace-nav + section.bg-white form input[type="submit"]:hover { transform: translateY(-1px); }
  .admin-workspace-nav + section.bg-white form input[type="submit"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

  @media (max-width: 47.99rem) {
    .admin-workspace-nav__inner { gap: var(--space-md); }
    .admin-workspace-nav__label { display: none; }
    .admin-page-intro { align-items: start; }
    .admin-page-intro h1 { font-size: 1.625rem; }
    .admin-product-page { padding-block: var(--space-lg); }
    .admin-product-page__topbar, .admin-product-page__actions { align-items: stretch; flex-direction: column; }
    .admin-product-page__actions > * { width: 100%; }
    .admin-product-page__layout { grid-template-columns: minmax(0, 1fr); }
    .admin-product-page__content { padding: var(--space-lg); }
    .admin-workspace-nav + section.bg-white { padding-block: var(--space-lg); }
    .admin-workspace-nav + section.bg-white > div.max-w-2xl { padding: var(--space-lg); }
    .admin-user-profile { padding-block: var(--space-lg); }
    .admin-user-profile__topbar { align-items: stretch; flex-direction: column; }
    .admin-user-profile__identity { align-items: flex-start; padding: var(--space-lg); }
    .admin-user-profile__identity h1 { font-size: 1.625rem; }
    .admin-user-profile__grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · admin workspace */
  section[data-controller~="search"] { background: var(--color-paper); min-height: calc(100dvh - 5rem); padding-block: 2rem; }
  section[data-controller~="search"] > div > div { border: 1px solid oklch(84% .02 95); border-radius: var(--radius-card); box-shadow: 0 12px 32px -20px oklch(20% .012 250 / .28); }
  section[data-controller~="search"] input[type="text"], section[data-controller~="search"] input[type="number"], section[data-controller~="search"] select { border-radius: .75rem; border-color: oklch(78% .02 95); background: var(--color-paper); min-height: 2.75rem; }
  section[data-controller~="search"] input:focus, section[data-controller~="search"] select:focus { border-color: var(--color-cyan); box-shadow: 0 0 0 3px oklch(66% .18 235 / .2); }
  section[data-controller~="search"] [data-tabs-target="tabs"] { border-radius: var(--radius-pill); padding: .6rem 1rem; }
  section[data-controller~="search"] a.bg-primary-700 { background: var(--color-ink); border-radius: var(--radius-pill); box-shadow: 0 3px 0 var(--color-cyan); white-space: nowrap; }
  section[data-controller~="search"] a.bg-primary-700:hover { transform: translateY(-1px); }
  section[data-controller~="search"] .overflow-x-auto > div > div:first-child { background: var(--color-paper-2); color: var(--color-ink-muted); font-family: var(--font-mono); letter-spacing: .06em; }

  .storefront-shell { background: var(--color-paper); }
  .storefront-container { @apply mx-auto w-full max-w-screen-xl px-4 sm:px-6 lg:px-8; }
  .storefront-heading { @apply font-bold tracking-tight; color: var(--color-ink); font-family: var(--font-display); overflow-wrap: anywhere; }
  .storefront-kicker { @apply text-sm font-semibold uppercase tracking-[0.16em]; color: var(--color-cyan); }
  .storefront-button { @apply inline-flex min-h-11 min-w-0 items-center justify-center whitespace-nowrap rounded-xl px-5 py-3 text-sm font-semibold transition focus:outline-none focus-visible:ring-4; }
  .storefront-button--primary { @apply focus-visible:ring-4; color: var(--color-ink); background: var(--color-pear); box-shadow: 0 4px 0 var(--color-pear-deep); }
  .storefront-button--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--color-pear-deep); }
  .storefront-button--primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-pear-deep); }
  .storefront-button--whatsapp { @apply gap-2 text-white focus-visible:ring-green-200; background: var(--mt-whatsapp); }
  .whatsapp-action__compact { display: none; }
  .storefront-button--whatsapp:hover { filter: brightness(.92); }
  .storefront-button--secondary { @apply border border-slate-200 bg-white text-slate-800 focus-visible:ring-slate-200; }
  .storefront-button--secondary:hover { @apply border-slate-300 bg-slate-50; }

  .product-card { @apply relative flex min-w-0 flex-col overflow-hidden bg-white; border: 1px solid oklch(84% .02 95); border-radius: var(--radius-card); box-shadow: 0 12px 32px -16px oklch(20% .012 250 / .22); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 220ms var(--ease-out); }
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px oklch(20% .012 250 / .28); }
  .product-card__image { @apply relative block aspect-square overflow-hidden bg-stone-100; }
  .product-card__image img { @apply h-full w-full object-cover transition duration-300; }
  .product-card:hover .product-card__image img { transform: scale(1.025); }
  .product-card__body { @apply flex flex-1 flex-col gap-3 p-4 sm:p-5; }
  .product-card__title { @apply min-h-[3rem] text-base font-bold leading-6 text-slate-900 sm:text-lg; }
  .product-card__meta { @apply text-sm text-slate-500; }

  .promotion-badge { @apply absolute left-3 top-3 z-10 inline-flex min-h-11 items-center rounded-xl px-3 text-sm font-extrabold text-white shadow-sm; background: var(--mt-promo); }
  .sale-price { @apply flex flex-wrap items-baseline gap-x-2 gap-y-1; }
  .sale-price__regular { @apply text-sm font-medium text-slate-400 line-through; }
  .sale-price__current { @apply text-xl font-extrabold text-slate-900; }
  .sale-price--detail .sale-price__current { @apply text-3xl; color: var(--mt-promo-dark); }
  .sale-price__saving { @apply w-full text-sm font-semibold; color: var(--mt-promo-dark); }

  .catalog-grid { @apply grid grid-cols-1 gap-4 sm:gap-5 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4; }
  .catalog-grid__frame { display: contents; }
  .catalog-section { @apply py-8 sm:py-12; }
  .catalog-section__header { @apply mb-6 flex flex-col gap-2 sm:mb-8; }
  .catalog-subcategory-nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  .price-option { @apply relative flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 p-4 transition; }
  .price-option:has(input:checked) { border-color: var(--mt-brand); box-shadow: 0 0 0 2px rgba(14,130,187,.16); }

  @media (max-width: 39.99rem) {
    .storefront-container { padding-inline: var(--space-md); }
    .catalog-section { padding-block: var(--space-lg); }
    .catalog-section__header { margin-bottom: var(--space-lg); }
    .product-card__body { gap: var(--space-md); padding: var(--space-md); }
    .product-card__title { min-height: 0; }
    .storefront-button--whatsapp img { flex: 0 0 auto; margin-right: 0 !important; }
    .whatsapp-action__full { display: none; }
    .whatsapp-action__compact { display: inline; }
    .catalog-subcategory-nav { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--space-md) * -1); padding: 0 var(--space-md) var(--space-sm); scrollbar-width: thin; }
    .catalog-subcategory-nav > * { flex: 0 0 auto; }
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Catalog pagination */
.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
}

.catalog-pagination__info {
  @apply text-sm font-normal text-gray-500;
}

.catalog-pagination__info strong {
  @apply font-semibold text-gray-900;
}

.catalog-pagination__mobile {
  display: none;
}

turbo-frame#custom_pagination {
  display: block;
  height: auto;
  min-height: 0;
}

.catalog-pagination__desktop,
.catalog-pagination__mobile {
  flex: 0 0 auto;
  height: 2.75rem;
}

.pagy-nav {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  gap: .125rem;
  width: max-content;
  min-height: 2.75rem;
  max-height: 2.75rem;
  height: 2.75rem;
  padding: .1875rem;
  border: 1px solid color-mix(in oklch, var(--color-ink) 14%, transparent);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  overflow: hidden;
  white-space: nowrap;
}

.pagy-nav .page,
.pagy-nav .page form {
  display: inline-flex;
  min-height: 2.25rem;
  max-height: 2.25rem;
  height: 100%;
}


/* Prev and Next disabled */
span.page.prev.disabled,
span.page.next.disabled {
  @apply flex items-center justify-center px-3 text-sm leading-tight;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-muted);
  cursor: not-allowed;
  opacity: .52;
}

span.page form button.prev {
  border-radius: var(--radius-pill);
}
/* Prev disabled */
span.page.prev.disabled {
  border-radius: var(--radius-pill);
}
span.page form button.next {
  border-radius: var(--radius-pill);
}
/* Next disabled */
span.page.next.disabled {
  border-radius: var(--radius-pill);
}

/* Active page */
span.page.active {
  @apply flex items-center justify-center px-3 text-sm font-extrabold leading-tight;
  min-width: 2.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-cyan);
  color: var(--color-paper);
  box-shadow: 0 2px 5px color-mix(in oklch, var(--color-cyan) 28%, transparent);
}

span.page.gap {
  @apply flex items-center justify-center px-2 text-sm leading-tight;
  border: 0;
  background: transparent;
  color: var(--color-ink-muted);
}

/* Page links */
.pagy-nav .page a,
.pagy-nav .page form button {
  @apply flex h-full items-center justify-center px-3 text-sm font-semibold leading-tight;
  min-width: 2.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink-muted);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out);
}

.pagy-nav .page a:focus-visible,
.pagy-nav .page form button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .pagy-nav .page a:hover,
  .pagy-nav .page form button:hover {
    background: var(--color-paper);
    color: var(--color-ink);
  }
}

.pagy-nav .page a:active,
.pagy-nav .page form button:active {
  transform: translateY(1px);
}

.pagy-nav [aria-busy="true"],
.pagy-nav [data-state="loading"] {
  cursor: progress;
  opacity: .7;
}

.pagy-nav [aria-invalid="true"],
.pagy-nav [data-state="error"] {
  outline: 2px solid var(--color-coral);
  outline-offset: 1px;
}

.pagy-nav [data-state="success"] {
  background: var(--color-mint);
  color: var(--color-ink);
}

/* Next page link */
.page.next a {
  border-radius: var(--radius-pill);
}

.page.prev a {
  border-radius: var(--radius-pill);
}

@media (max-width: 767px) {
  .catalog-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .catalog-pagination__info,
  .catalog-pagination__desktop {
    display: none;
  }

  .catalog-pagination__mobile {
    display: block;
  }
}

/* Slider css below */
.slider {
  width: 100%;
  height: 325px;
  padding-top: 14px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slider3 {
  width: 100%;
  height: 450px;
  padding-top: 14px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.slide-ana,
.slide-ana3 {
  height: 75vh;
}

.slide-ana > div,
.slide-ana3 > div {
  width: 100%;

  position: absolute;
  transition: all 1s;
}

@media (min-width: 320px) and (max-width: 1023px) {
  .slider {
      height: 450px;
  }
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Número de líneas a mostrar */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 4.5em; /* Ajustar según el número de líneas y el tamaño de la fuente */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.turbo-frame-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */
:root {
  --color-paper: oklch(97% 0.012 95); --color-paper-2: oklch(94% 0.016 95); --color-ink: oklch(20% 0.012 250);
  --color-ink-muted: oklch(44% 0.018 250); --color-pear: oklch(86% 0.18 95); --color-pear-deep: oklch(64% 0.16 95);
  --color-cyan: oklch(66% 0.18 235); --color-coral: oklch(68% 0.24 18); --color-mint: oklch(80% 0.16 150); --color-focus: oklch(54% 0.18 235);
  --font-display: "Plus Jakarta Sans", ui-sans-serif, sans-serif; --font-body: "Plus Jakarta Sans", ui-sans-serif, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-sm: .5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --radius-card: 1.25rem; --radius-pill: 999px;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.7,0,.84,0); --ease-in-out: cubic-bezier(.65,0,.35,1); --dur-short: 160ms;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */