/* ==========================================================================
   03 COMPONENTS :: buttons, tags, glass cards, marquee, accordion, inputs

   These classes are already written into the Elementor/Xpro JSON for every
   page (via the container `css_classes` / widget `_css_classes` controls).
   This file is the only place their appearance is defined -- edit here,
   not per-widget, and every page updates together.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */
.elementor-button,.elementor-button-link{
  border-radius:var(--r-pill) !important;
  font-family:var(--font-text); font-weight:700;
  transition:transform .3s var(--ease-out),background-color .25s var(--ease),box-shadow .3s var(--ease);
}
.elementor-button:active{ transform:scale(.96); }
.mh-btn-cta .elementor-button{
  background-image:linear-gradient(180deg,var(--cyan-300),var(--cyan-500));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 10px 30px rgba(34,211,238,.22);
}
.mh-btn-cta .elementor-button:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 16px 44px rgba(34,211,238,.34); }

/* --- Glass surfaces --------------------------------------------------------
   mh-panel = static card. mh-card = interactive card (hover lift). Elevation
   comes from the card's own 1px border, a complete rectangle correctly
   aligned at every width. (Removed: an inset top-seam accent that gave
   each card its own independently-centred fragment. Cards in this layout
   sit at different widths and x-positions -- the step cards, product grid,
   ladder cards -- so those fragments could never line up with each other
   or with anything else; they read as a broken, misaligned divider rather
   than an accent. The border alone is sufficient and always aligned.) */
.mh-panel,.mh-card{
  position:relative;
  transition:transform .45s var(--ease-out),border-color .35s var(--ease),background-color .35s var(--ease);
}
.mh-panel:hover,.mh-card:hover{
  transform:translateY(-5px);
  border-color:var(--line-2) !important;
  background-color:var(--glass-2) !important;
}
.e-con-full>.mh-panel:only-child{ height:100% !important; flex:1 1 auto !important; }

/* Best-seller card media + body ---------------------------------------------
   Every source photo has its own native aspect ratio (portrait/landscape
   mixed), which was making cards wildly different natural heights before
   the row's align-items:stretch kicked in -- the shortest cards stretched
   to match the tallest, leaving empty space stranded below the price row
   instead of anchored to the card's bottom edge. Fixed on both ends: lock
   every image to the same ratio, and pin the price row to the bottom. */
.mh-media{ position:relative; }
.mh-media img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
}
.mh-card{ height:100%; }
.mh-card__body{ display:flex; flex-direction:column; flex:1 1 auto; }
.mh-card__body .mh-card__divider{ margin-top:auto; }

/* Category chip-card */
.mh-cat{ transition:transform .35s var(--ease-out),border-color .3s var(--ease),background-color .3s var(--ease); }
.mh-cat:hover{
  transform:translateY(-3px);
  border-color:var(--cyan-400) !important;
  background-color:var(--cyan-soft) !important;
}
.mh-cat .elementor-icon-box-title{ margin:0; }
.mh-cat .elementor-icon-box-wrapper{ align-items:center; }

/* Licence tag pill -- amber marks a right you own, never an action */
.mh-tag{ display:inline-block !important; width:auto !important; align-self:flex-start !important; flex:0 0 auto !important; }
.mh-tag .elementor-heading-title{ display:inline-block; line-height:1.1; }

/* Step / stat cards on the resell + guide sections */
.mh-steps>.e-con{ align-self:stretch; }
.mh-steps .mh-panel{ height:100%; }

/* --- Marquee ---------------------------------------------------------------
   Native-widget marquee: an icon-list rendered as a horizontal strip, then
   this file supplies the infinite-scroll animation. The strip is duplicated
   in the markup so -50% loops seamlessly. */
.mh-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mh-marquee .elementor-icon-list-items{
  display:flex !important; flex-wrap:nowrap !important; gap:var(--s-3);
  width:max-content; animation:mh-marquee 46s linear infinite;
}
.mh-marquee:hover .elementor-icon-list-items{ animation-play-state:paused; }
@keyframes mh-marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.mh-marquee .elementor-icon-list-item{
  display:flex !important; align-items:center; gap:9px; white-space:nowrap;
  padding:10px 18px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--glass); color:var(--text-2); font-size:var(--t-xs); font-weight:600;
}
.mh-marquee .elementor-icon-list-item .elementor-icon-list-icon{ color:var(--cyan-400); }

/* --- Accordion -------------------------------------------------------------- */
.elementor-accordion .elementor-accordion-item{ border-color:var(--line) !important; }
.elementor-accordion .elementor-tab-content{ border-top-color:var(--line) !important; }
.elementor-icon-list-item:hover .elementor-icon-list-text{ color:var(--cyan-400) !important; }
.elementor-icon-list-text{ transition:color .2s var(--ease); }

/* --- Scroll reveal (paired with motion.js IntersectionObserver) ----------- */
.mh-reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); }
.mh-reveal.is-in{ opacity:1; transform:none; }
.mh-reveal-d1{ transition-delay:.07s; }
.mh-reveal-d2{ transition-delay:.14s; }
.mh-reveal-d3{ transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){
  .mh-reveal{ opacity:1; transform:none; transition:none; }
}

/* --- Inputs (Elementor-native contexts, e.g. any Search widget) ------------ */
.elementor-search-form__input{
  background:var(--ink-800) !important; color:var(--text) !important;
  border:1px solid var(--line) !important; border-radius:12px !important;
}