/* ==========================================================================
   02 — COMPONENTS
   Buttons, cards, badges, marquee. Theme-agnostic; no Woo selectors here.
   Depends on: 00-tokens.css, 01-base.css
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

.mo-btn {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* touch target floor */
  padding: .625rem 1.875rem;     /* 30px inline, per reference */
  border: var(--mo-border-w) solid var(--mo-btn-bg);
  border-radius: var(--mo-radius);
  background: var(--mo-btn-bg);
  color: var(--mo-btn-text);
  font-family: var(--mo-font-body);
  font-size: .9375rem;           /* 15px */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .0667em;       /* 1px @15px */
  text-align: center;
  cursor: pointer;
  transition: background-color var(--mo-dur) var(--mo-ease),
              border-color var(--mo-dur) var(--mo-ease),
              color var(--mo-dur) var(--mo-ease);
}

.mo-btn:hover,
.mo-btn:focus-visible {
  background: var(--mo-btn-bg-hover);
  border-color: var(--mo-btn-bg-hover);
  color: var(--mo-btn-text);
}

.mo-btn--secondary {
  background: var(--mo-btn2-bg);
  border-color: currentColor;
  color: var(--mo-btn2-text);
}

.mo-btn--secondary:hover,
.mo-btn--secondary:focus-visible {
  background: var(--mo-green-700);
  border-color: var(--mo-green-700);
  color: var(--mo-white);
}

/* On photographic hero backdrops. */
.mo-btn--onmedia {
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
  color: var(--mo-green-700);
}

.mo-btn--onmedia:hover,
.mo-btn--onmedia:focus-visible {
  background: var(--mo-white);
  border-color: transparent;
  color: var(--mo-green-900);
}

/* --- Card ----------------------------------------------------------------- */
/* Shared shell for product and collection cards. */

.mo-card { position: relative; }

.mo-card__media {
  position: relative;
  overflow: hidden;
  border: var(--mo-border-w) solid var(--mo-border);
  border-radius: var(--mo-radius);
  aspect-ratio: 1 / 1;           /* reference uses square throughout */
  background: var(--mo-bg-alt);
}

.mo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mo-dur-l) var(--mo-ease);
}

.mo-card:hover .mo-card__media img { transform: scale(1.04); }

.mo-card__body { padding-top: .625rem; }

.mo-card__title {
  margin: 0 0 .25em;
  font-size: var(--mo-fs-h3);
  font-weight: var(--mo-fw-heading);
  line-height: 1.27;
  color: var(--mo-heading);
}

.mo-card__title a { color: inherit; }
.mo-card__title a:hover { color: var(--mo-green-700); }

/* Collection card trailing arrow. */
.mo-card__title--arrow::after {
  content: " \2192";
  display: inline-block;
  transition: transform var(--mo-dur) var(--mo-ease);
}

.mo-card:hover .mo-card__title--arrow::after { transform: translateX(4px); }

/* --- Price ---------------------------------------------------------------- */

.mo-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--mo-fs-small);
}

.mo-price__was {
  color: var(--mo-ink-muted);
  text-decoration: line-through;
}

.mo-price__now { color: var(--mo-heading); }

/* --- Badge ---------------------------------------------------------------- */

.mo-badge {
  position: absolute;
  bottom: .625rem;
  left: .625rem;
  z-index: 2;
  padding: .1875rem .5rem;
  border-radius: var(--mo-radius);
  background: var(--mo-white);
  color: var(--mo-heading);
  font-size: .6875rem;           /* 11px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mo-badge--sale { background: var(--mo-sale); color: var(--mo-white); }

/* --- Stars ---------------------------------------------------------------- */

.mo-stars {
  color: var(--mo-gold);
  font-size: .875rem;
  letter-spacing: .15em;
}

/* --- Announcement marquee ------------------------------------------------- */
/* Two identical tracks scrolling in tandem = seamless loop. Duplicate the
   .mo-marquee__track markup exactly, and mark the copy aria-hidden. */

.mo-marquee {
  overflow: hidden;
  background: var(--mo-green-700);
  color: var(--mo-cream);
  font-size: .75rem;
  letter-spacing: .06em;
  white-space: nowrap;
}

.mo-marquee__inner {
  display: flex;
  width: max-content;
  animation: mo-marquee-scroll 40s linear infinite;
}

.mo-marquee:hover .mo-marquee__inner { animation-play-state: paused; }

.mo-marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.mo-marquee__item { padding: .5rem 1.5rem; }

@keyframes mo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mo-marquee__inner { animation: none; }
  .mo-marquee { overflow-x: auto; }
}