/* Buttons
   The base class controls shape, sizing and typography.
   Variants below only change color treatment. */
.ml-button,
a.button,
button.button,
input.button,
.add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit,
.ml-fresh-search .mls-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.68rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-sm);
  background: var(--ml-color-blue);
  color: var(--ml-color-white);
  box-shadow: var(--ml-shadow-button);
  font-size: var(--ml-button-font-size);
  font-weight: var(--ml-font-weight-black);
  line-height: 1;
  letter-spacing: 0.035em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--ml-transition-fast),
    border-color var(--ml-transition-fast),
    box-shadow var(--ml-transition-fast),
    color var(--ml-transition-fast),
    transform 0.06s ease;
}

.ml-button:hover,
.ml-button:focus-visible,
a.button:hover,
a.button:focus-visible,
button.button:hover,
button.button:focus-visible,
input.button:hover,
input.button:focus-visible,
.add_to_cart_button:hover,
.add_to_cart_button:focus-visible,
.woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover,
.woocommerce button.button:focus-visible,
.woocommerce input.button:hover,
.woocommerce input.button:focus-visible,
.ml-fresh-search .mls-form button:hover,
.ml-fresh-search .mls-form button:focus-visible {
  background: var(--ml-color-ink);
  color: var(--ml-color-white);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(18, 18, 18, 0.22);
}

.ml-button:active,
a.button:active,
button.button:active,
input.button:active,
.add_to_cart_button:active,
.ml-fresh-search .mls-form button:active {
  transform: translateY(1px);
}

.ml-button--primary,
.ml-button--cart,
.add_to_cart_button,
.product_type_simple {
  background: var(--ml-color-blue);
  color: var(--ml-color-white);
}

/* Red color variant: identical geometry and typography to the base button. */
.ml-button--red,
.ml-button--danger,
.ml-fresh-search .mls-form button {
  background: var(--ml-color-primary);
  color: var(--ml-color-white);
}

.ml-button--red:hover,
.ml-button--red:focus-visible,
.ml-button--danger:hover,
.ml-button--danger:focus-visible,
.ml-fresh-search .mls-form button:hover,
.ml-fresh-search .mls-form button:focus-visible {
  background: var(--ml-color-primary-dark);
  color: var(--ml-color-white);
}

.ml-button--secondary,
.ml-button--details,
.button.details,
.product-title-link.details,
.woocommerce a.button.details {
  border-color: var(--ml-color-ink);
  background: transparent;
  color: var(--ml-color-ink);
  box-shadow: none;
}

.ml-button--secondary:hover,
.ml-button--secondary:focus-visible,
.ml-button--details:hover,
.ml-button--details:focus-visible,
.button.details:hover,
.button.details:focus-visible,
.product-title-link.details:hover,
.product-title-link.details:focus-visible,
.woocommerce a.button.details:hover,
.woocommerce a.button.details:focus-visible {
  border-color: var(--ml-color-ink);
  background: var(--ml-color-ink);
  color: var(--ml-color-white);
  box-shadow: none;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ml-color-border-strong);
  border-radius: var(--ml-radius-sm);
  background: var(--ml-color-white);
  color: var(--ml-color-ink);
  font-size: var(--ml-font-size-base);
  line-height: 1.35;
  transition:
    border-color var(--ml-transition-fast),
    box-shadow var(--ml-transition-fast);
}

textarea,
.woocommerce form .form-row textarea {
  min-height: 8rem;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--ml-color-blue);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(52, 89, 149, 0.14);
}

label {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: var(--ml-color-ink);
  font-weight: var(--ml-font-weight-bold);
}

fieldset {
  margin: 0;
  padding: var(--ml-space-5);
  border: 1px solid var(--ml-color-border);
  border-radius: var(--ml-radius-md);
}

legend {
  padding-inline: var(--ml-space-2);
  color: var(--ml-color-ink);
  font-weight: var(--ml-font-weight-bold);
}

/* Sections */
.ml-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: clamp(1.4rem, 2.6vw, 2.8rem);
  padding-bottom: clamp(1.4rem, 2.6vw, 2.8rem);
  border-bottom: 1px solid var(--ml-color-border);
}

.ml-section:last-child {
  margin-bottom: 0;
}

.ml-section__header,
.ml-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.25rem, 0.6vw, 0.5rem);
  width: 100%;
  margin-bottom: clamp(0.55rem, 1.25vw, 1.05rem);
}

.ml-section__title,
.ml-section-title {
  margin: 0 0 clamp(0.35rem, 0.85vw, 0.75rem);
  color: var(--ml-color-ink);
  font-size: var(--ml-font-size-xl);
  font-weight: var(--ml-font-weight-regular);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.ml-section__intro,
.ml-section-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin-bottom: clamp(0.55rem, 1.25vw, 1rem);
}

.ml-section__description,
.ml-section-description {
  position: relative;
  margin: 0;
  font-size: clamp(0.82rem, 0.78rem + 0.18vw, 0.95rem);
  line-height: 1.35;
}

.ml-section__description::before {
  content: "#";
  margin-right: 0.25rem;
  color: var(--ml-color-primary);
  font-weight: var(--ml-font-weight-black);
}

/* Search */
.mls-form,
#primary .mls-form {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  margin: 1.5rem 0 1rem;
}

.mls-form input[type="search"],
#primary .mls-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  border-radius: var(--ml-radius-sm);
}

.mls-form button,
#primary .mls-form button {
  min-height: 3rem;
  padding-inline: 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-sm);
  font-size: var(--ml-button-font-size);
}

#inner-content.ml-content-product_container .mls-form input[type="search"],
#inner-content.ml-content-product_container .mls-form button {
  height: 3rem;
  min-height: 3rem;
}

#inner-content.ml-content-product_container .mls-form button {
  align-self: stretch;
  padding-block: 0;
}

/* The WooCommerce shop archive uses archive-product.php instead of page-shop.php. */
.ml-shop-search-form {
  align-items: stretch;
}

.ml-shop-search-form > input[type="search"],
.ml-shop-search-form > button[type="submit"] {
  box-sizing: border-box;
  height: 3rem;
  min-height: 3rem;
  max-height: 3rem;
  margin-block: 0;
}

.ml-shop-search-form > button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding-block: 0;
  line-height: 1;
}

/* The Friss beérkezés search uses the reusable red button variant,
   but keeps the exact base-button geometry instead of the pill search style. */
.ml-fresh-search .mls-form {
  align-items: center;
}

.ml-fresh-search .mls-form button {
  min-height: 2.35rem;
  padding: 0.68rem 1rem;
  border-radius: var(--ml-radius-sm);
}

.mls-hint {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--ml-space-5);
  padding: 1rem 1.1rem;
  border: 1px solid rgba(52, 89, 149, 0.24);
  border-left: 5px solid var(--ml-color-blue);
  border-radius: 0 var(--ml-radius-sm) var(--ml-radius-sm) 0;
  background: #f1f5fb;
  color: var(--ml-color-ink);
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.12rem);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.4;
}

.mls-hint strong {
  color: var(--ml-color-blue);
  font-weight: var(--ml-font-weight-black);
}

.mls-hint.mls-hint--empty {
  border-color: #edc0c4;
  border-left-color: var(--ml-color-primary);
  background: #fff1f2;
  color: #8d1c28;
}

/* Badges */
.mls-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0.5rem 0 1.5rem;
}

.mls-badges > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mls-badge,
.ml-badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-color-primary);
  color: var(--ml-color-white);
  font-size: var(--ml-button-font-size);
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.mls-badge:hover,
.mls-badge:focus-visible,
.ml-badge:hover,
.ml-badge:focus-visible {
  background: var(--ml-color-ink);
  color: var(--ml-color-white);
}

.mls-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  margin-left: 0.15rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ml-color-blue);
  border-radius: var(--ml-radius-pill);
  background: var(--ml-color-blue);
  color: var(--ml-color-white);
  box-shadow: var(--ml-shadow-button);
  font-size: var(--ml-button-font-size);
  font-weight: var(--ml-font-weight-black);
  line-height: 1.2;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--ml-transition-fast),
    border-color var(--ml-transition-fast),
    box-shadow var(--ml-transition-fast),
    color var(--ml-transition-fast);
}

.mls-clear:hover,
.mls-clear:focus-visible {
  border-color: var(--ml-color-ink);
  background: var(--ml-color-ink);
  color: var(--ml-color-white);
  box-shadow: 0 8px 18px rgba(18, 18, 18, 0.2);
}

/* View toggle */
.ml-view-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.ml-view-toggle-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 4.8rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--ml-color-primary);
  border-radius: var(--ml-radius-sm);
  background: var(--ml-color-white);
  color: var(--ml-color-ink);
  font-size: 1.1rem;
  font-weight: var(--ml-font-weight-bold);
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color var(--ml-transition-fast),
    color var(--ml-transition-fast),
    box-shadow var(--ml-transition-fast);
}

.mls-results-controls {
  margin-bottom: 1.5rem;
}

body.search #primary .mls-results-controls + p,
body.search #primary .mls-no-results {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--ml-space-5);
  padding: 1rem 1.1rem;
  border: 1px solid #edc0c4;
  border-left: 5px solid var(--ml-color-primary);
  border-radius: 0 var(--ml-radius-sm) var(--ml-radius-sm) 0;
  background: #fff1f2;
  color: #8d1c28;
  font-weight: var(--ml-font-weight-bold);
  line-height: 1.4;
  box-shadow: var(--ml-shadow-sm);
}

.ml-view-toggle-btn:hover,
.ml-view-toggle-btn:focus-visible {
  background: var(--ml-color-ink);
  color: var(--ml-color-white);
}

.ml-view-toggle-btn.is-active {
  background: var(--ml-color-primary);
  color: var(--ml-color-white);
  box-shadow: 0 6px 12px rgba(18, 18, 18, 0.16);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.ml-notice {
  position: relative;
  margin: 0 0 var(--ml-space-5);
  padding: 1rem 1.1rem;
  border: 1px solid var(--ml-color-border);
  border-left-width: 5px;
  border-radius: var(--ml-radius-sm);
  background: var(--ml-color-surface-soft);
  color: var(--ml-color-ink);
  line-height: 1.4;
  list-style: none;
}

.woocommerce-message,
.ml-notice--success {
  border-left-color: var(--ml-color-blue);
}

.woocommerce-info,
.ml-notice--info {
  border-left-color: var(--ml-color-accent);
}

.woocommerce-error,
.ml-notice--error {
  border-left-color: var(--ml-color-primary);
}

/* Pagination */
.ml-shop-pagination,
.woocommerce nav.woocommerce-pagination,
.mls-pager,
.scaffolding-page-navi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 2rem 0;
  color: var(--ml-color-muted);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers > li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.ml-shop-pagination :is(a, span).page-numbers,
.mls-pager :is(a, span).page-numbers,
.scaffolding-page-navi :is(a, span).page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ml-color-border);
  border-radius: var(--ml-radius-sm);
  background: var(--ml-color-white);
  color: var(--ml-color-ink);
  font-size: var(--ml-button-font-size);
  font-weight: var(--ml-font-weight-bold);
  text-decoration: none;
}

.ml-shop-pagination :is(a, span).page-numbers:hover,
.ml-shop-pagination :is(a, span).page-numbers:focus-visible,
.ml-shop-pagination :is(a, span).page-numbers.current,
.mls-pager :is(a, span).page-numbers:hover,
.mls-pager :is(a, span).page-numbers:focus-visible,
.mls-pager :is(a, span).page-numbers.current,
.scaffolding-page-navi :is(a, span).page-numbers:hover,
.scaffolding-page-navi :is(a, span).page-numbers:focus-visible,
.scaffolding-page-navi :is(a, span).page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus-visible,
.woocommerce nav.woocommerce-pagination ul li span.current {
  border-color: var(--ml-color-primary);
  background: var(--ml-color-primary);
  color: var(--ml-color-white);
}

/* Loader */
#ml-loader {
  width: 100%;
  padding: var(--ml-space-6);
  text-align: center;
}

.ml-spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto;
  border: 3px solid var(--ml-color-border);
  border-top-color: var(--ml-color-primary);
  border-radius: 50%;
  animation: ml-spin 0.8s linear infinite;
}

@keyframes ml-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 575.98px) {
  .mls-form,
  #primary .mls-form {
    flex-direction: column;
  }

  .mls-form input[type="search"],
  .mls-form button,
  #primary .mls-form input[type="search"],
  #primary .mls-form button {
    width: 100%;
  }

  .ml-view-toggle {
    width: 100%;
  }

  .ml-view-toggle-btn {
    flex: 1 1 0;
  }
}