/** Shopify CDN: Minification failed

Line 4710:8 Expected identifier but found whitespace
Line 4710:10 Unexpected "{"
Line 4710:19 Expected ":"
Line 4716:8 Expected identifier but found whitespace
Line 4716:10 Unexpected "{"
Line 4716:19 Expected ":"

**/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800;900&display=swap');

/* =============================================
   LAYOUT BASE
============================================= */

.hm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.hm-hero,
.hm-about,
.hm-products,
.hm-testimonials,
.hm-benefits,
.hm-cta {
  padding: 88px 0;
}

/* =============================================
   HERO
============================================= */

.hm-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(0,0,0,.04), transparent 32%),
    radial-gradient(circle at bottom right, rgba(0,0,0,.05), transparent 30%);
}

.hm-hero__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.hm-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  margin-bottom: 22px;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #111;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}

.hm-hero h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 72px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #111;
}

.hm-hero p {
  max-width: 760px;
  margin: 22px auto 0;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(17,17,17,.72);
}

.hm-hero__actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =============================================
   BUTTONS
============================================= */

.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 800;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.hm-btn:hover { transform: translateY(-2px); }

.hm-btn--primary {
  background: #111;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}

.hm-btn--secondary {
  background: #fff;
  color: #111;
  border: 1px solid #dfdfdf;
}

/* =============================================
   PRODUCTS
============================================= */

.hm-products { background: #fafafa; }

.hm-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}

.hm-section-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #111;
}

.hm-currency {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.hm-currency__btn {
  appearance: none;
  border: 0;
  background: transparent;
  min-width: 72px;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  color: #111;
  transition: background .18s ease, color .18s ease;
}

.hm-currency__btn.is-active {
  background: #111;
  color: #fff;
}

.hm-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.hm-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px;
  border: 1px solid #ececec;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hm-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  border-color: #e3e3e3;
}

.hm-product-card img {
  width: 100%;
  display: block;
  aspect-ratio: 1.15 / 1;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 16px;
}

.hm-product-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
  color: #111;
}

.hm-product-desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(17,17,17,.68);
}

.hm-product-price-wrap {
  margin-top: auto;
  margin-bottom: 18px;
}

.hm-product-price {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #111;
}

.hm-product-card.is-featured {
  border: 2px solid #111;
  transform: scale(1.03);
  box-shadow: 0 25px 70px rgba(0,0,0,.12);
}

.hm-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* =============================================
   SECTIONS: ABOUT, TESTIMONIALS, BENEFITS, CTA
============================================= */

.hm-about h2,
.hm-testimonials h2,
.hm-benefits h2,
.hm-cta h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.03em;
}

.hm-about__text {
  max-width: 820px;
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(17,17,17,.72);
}

.hm-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.hm-benefit-item {
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #eee;
}

.hm-benefit-icon {
  font-size: 26px;
  margin-bottom: 10px;
}

.hm-benefit-item h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}

.hm-benefit-item p {
  margin: 0;
  font-size: 14px;
  opacity: .7;
}

.hm-cta-box {
  text-align: center;
  padding: 60px 30px;
  border-radius: 24px;
  background: #111;
  color: #fff;
}

.hm-cta-box h2 { margin: 0; font-size: 36px; }

.hm-cta-box p {
  margin: 15px auto 25px;
  max-width: 600px;
  opacity: .8;
}

/* =============================================
   DEMO SECTION
============================================= */

.hm-demo-section { padding: 88px 0; }

.hm-demo-card {
  border: 1px solid #d8d8d8;
  border-radius: 28px;
  padding: 34px 30px 20px;
  background: #f7f7f7;
}

.hm-demo-title {
  margin: 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: #111;
}

.hm-demo-title span { display: inline-block; margin-left: 8px; }

.hm-demo-text {
  max-width: 1080px;
  margin: 24px 0 34px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(17,17,17,.88);
}

.hm-mockup { position: relative; width: 100%; margin: auto; }
.hm-mockup-img { width: 100%; height: auto; display: block; }

.hm-mockup-screen {
  position: absolute;
  overflow: hidden;
  background: #000;
}

.hm-mockup-screen iframe { width: 100%; height: 100%; border: 0; }

.hm-mockup--laptop { max-width: 1300px; }

.hm-mockup-screen--laptop {
  left: 12.868%;
  top: 6.293%;
  width: 73.867%;
  height: 76.593%;
  border-radius: 14px;
}

.hm-mockup--phone { display: none; }

/* =============================================
   REVIEWS
============================================= */

.hmrev-section {
  background: transparent;
  padding: 90px 0;
}

.hmrev-head { margin-bottom: 50px; }

.hmrev-title {
  margin: 0 0 12px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #0c0c0c;
  font-weight: 900;
}

.hmrev-sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #111;
  font-weight: 500;
}

.hmrev-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hmrev-card {
  width: min(560px, 92%);
  display: block;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.07);
  opacity: 0;
  transform: translateY(55px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

.hmrev-card:nth-child(odd)  { align-self: flex-start; }
.hmrev-card:nth-child(even) { align-self: flex-end; }
.hmrev-card.is-visible { opacity: 1; transform: translateY(0); }

/* =============================================
   SHARED APP SHELL — SIDEBAR PATTERN
   Used by: .hmdb, .hmcl, .hmrs, .hmmem, .hmtr
============================================= */

/* Background shapes */
.hmdb, .hmcl, .hmmem, .hmrs {
  position: relative;
  overflow: hidden;
  background: #ececec;
  font-family: "DM Sans", sans-serif;
  padding: 28px 0;
}

/* Each section keeps its own bg-shape classes since colors vary,
   but the shape structure is shared */
.hmdb-bg-shape,
.hmcl-bg-shape,
.hmmem-bg-shape {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .45;
  pointer-events: none;
}

/* Shell: sidebar + main grid */
.hmdb-shell,
.hmcl-shell,
.hmmem-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Sidebar */
.hmdb-sidebar,
.hmcl-sidebar,
.hmmem-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 18px;
  border-radius: 28px;
  background: #0d0d0f;
  color: #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,.2);
}

.hmdb-sidebar { position: sticky; top: 20px; min-height: calc(100vh - 40px); }
.hmcl-sidebar { position: sticky; top: 20px; min-height: calc(100vh - 40px); }

.hmmem-sidebar {
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  overflow: auto;
}

/* Logo */
.hmdb-logo,
.hmcl-logo,
.hmmem-logo {
  display: block;
  max-width: 150px;
}

.hmdb-logo-fallback,
.hmcl-logo-fallback,
.hmmem-logo-fallback {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.03em;
}

/* Userbox */
.hmdb-userbox,
.hmcl-userbox,
.hmmem-userbox {
  margin-top: 18px;
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
}

.hmdb-userbox__eyebrow,
.hmcl-userbox__eyebrow,
.hmmem-userbox__eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,.56);
}

.hmdb-userbox__name,
.hmcl-userbox__name,
.hmmem-userbox__name {
  font-size: 30px;
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff;
}

/* Nav */
.hmdb-nav,
.hmcl-nav,
.hmmem-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.hmdb-nav__item,
.hmcl-nav__item,
.hmmem-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: .18s ease;
}

.hmdb-nav__item:hover, .hmdb-nav__item.is-active,
.hmcl-nav__item:hover, .hmcl-nav__item.is-active,
.hmmem-nav__item:hover, .hmmem-nav__item.is-active {
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

.hmdb-nav__emoji,
.hmcl-nav__emoji,
.hmmem-nav__emoji {
  font-size: 18px;
}

/* Sidebar footer */
.hmdb-sidebar__footer,
.hmcl-sidebar__footer,
.hmmem-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hmdb-manage, .hmdb-logout,
.hmcl-manage, .hmcl-logout,
.hmmem-manage, .hmmem-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
}

/* Main content area */
.hmdb-main,
.hmcl-main,
.hmmem-main { min-width: 0; }

/* =============================================
   DASHBOARD (hmdb)
============================================= */

.hmdb-bg-shape--1 { width: 320px; height: 320px; top: -80px; left: -60px; background: rgba(255,255,255,.9); }
.hmdb-bg-shape--2 { width: 280px; height: 280px; right: -60px; bottom: -40px; background: rgba(210,210,210,.9); }

.hmdb-float {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: .95;
  animation: hmdbFloat 6s ease-in-out infinite;
}

.hmdb-float--1 { width: var(--hmdb-float-1-width, 180px); top: 120px; right: 6%; transform: rotate(-10deg); }
.hmdb-float--2 { width: var(--hmdb-float-2-width, 180px); bottom: 90px; left: 4%; transform: rotate(10deg); animation-delay: 1.5s; }

@keyframes hmdbFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}

.hmdb-hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 22px;
}

.hmdb-hero__copy,
.hmdb-hero__visual {
  border-radius: 30px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}

.hmdb-hero__copy { padding: 34px; }

.hmdb-hero__visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 320px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(245,245,245,.9));
}

.hmdb-hero__visual::after {
  content: "";
  position: absolute;
  inset: auto -30px -30px auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  filter: blur(20px);
}

.hmdb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e8e8e8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmdb-title {
  margin: 18px 0 0;
  font-size: clamp(30px, 3.3vw, 52px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #111;
}

.hmdb-subtitle {
  max-width: 720px;
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(17,17,17,.72);
}

.hmdb-hero__actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

.hmdb-hero__image {
  max-width: 100%;
  max-height: 100%;
  display: block;
  animation: hmdbSoftFloat 5.5s ease-in-out infinite;
}

.hmdb-hero__emoji-cloud {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  font-size: 52px;
}

.hmdb-hero__emoji-cloud span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.07);
  animation: hmdbSoftFloat 5s ease-in-out infinite;
}

.hmdb-hero__emoji-cloud span:nth-child(2) { animation-delay: .7s; }
.hmdb-hero__emoji-cloud span:nth-child(3) { animation-delay: 1.1s; }
.hmdb-hero__emoji-cloud span:nth-child(4) { animation-delay: 1.7s; }

@keyframes hmdbSoftFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.hmdb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.hmdb-card {
  padding: 26px;
  border-radius: 28px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hmdb-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(0,0,0,.08); }

.hmdb-card--wide {
  grid-column: span 2;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
}

.hmdb-card__top { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }

.hmdb-card__eyebrow {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,17,17,.52);
}

.hmdb-card h2 { margin: 0; font-size: 28px; line-height: 1; letter-spacing: -.04em; font-weight: 900; color: #111; }
.hmdb-card p  { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(17,17,17,.72); }
.hmdb-card__emoji { font-size: 34px; }

.hmdb-inline-link { display: inline-block; margin-top: 18px; font-weight: 800; color: #111; text-decoration: none; }

.hmdb-quicklinks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.hmdb-quicklinks__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 0 18px;
  border-radius: 20px;
  background: #fff;
  color: #111;
  text-decoration: none;
  border: 1px solid #ececec;
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
  transition: .18s ease;
}

.hmdb-quicklinks__item:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.07); }

.hmdb-purchases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.hmdb-purchase {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #ececec;
  text-decoration: none;
  color: #111;
  transition: transform .18s ease, box-shadow .18s ease;
}

.hmdb-purchase:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }

.hmdb-purchase img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; display: block; }

.hmdb-purchase__badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmdb-purchase h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.1; font-weight: 800; }
.hmdb-purchase p  { font-size: 14px; line-height: 1.55; }

/* Dashboard app shell */
.hmdb-app {
  height: 100vh;
  min-height: 100vh;
  padding: 0 !important;
  background: #ececec;
}

.hmdb-app .hm-container { max-width: none; width: 100%; padding: 0 18px; }

.hmdb-shell--app {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  height: 100vh;
  align-items: stretch;
  padding: 18px 0;
}

.hmdb-sidebar--fixed {
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 28px;
  padding: 18px 14px;
  scrollbar-width: thin;
}

.hmdb-sidebar--fixed::-webkit-scrollbar { width: 8px; }
.hmdb-sidebar--fixed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }

.hmdb-sidebar__inner { display: flex; flex-direction: column; min-height: max-content; }
.hmdb-sidebar__footer {
  margin-top: 18px;
  padding-top: 18px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #0d0d0f 78%, rgba(13,13,15,0));
}

.hmdb-main--app {
  min-width: 0;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  scrollbar-width: thin;
}

.hmdb-main--app::-webkit-scrollbar { width: 8px; }
.hmdb-main--app::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 999px; }

/* Dashboard grid */
.hmdb-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "welcome   calendar"
    "playlist  membership"
    "resources membership";
  gap: 20px;
  align-items: start;
  padding-bottom: 18px;
}

.hmdb-welcome,
.hmdb-calendar-card,
.hmdb-playlist-card,
.hmdb-membership-card,
.hmdb-resources-card {
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.hmdb-welcome       { grid-area: welcome;     background: #68a35b; color: #fff; padding: 34px 28px; }
.hmdb-calendar-card { grid-area: calendar;    padding: 16px; }
.hmdb-playlist-card { grid-area: playlist;    padding: 22px 24px; }
.hmdb-resources-card{ grid-area: resources;   padding: 22px 24px; }

.hmdb-membership-card {
  grid-area: membership;
  align-self: start;
  padding: 22px 20px;
  min-height: 0px !important;
}

.hmdb-welcome__eyebrow {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

.hmdb-welcome__title {
  margin: 0;
  font-size: clamp(34px, 3.2vw, 56px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #fff;
}

.hmdb-welcome__text {
  margin: 14px 0 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}

.hmdb-block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.hmdb-block-head h2 { margin: 0; font-size: 22px; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; color: #111; }
.hmdb-block-icon { font-size: 40px; line-height: 1; }

.hmdb-playlist-card p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(17,17,17,.68); }
.hmdb-playlist-actions { margin-top: 18px; }

.hmdb-inline-btn {
  appearance: none;
  border: 0;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: #efe1d8;
  color: #111;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}

.hmdb-inline-btn:hover { transform: translateY(-1px); }

.hmdb-membership-card h3 { margin: 0 0 12px; font-size: 34px; line-height: .96; font-weight: 900; letter-spacing: -.04em; color: #111; }
.hmdb-membership-card p  { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(17,17,17,.7); }

/* Carousel */
.hm-carousel-wrap { position: relative; width: 100%; min-width: 0; }

.hm-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 8px;
  scroll-snap-type: x mandatory;
}

.hm-carousel::-webkit-scrollbar { display: none; }

.hm-card {
  flex: 0 0 auto;
  width: 292px;
  background: #fff;
  border-radius: 22px;
  text-decoration: none;
  color: #111;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
  scroll-snap-align: start;
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease;
}

.hm-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 34px rgba(0,0,0,.12); }

.hm-card__media { aspect-ratio: 16/9; }
.hm-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s ease;
}
.hm-card:hover .hm-card__media img { transform: scale(1.06) translateY(-3px); }

.hm-card__body { padding: 16px; }

.hm-tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f25116;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  margin-top: -18px;
}

.hm-card h4 { margin: 12px 0 6px; font-size: 1.05rem; }
.hm-card p  { margin: 0; font-size: .9rem; opacity: .72; }

.hm-controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.hmdb-app .hm-btn {
  width: 42px; min-width: 42px; height: 42px; min-height: 42px;
  padding: 0; border-radius: 999px; border: none;
  background: #fff; cursor: pointer; font-size: 20px; color: #111;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.hmdb-resources-card .hm-card { width: 280px; }

/* Mobile toggle */
.hmdb-mobile-toggle { display: none; }

/* Hide Shopify header/footer */
body:has(.hmdb) .shopify-section-group-header-group,
body:has(.hmdb) .shopify-section-group-footer-group,
body:has(.hmdb-app) .shopify-section-group-header-group,
body:has(.hmdb-app) .shopify-section-group-footer-group {
  display: none !important;
}

/* =============================================
   CLASSES APP (hmcl)
============================================= */

.hmcl-bg-shape--1 { width: 320px; height: 320px; top: -80px; left: -60px; background: rgba(255,255,255,.9); }
.hmcl-bg-shape--2 { width: 260px; height: 260px; right: -40px; bottom: -30px; background: rgba(210,210,210,.9); }

.hmcl-app {
  height: 100vh;
  min-height: 100vh;
  padding: 0 !important;
}

.hmcl-app .hm-container { max-width: none; width: 100%; padding: 0 18px; }

.hmcl-shell--app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  height: 100vh;
  align-items: stretch;
  padding: 18px 0;
}

.hmcl-sidebar--fixed {
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 16px;
  border-radius: 28px;
  scrollbar-width: thin;
}

.hmcl-sidebar--fixed::-webkit-scrollbar { width: 8px; }
.hmcl-sidebar--fixed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.hmcl-sidebar__inner { min-height: max-content; }

.hmcl-main--app {
  min-width: 0;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 22px 0;
  scrollbar-width: thin;
}

.hmcl-main--app::-webkit-scrollbar { width: 8px; }
.hmcl-main--app::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 999px; }

.hmcl-hero {
  padding: 30px;
  margin-bottom: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}

.hmcl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e8e8e8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmcl-title {
  margin: 16px 0 0;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #111;
}

.hmcl-subtitle {
  max-width: 820px;
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(17,17,17,.72);
}

.hmcl-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.hmcl-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid #ececec;
  font-weight: 700;
  color: #111;
}

.hmcl-tab.is-active { background: #111; color: #fff; }

.hmcl-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
  padding: 22px;
  margin-bottom: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}

.hmcl-featured__copy { padding: 12px 8px; }

.hmcl-featured__eyebrow {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,17,17,.52);
}

.hmcl-featured h2 { margin: 0; font-size: clamp(28px, 2.8vw, 44px); line-height: .98; letter-spacing: -.04em; font-weight: 900; color: #111; }

.hmcl-featured__meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }

.hmcl-featured__meta span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ececec;
  font-size: 13px;
  font-weight: 700;
}

.hmcl-featured p { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: rgba(17,17,17,.72); }
.hmcl-featured__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.hmcl-featured__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(245,245,245,.92));
}

.hmcl-featured__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hmcl-featured__emoji { font-size: 70px; }

.hmcl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.hmcl-card {
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hmcl-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(0,0,0,.08); }

.hmcl-card__image { width: 100%; aspect-ratio: 1.2 / 1; object-fit: cover; display: block; }
.hmcl-card__body { padding: 20px; }

.hmcl-card__badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmcl-card h3 { margin: 0; font-size: 24px; line-height: 1.02; letter-spacing: -.03em; font-weight: 900; color: #111; }
.hmcl-card__author { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #5a6dd8; }
.hmcl-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: rgba(17,17,17,.72); }
.hmcl-card__link { display: inline-flex; margin-top: 18px; font-weight: 800; color: #111; text-decoration: none; }

/* Classes content */
.hmcl-hero--classes { padding: 30px; margin-bottom: 22px; }

.hmclasses-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }

.hmclass-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}

.hmclass-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

.hmclass-card__eyebrow {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,17,17,.52);
}

.hmclass-title { margin: 0; font-size: clamp(32px, 3vw, 48px); line-height: .98; letter-spacing: -.04em; font-weight: 900; color: #111; }
.hmclass-author { margin-top: 10px; font-size: 15px; line-height: 1.4; color: rgba(17,17,17,.56); font-weight: 700; }
.hmclass-icon { font-size: 42px; line-height: 1; }

.hmclass-video { margin-top: 10px; }

.hmclass-video__ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  background: #111;
  aspect-ratio: 16 / 9;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.hmclass-video__ratio iframe { width: 100%; height: 100%; border: 0; display: block; }

.hmclass-empty { margin-top: 10px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid #ececec; }
.hmclass-empty strong { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 800; color: #111; }
.hmclass-empty p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(17,17,17,.68); }

.hmclass-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.hmclass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  transition: transform .18s ease, opacity .18s ease;
}

.hmclass-btn:hover { transform: translateY(-1px); }
.hmclass-btn--secondary { background: #fff; color: #111; border: 1px solid #ddd; }

.hmcl-mobile-toggle { display: none; }
.hmcl-mobile-overlay { display: none; }

body:has(.hmcl-app) .shopify-section-group-header-group,
body:has(.hmcl-app) .shopify-section-group-footer-group,
body:has(.hmcl-app) #shopify-section-header,
body:has(.hmcl-app) .section-header,
body:has(.hmcl-app) header.header { display: none !important; }

/* =============================================
   MEMBERSHIP (hmmem)
============================================= */

.hmmem { position: relative; overflow: hidden; background: #ececec; font-family: "DM Sans", sans-serif; padding: 28px 0; }

.hmmem-bg-shape--1 { width: 320px; height: 320px; top: -80px; left: -60px; background: rgba(255,255,255,.9); }
.hmmem-bg-shape--2 { width: 280px; height: 280px; right: -60px; bottom: -40px; background: rgba(210,210,210,.9); }

.hmmem-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.hmmem-main { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 22px; }

.hmmem-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 24px;
  margin-bottom: 18px;
  border-radius: 30px;
  background: #0c0c0e;
  color: #fff;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.16);
}

.hmmem-hero__float { position: absolute; width: 70px; height: auto; pointer-events: none; opacity: .95; }
.hmmem-hero__float--left  { left: -8px;  top: 50%; transform: translateY(-50%) rotate(-8deg); }
.hmmem-hero__float--right { right: 10px; top: 12px; transform: rotate(10deg); }

.hmmem-title   { margin: 0; font-size: clamp(34px, 4vw, 60px); line-height: .95; font-weight: 900; letter-spacing: -.05em; }
.hmmem-subtitle{ margin: 10px 0 0; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.9); }

.hmmem-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 22px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
}

.hmmem-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  text-decoration: none;
  color: #111;
  font-weight: 800;
  transition: .18s ease;
}

.hmmem-tab:hover { background: #111; color: #fff; }

.hmmem-block {
  width: 100%;
  margin: 0;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}

.hmmem-block__head { margin-bottom: 18px; }
.hmmem-block__head h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1; font-weight: 900; letter-spacing: -.04em; color: #111; }
.hmmem-block__head p  { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: rgba(17,17,17,.68); }

.hmmem-placeholder { display: flex; align-items: flex-start; gap: 16px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #ececec; }
.hmmem-placeholder__emoji { font-size: 34px; line-height: 1; }
.hmmem-placeholder strong { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 800; color: #111; }
.hmmem-placeholder p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(17,17,17,.68); }

.hmmem-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.hmmem-feature-card {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #ececec;
  text-decoration: none;
  color: #111;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  transition: .18s ease;
}

.hmmem-feature-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,.08); }
.hmmem-feature-card img { width: 100%; aspect-ratio: 1.2 / 1; object-fit: cover; display: block; }
.hmmem-feature-card__body { padding: 16px; }

.hmmem-feature-card__badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmmem-feature-card h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.05; font-weight: 900; letter-spacing: -.03em; }
.hmmem-feature-card p  { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(17,17,17,.68); }

.hmmem-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: 100%; }

.hmmem-preview-card { min-width: 0; padding: 22px 18px; border-radius: 22px; background: #fff; border: 1px solid #ececec; box-shadow: 0 10px 26px rgba(0,0,0,.05); }
.hmmem-preview-card__emoji { font-size: 32px; line-height: 1; margin-bottom: 12px; }
.hmmem-preview-card h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.02; font-weight: 900; letter-spacing: -.03em; color: #111; word-break: normal; }
.hmmem-preview-card p  { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(17,17,17,.68); }
.hmmem-preview-actions { margin-top: 18px; display: flex; justify-content: flex-start; }

.hmmem-subblock { margin-top: 18px; padding: 18px; border-radius: 22px; background: rgba(255,255,255,.72); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 10px 28px rgba(0,0,0,.04); }
.hmmem-subblock:first-of-type { margin-top: 0; }
.hmmem-subblock__head { margin-bottom: 14px; }
.hmmem-subblock__head h3 { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1; font-weight: 900; letter-spacing: -.03em; color: #111; }

.hmmem-embed-wrap { width: 100%; }
.hmmem-embed-wrap > *:first-child { margin-top: 0 !important; }
.hmmem-embed-wrap > *:last-child  { margin-bottom: 0 !important; }

/* Tracker section (inside membership) */
.hmmtr { padding: 0 0 22px; }
.hmmtr-head { margin-bottom: 18px; }
.hmmtr-title { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1; font-weight: 900; letter-spacing: -.04em; color: #111; }
.hmmtr-text  { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: rgba(17,17,17,.68); }
.hmmtr-block { margin-top: 18px; padding: 22px; border-radius: 28px; background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.62); box-shadow: 0 18px 50px rgba(0,0,0,.05); backdrop-filter: blur(10px); }
.hmmtr-block:first-of-type { margin-top: 0; }

/* =============================================
   TRENDS (hmtr)
============================================= */

.hmtr {
  position: relative;
  overflow: hidden;
  background: #ececec;
  font-family: "DM Sans", sans-serif;
}

.hmtr-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 18px 0;
}

.hmtr-sidebar {
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 28px;
  background: #0d0d0f;
  color: #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,.2);
  padding: 26px 18px;
  scrollbar-width: thin;
}

.hmtr-sidebar::-webkit-scrollbar { width: 8px; }
.hmtr-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }

.hmtr-main {
  min-width: 0;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 22px 0;
  scrollbar-width: thin;
}

.hmtr-main::-webkit-scrollbar { width: 8px; }
.hmtr-main::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 999px; }

.hmtr-hero   { margin-top: 6px; margin-bottom: 22px; }
.hmtr-tabs   {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 22px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(236,236,236,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hmtr-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  color: #111;
  font-weight: 800;
  transition: .18s ease;
}

.hmtr-tab.is-active { background: #111; color: #fff; }

.hmtr-block { display: none; margin-bottom: 18px; }
.hmtr-block.is-active { display: block; }
.hmtr-block:last-child { margin-bottom: 26px; }

.hmtr-embed-wrap,
.hmtr-embed-wrap * { max-width: 100%; }
.hmtr-embed-wrap { min-width: 0; overflow: hidden; }

.hmtr-mobile-toggle { display: none; }
.hmtr-mobile-overlay { display: none; }

body:has(.hmtr) .shopify-section-group-header-group,
body:has(.hmtr) .shopify-section-group-footer-group { display: none !important; }

/* =============================================
   RESOURCES (hmrs)
============================================= */

.hmrs-app {
  height: 100vh;
  min-height: 100vh;
  padding: 0 !important;
  background: #ececec;
}

.hmrs-app .hm-container { max-width: none; width: 100%; padding: 0 18px; }

.hmrs-shell--app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  height: 100vh;
  align-items: stretch;
  padding: 18px 0;
}

.hmrs-sidebar--fixed {
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 16px;
  border-radius: 28px;
  background: #0d0d0f;
  color: #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,.2);
  scrollbar-width: thin;
}

.hmrs-sidebar--fixed::-webkit-scrollbar { width: 8px; }
.hmrs-sidebar--fixed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; }
.hmrs-sidebar__inner { min-height: max-content; }

.hmrs-logo { max-width: 150px; display: block; }
.hmrs-logo-fallback { font-size: 24px; font-weight: 900; letter-spacing: -.03em; color: #fff; }

.hmrs-userbox {
  margin-top: 18px; padding: 16px 14px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
}
.hmrs-userbox__eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.56); }
.hmrs-userbox__name { font-size: 30px; line-height: .98; font-weight: 900; letter-spacing: -.04em; color: #fff; }

.hmrs-nav { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }

.hmrs-nav__item {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px;
  border-radius: 16px; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); transition: .18s ease;
}

.hmrs-nav__item:hover, .hmrs-nav__item.is-active { transform: translateY(-1px); background: rgba(255,255,255,.09); }
.hmrs-nav__emoji { font-size: 18px; }

.hmrs-sidebar__footer { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.hmrs-manage, .hmrs-logout {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px;
  border-radius: 16px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.1);
}

.hmrs-main--app {
  min-width: 0;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 22px 0;
  scrollbar-width: thin;
}

.hmrs-main--app::-webkit-scrollbar { width: 8px; }
.hmrs-main--app::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 999px; }

.hmrs-hero {
  padding: 30px; margin-bottom: 22px; border-radius: 30px;
  background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05); backdrop-filter: blur(10px);
}

.hmrs-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: #fff; border: 1px solid #e8e8e8;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

.hmrs-title    { margin: 16px 0 0; font-size: clamp(30px, 3.2vw, 52px); line-height: .95; letter-spacing: -.05em; font-weight: 900; color: #111; }
.hmrs-subtitle { max-width: 820px; margin: 14px 0 0; font-size: 18px; line-height: 1.65; color: rgba(17,17,17,.72); }

.hmrs-library { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; }

.hmrs-folders-panel,
.hmrs-preview-panel {
  border-radius: 28px; background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62); box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px); padding: 24px;
}

.hmrs-preview-panel { min-height: 560px; }

.hmrs-folders-head { margin-bottom: 18px; }

.hmrs-folders-head__eyebrow, .hmrs-preview-head__eyebrow {
  margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(17,17,17,.52);
}

.hmrs-folders-head h2, .hmrs-preview-head h2 {
  margin: 0; font-size: clamp(28px, 2.8vw, 40px); line-height: .98;
  font-weight: 900; letter-spacing: -.04em; color: #111;
}

.hmrs-folders-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.hmrs-folder {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px; border-radius: 22px; transition: transform .18s ease, background .18s ease;
}

.hmrs-folder:hover { transform: translateY(-2px); background: rgba(255,255,255,.6); }
.hmrs-folder.is-active { background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(0,0,0,.05); }
.hmrs-folder__icon  { font-size: 76px; line-height: 1; }
.hmrs-folder__label { font-size: 18px; font-weight: 800; color: #111; }

.hmrs-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }

.hmrs-close-preview {
  appearance: none; border: 1px solid rgba(201,58,47,.36); background: #fff; color: #c93a2f;
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; font-weight: 800;
}

.hmrs-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }

.hmrs-item {
  display: block; border-radius: 12px; overflow: hidden; background: #f2f2f2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset; transition: transform .15s ease, box-shadow .15s ease;
}

.hmrs-item:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.hmrs-item img.downloable { width: 100%; height: auto; display: block; }

.hmrs-mobile-toggle { display: none; }
.hmrs-mobile-overlay { display: none; }

body:has(.hmrs-app) .shopify-section-group-header-group,
body:has(.hmrs-app) .shopify-section-group-footer-group,
body:has(.hmrs-app) #shopify-section-header,
body:has(.hmrs-app) .section-header,
body:has(.hmrs-app) header.header { display: none !important; }

/* =============================================
   RESPONSIVE
============================================= */

/* Tablet / 1100px */
@media (max-width: 1100px) {

  html:has(.hmdb-app), body:has(.hmdb-app),
  html:has(.hmcl-app), body:has(.hmcl-app),
  html:has(.hmrs-app), body:has(.hmrs-app) { overflow: auto; }

  .hmdb-app, .hmcl-app, .hmrs-app {
    height: auto;
    min-height: 100vh;
    padding: 18px 0 !important;
  }

  .hmdb-shell--app, .hmcl-shell--app, .hmrs-shell--app {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    padding: 0;
  }

  .hmdb-main--app, .hmcl-main--app, .hmrs-main--app {
    height: auto;
    overflow: visible;
    padding-right: 0;
    padding-top: 72px;
  }

  .hm-hero, .hm-about, .hm-products,
  .hm-testimonials, .hm-benefits, .hm-cta { padding: 64px 0; }

  .hm-products-head { flex-direction: column; align-items: flex-start; }
  .hm-products-grid { grid-template-columns: 1fr; }

  .hmdb-shell, .hmcl-shell, .hmmem-shell { grid-template-columns: 1fr; }

  .hmdb-sidebar, .hmcl-sidebar { position: relative; top: 0; min-height: auto; }

  .hmmem-sidebar { position: relative; top: 0; height: auto; overflow: visible; }

  .hmdb-hero, .hmcl-featured { grid-template-columns: 1fr; }

  .hmcl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hmmem-feature-grid,
  .hmmem-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hmdb-dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "welcome" "calendar" "playlist" "membership" "resources";
  }

  .hmdb-membership-card,
  .hmdb-resources-card,
  .hmdb-calendar-card,
  .hmdb-playlist-card,
  .hmdb-welcome { min-height: auto; }

  .hmrs-library { grid-template-columns: 1fr; }
  .hmrs-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hmtr-shell { grid-template-columns: 1fr; height: auto; }
  .hmtr { height: auto; min-height: 100vh; padding: 18px 0 !important; }
  .hmtr-sidebar { position: relative; height: auto; overflow: visible; }
  .hmtr-main { height: auto; overflow: visible; padding-right: 0; }
  .hmtr-tabs { position: static; background: rgba(255,255,255,.72); backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Mobile menu buttons */
  .hmdb-mobile-toggle,
  .hmcl-mobile-toggle,
  .hmrs-mobile-toggle,
  .hmtr-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10002;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: #111;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }

  /* Slide-in sidebars */
  .hmdb-sidebar--fixed,
  .hmcl-sidebar,
  .hmrs-sidebar,
  .hmtr-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(320px, calc(100vw - 28px)) !important;
    height: 100vh !important;
    z-index: 10001 !important;
    transform: translateX(-110%) !important;
    transition: transform .28s ease !important;
    border-radius: 0 24px 24px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }

  .hmdb-sidebar--fixed.is-open,
  .hmcl-sidebar.is-open,
  .hmrs-sidebar.is-open,
  .hmtr-sidebar.is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .hmdb-sidebar--fixed:not(.is-open),
  .hmcl-sidebar:not(.is-open),
  .hmrs-sidebar:not(.is-open),
  .hmtr-sidebar:not(.is-open) {
    pointer-events: none !important;
  }

  .hmrs-mobile-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 10000;
  }

  .hmrs-mobile-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* 900px */
@media (max-width: 900px) {
  .hm-benefits-grid { grid-template-columns: 1fr; }
}

/* 768px */
@media (max-width: 768px) {
  .hm-demo-section { padding: 64px 0; }
  .hm-demo-card { padding: 24px 16px 14px; border-radius: 22px; }
  .hm-demo-text { margin: 18px 0 24px; font-size: 16px; line-height: 1.6; }
  .hm-mockup--laptop { display: none; }
  .hm-mockup--phone  { display: block; max-width: 420px; }
  .hm-mockup-screen--phone { left: 9%; top: 4%; width: 82%; height: 92%; border-radius: 28px; }
}

/* 767px */
@media (max-width: 767px) {
  .hm-container { padding: 0 18px; }
  .hm-hero h1  { line-height: 1.02; }
  .hm-hero p   { font-size: 17px; }
  .hm-btn      { width: 100%; }
  .hm-hero__actions { flex-direction: column; }

  .hmrev-section { padding: 64px 0; }
  .hmrev-sub  { font-size: 16px; }
  .hmrev-grid { gap: 22px; }
  .hmrev-card { width: 100%; border-radius: 18px; }

  .hmdb, .hmcl, .hmmem { padding: 18px 0; }
  .hmdb-float { display: none; }

  .hmdb-hero__copy, .hmdb-hero__visual,
  .hmdb-card, .hmdb-sidebar,
  .hmcl-sidebar, .hmmem-sidebar,
  .hmcl-hero, .hmcl-featured, .hmcl-card,
  .hmmem-hero, .hmmem-block, .hmmem-feature-card,
  .hmmem-preview-card { border-radius: 22px; }

  .hmdb-hero__copy, .hmdb-card { padding: 22px 18px; }
  .hmdb-grid, .hmdb-quicklinks, .hmdb-purchases,
  .hmcl-grid, .hmmem-feature-grid, .hmmem-preview-grid { grid-template-columns: 1fr; }
  .hmdb-card--wide { grid-column: span 1; }
  .hmdb-purchase   { grid-template-columns: 88px minmax(0, 1fr); }

  .hmcl-hero, .hmcl-featured, .hmcl-card__body,
  .hmmem-block { padding: 18px; }

  .hmcl-hero--classes, .hmclass-card { border-radius: 22px; padding: 18px; }
  .hmclass-card__head { flex-direction: column; }
  .hmclass-title  { font-size: 34px; }
  .hmclass-actions { flex-direction: column; }
  .hmclass-btn { width: 100%; }

  .hmmem-tabs { grid-template-columns: 1fr; }
  .hmmem-tab  { min-height: 48px; }
  .hmmem-hero { padding: 26px 16px; }
  .hmmem-hero__float { width: 54px; }
  .hmmem-placeholder { flex-direction: column; }
  .hmmtr-block { padding: 16px; border-radius: 22px; }
  .hmmem-subblock { padding: 14px; border-radius: 18px; }

  .hmdb-membership-card { border-radius: 22px; padding: 18px; }
  .hmdb-membership-card h3 { font-size: 28px; }

  .hmrs-folders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hmrs-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hmrs-title { font-size: 36px; }
  .hmrs-folders-head h2, .hmrs-preview-head h2 { font-size: 30px; }
  .hmrs-preview-head { flex-direction: column; align-items: flex-start; }
  .hmrs-close-preview { width: 100%; justify-content: center; }
  .hmrs-hero, .hmrs-folders-panel, .hmrs-preview-panel { border-radius: 22px; padding: 18px; }

  .hm-card { width: 82vw; max-width: 320px; }
}

/* Desktop (1101px+) — app shell fixed height */
@media (min-width: 1101px) {

  html:has(.hmdb-app), body:has(.hmdb-app) { height: 100%; overflow: hidden; }
  body:has(.hmdb-app) main, body:has(.hmdb-app) #MainContent { height: 100%; }

  html:has(.hmcl-app), body:has(.hmcl-app) { height: 100%; overflow: hidden; }
  body:has(.hmcl-app) main, body:has(.hmcl-app) #MainContent { height: 100%; }

  html:has(.hmrs-app), body:has(.hmrs-app) { height: 100%; overflow: hidden; }
  body:has(.hmrs-app) main, body:has(.hmrs-app) #MainContent { height: 100%; }

  html:has(.hmtr), body:has(.hmtr) { height: 100%; overflow: hidden; }
  body:has(.hmtr) main, body:has(.hmtr) #MainContent { height: 100%; }

  .hmtr { padding: 0 !important; }
  .hmtr-shell { height: 100vh; min-height: 100vh; }
  .hmtr-sidebar, .hmtr-main { height: calc(100vh - 36px); }
}

/* Short screens */
@media (max-height: 900px) and (min-width: 1101px) {
  .hmdb-sidebar--fixed { padding: 14px 12px !important; }
  .hmdb-logo { max-width: 78px !important; }
  .hmdb-userbox { margin-top: 12px !important; padding: 14px 12px !important; }
  .hmdb-userbox__eyebrow { margin-bottom: 6px !important; font-size: 10px !important; }
  .hmdb-userbox__name { font-size: 24px !important; }
  .hmdb-nav { margin-top: 14px !important; gap: 7px !important; }
  .hmdb-nav__item { min-height: 46px !important; border-radius: 14px !important; font-size: 15px !important; }
  .hmdb-sidebar__footer { gap: 8px !important; margin-top: 14px !important; padding-top: 14px !important; }
  .hmdb-manage, .hmdb-logout { min-height: 46px !important; border-radius: 14px !important; font-size: 15px !important; }

  .hmtr-sidebar { padding: 18px 14px !important; }
}

/* Comprados page */

.hmcp-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.hmcp-card{
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.hmcp-card img{
  width:100%;
  border-radius:12px;
  margin-bottom:10px;
}

.hmcp-card h3{
  font-size:16px;
  margin-bottom:10px;
}

.hmcp-btn{
  display:inline-block;
  padding:10px 14px;
  background:#111;
  color:#fff;
  border-radius:10px;
  text-decoration:none;
}

/* =========================================
   HM COMPRADOS · APP SHELL
========================================= */

html:has(.hmcp-app),
body:has(.hmcp-app){
  height: 100%;
  overflow: hidden;
}

body:has(.hmcp-app) main,
body:has(.hmcp-app) #MainContent{
  height: 100%;
}

.hmcp-app{
  height: 100vh;
  min-height: 100vh;
  padding: 0 !important;
  background: #ececec;
}

.hmcp-app .hm-container{
  max-width: none;
  width: 100%;
  padding: 0 18px;
}

.hmcp-shell--app{
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 22px;
  height: 100vh;
  min-height: 100vh;
  align-items: stretch;
  padding: 18px 0;
}

.hmcp-sidebar--fixed{
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  min-height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 16px;
  border-radius: 28px;
  background: #0d0d0f;
  color: #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,.2);
  scrollbar-width: thin;
}

.hmcp-sidebar--fixed::-webkit-scrollbar{
  width: 8px;
}

.hmcp-sidebar--fixed::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}

.hmcp-sidebar__inner{
  min-height: max-content;
}

.hmcp-logo{
  max-width: 150px;
  display: block;
}

.hmcp-logo-fallback{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
}

.hmcp-userbox{
  margin-top: 18px;
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
}

.hmcp-userbox__eyebrow{
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,.56);
}

.hmcp-userbox__name{
  font-size: 30px;
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff;
}

.hmcp-nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.hmcp-nav__item{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: .18s ease;
}

.hmcp-nav__item:hover,
.hmcp-nav__item.is-active{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

.hmcp-nav__emoji{
  font-size: 18px;
}

.hmcp-sidebar__footer{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.hmcp-manage,
.hmcp-logout{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
}

.hmcp-main--app{
  min-width: 0;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 22px;
  scrollbar-width: thin;
}

.hmcp-main--app::-webkit-scrollbar{
  width: 8px;
}

.hmcp-main--app::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.14);
  border-radius: 999px;
}

.hmcp-hero{
  padding: 30px;
  margin-bottom: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}

.hmcp-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e8e8e8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmcp-title{
  margin: 16px 0 0;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #111;
}

.hmcp-subtitle{
  max-width: 820px;
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(17,17,17,.72);
}

.hmcp-summary{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.hmcp-summary__card{
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
}

.hmcp-summary__eyebrow{
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,17,17,.52);
}

.hmcp-summary__card strong{
  display: block;
  font-size: 34px;
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #111;
}

.hmcp-summary__card span{
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(17,17,17,.68);
}

.hmcp-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
}

.hmcp-card{
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 14px 36px rgba(0,0,0,.05);
}

.hmcp-card__image{
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
  display: block;
  background: #f2f2f2;
}

.hmcp-card__image--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.hmcp-card__body{
  padding: 18px;
}

.hmcp-card__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.hmcp-card__badge{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmcp-card__date{
  font-size: 12px;
  font-weight: 700;
  color: rgba(17,17,17,.52);
}

.hmcp-card__title{
  margin: 0;
  font-size: 24px;
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 900;
  color: #111;
}

.hmcp-card__variant{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(17,17,17,.64);
}

.hmcp-card__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.hmcp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  transition: transform .18s ease, opacity .18s ease;
}

.hmcp-btn:hover{
  transform: translateY(-1px);
}

.hmcp-btn--secondary{
  background: #fff;
  color: #111;
  border: 1px solid #ddd;
}

.hmcp-empty{
  padding: 28px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
}

.hmcp-empty strong{
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.05;
  font-weight: 900;
  color: #111;
}

.hmcp-empty p{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(17,17,17,.68);
}

body:has(.hmcp-app) .shopify-section-group-header-group,
body:has(.hmcp-app) .shopify-section-group-footer-group,
body:has(.hmcp-app) #shopify-section-header,
body:has(.hmcp-app) .section-header,
body:has(.hmcp-app) header.header{
  display: none !important;
}

/* mobile */
.hmcp-mobile-toggle{
  display: none;
}

.hmcp-mobile-overlay{
  display: none;
}

@media (max-width: 1100px){
  html:has(.hmcp-app),
  body:has(.hmcp-app){
    overflow: auto;
  }

  .hmcp-app{
    height: auto;
    min-height: 100vh;
    padding: 18px 0 !important;
  }

  .hmcp-shell--app{
    grid-template-columns: 1fr !important;
    height: auto;
    min-height: auto;
    padding: 0;
  }

  .hmcp-main--app{
    height: auto;
    overflow: visible;
    padding-right: 0;
    padding-top: 72px !important;
  }

  .hmcp-summary{
    grid-template-columns: 1fr;
  }

  .hmcp-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .hmcp-mobile-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10002;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: #111;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }

  .hmcp-sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(320px, calc(100vw - 28px)) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 10001 !important;
    transform: translateX(-110%) !important;
    transition: transform .28s ease !important;
    border-radius: 0 24px 24px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }

  .hmcp-sidebar.is-open{
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .hmcp-sidebar:not(.is-open){
    pointer-events: none !important;
  }

  .hmcp-mobile-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 10000;
  }

  .hmcp-mobile-overlay.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .hmcp-hero,
  .hmcp-summary__card,
  .hmcp-empty{
    border-radius: 22px;
    padding: 18px;
  }

  .hmcp-card{
    border-radius: 20px;
  }
}

@media (max-width: 767px){
  .hmcp-grid{
    grid-template-columns: 1fr;
  }

  .hmcp-title{
    font-size: 36px;
  }

  .hmcp-card__actions{
    flex-direction: column;
  }

  .hmcp-btn{
    width: 100%;
  }
}

/* =========================================
   HM SUPPORT · APP SHELL
========================================= */

html:has(.hmsp-app),
body:has(.hmsp-app){
  height: 100%;
  overflow: hidden;
}

body:has(.hmsp-app) main,
body:has(.hmsp-app) #MainContent{
  height: 100%;
}

.hmsp-app{
  height: 100vh;
  min-height: 100vh;
  padding: 0 !important;
  background: #ececec;
}

.hmsp-app .hm-container{
  max-width: none;
  width: 100%;
  padding: 0 18px;
}

.hmsp-shell--app{
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 22px;
  height: 100vh;
  min-height: 100vh;
  align-items: stretch;
  padding: 18px 0;
}

.hmsp-sidebar--fixed{
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  min-height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 16px;
  border-radius: 28px;
  background: #0d0d0f;
  color: #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,.2);
  scrollbar-width: thin;
}

.hmsp-sidebar--fixed::-webkit-scrollbar{
  width: 8px;
}

.hmsp-sidebar--fixed::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}

.hmsp-sidebar__inner{
  min-height: max-content;
}

.hmsp-logo{
  max-width: 150px;
  display: block;
}

.hmsp-logo-fallback{
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
}

.hmsp-userbox{
  margin-top: 18px;
  padding: 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
}

.hmsp-userbox__eyebrow{
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,.56);
}

.hmsp-userbox__name{
  font-size: 30px;
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff;
}

.hmsp-nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.hmsp-nav__item{
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: .18s ease;
}

.hmsp-nav__item:hover,
.hmsp-nav__item.is-active{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

.hmsp-nav__emoji{
  font-size: 18px;
}

.hmsp-sidebar__footer{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.hmsp-manage,
.hmsp-logout{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
}

.hmsp-main--app{
  min-width: 0;
  height: calc(100vh - 36px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 22px;
  scrollbar-width: thin;
}

.hmsp-main--app::-webkit-scrollbar{
  width: 8px;
}

.hmsp-main--app::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.14);
  border-radius: 999px;
}

.hmsp-hero{
  padding: 30px;
  margin-bottom: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}

.hmsp-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e8e8e8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hmsp-title{
  margin: 16px 0 0;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 900;
  color: #111;
}

.hmsp-subtitle{
  max-width: 820px;
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(17,17,17,.72);
}

.hmsp-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}

.hmsp-card{
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
}

.hmsp-card__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.hmsp-card__eyebrow{
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,17,17,.52);
}

.hmsp-card__head h2{
  margin: 0;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #111;
}

.hmsp-card__emoji{
  font-size: 40px;
  line-height: 1;
}

.hmsp-card__text{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(17,17,17,.68);
}

.hmsp-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hmsp-form__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.hmsp-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hmsp-field label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #111;
}

.hmsp-field input,
.hmsp-field textarea,
.hmsp-field select{
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid #ddd;
  background: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  color: #111;
  outline: none;
}

.hmsp-field textarea{
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
}

.hmsp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease;
}

.hmsp-btn:hover{
  transform: translateY(-1px);
}

.hmsp-form__success{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(45,160,84,.12);
  color: #1b6e3a;
  font-weight: 700;
}

.hmsp-form__error{
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(201,58,47,.1);
  color: #9c2c24;
  font-weight: 700;
}

body:has(.hmsp-app) .shopify-section-group-header-group,
body:has(.hmsp-app) .shopify-section-group-footer-group,
body:has(.hmsp-app) #shopify-section-header,
body:has(.hmsp-app) .section-header,
body:has(.hmsp-app) header.header{
  display: none !important;
}

/* mobile */
.hmsp-mobile-toggle{
  display: none;
}

.hmsp-mobile-overlay{
  display: none;
}

@media (max-width: 1100px){
  html:has(.hmsp-app),
  body:has(.hmsp-app){
    overflow: auto;
  }

  .hmsp-app{
    height: auto;
    min-height: 100vh;
    padding: 18px 0 !important;
  }

  .hmsp-shell--app{
    grid-template-columns: 1fr !important;
    height: auto;
    min-height: auto;
    padding: 0;
  }

  .hmsp-main--app{
    height: auto;
    overflow: visible;
    padding-right: 0;
    padding-top: 72px !important;
  }

  .hmsp-grid{
    grid-template-columns: 1fr;
  }

  .hmsp-mobile-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10002;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: #111;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  }

  .hmsp-sidebar{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(320px, calc(100vw - 28px)) !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 10001 !important;
    transform: translateX(-110%) !important;
    transition: transform .28s ease !important;
    border-radius: 0 24px 24px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }

  .hmsp-sidebar.is-open{
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  .hmsp-sidebar:not(.is-open){
    pointer-events: none !important;
  }

  .hmsp-mobile-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 10000;
  }

  .hmsp-mobile-overlay.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .hmsp-hero,
  .hmsp-card{
    border-radius: 22px;
    padding: 18px;
  }
}

@media (max-width: 767px){
  .hmsp-form__grid{
    grid-template-columns: 1fr;
  }

  .hmsp-title{
    font-size: 36px;
  }

  .hmsp-card__head{
    flex-direction: column;
  }

  .hmsp-btn{
    width: 100%;
  }
}

/* =========================================
   HM PORTAL SIDEBAR · GLOBAL
========================================= */

.hmportal-sidebar{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 14px !important;
  border-radius:28px;
  background:#0d0d0f;
  color:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.2);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
}

.hmportal-sidebar::-webkit-scrollbar{
  width:8px;
}

.hmportal-sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}

.hmportal-sidebar__inner{
  min-height:max-content;
}

.hmportal-logo{
  max-width:88px;
  display:block;
}

.hmportal-logo-fallback{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.03em;
  color:#fff;
}

.hmportal-userbox{
  margin-top:14px;
  padding:14px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}

.hmportal-userbox__eyebrow{
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(255,255,255,.56);
}

.hmportal-userbox__name{
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  color:#fff;
}

.hmportal-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:18px;
}

.hmportal-nav__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:50px;
  padding:0 12px;
  border-radius:16px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:.18s ease;
  font-weight:700;
}

.hmportal-nav__item:hover,
.hmportal-nav__item.is-active{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}


.hmportal-nav__item-main{
  display:flex;
  align-items:center;
  gap:12px;
}

.hmportal-nav__emoji{
  font-size:18px;
  width:20px;
  display:inline-flex;
  justify-content:center;
}

.hmportal-nav__arrow{
  font-size:16px;
  line-height:1;
  transition:transform .18s ease;
}

.hmportal-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:8px 0 2px 22px;
}

.hmportal-nav__group.is-open .hmportal-subnav{
  display:flex;
}

.hmportal-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmportal-subnav__item:hover,
.hmportal-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

.hmportal-sidebar__footer{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
}

.hmportal-manage,
.hmportal-logout{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 12px;
  border-radius:14px;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.1);
  font-size:15px;
}

@media (max-height: 900px){
  .hmportal-logo{
    max-width:76px;
  }

  .hmportal-userbox__name{
    font-size:22px;
  }

  .hmportal-nav__item{
    min-height:46px;
    font-size:15px;
  }

  .hmportal-subnav__item{
    min-height:38px;
    font-size:14px;
  }
}

.hmportal-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmportal-nav__item--parent{
  min-width:0;
}

.hmportal-nav__toggle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  width:46px;
  padding:0;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmportal-nav__toggle-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmportal-nav__group.is-open .hmportal-nav__toggle-btn{
  background:rgba(255,255,255,.09);
}

.hmportal-nav__arrow{
  position:relative;
  width:12px;
  height:12px;
  flex:0 0 12px;
}

.hmportal-nav__arrow::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmportal-nav__group.is-open .hmportal-nav__arrow::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

/* ===== DASHBOARD SIDEBAR DROPDOWN ===== */

.hmdb-nav__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hmdb-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmdb-nav__item--parent{
  min-width:0;
}

.hmdb-nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  width:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmdb-nav__toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmdb-nav__group.is-open .hmdb-nav__toggle{
  background:rgba(255,255,255,.09);
}

.hmdb-nav__chevron{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}

.hmdb-nav__chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmdb-nav__group.is-open .hmdb-nav__chevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

.hmdb-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:2px 0 2px 18px;
}

.hmdb-nav__group.is-open .hmdb-subnav{
  display:flex;
}

.hmdb-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmdb-subnav__item:hover,
.hmdb-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

/* ===== MEMBERSHIP SIDEBAR DROPDOWN ===== */

.hmmem-nav__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hmmem-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmmem-nav__item--parent{
  min-width:0;
}

.hmmem-nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  width:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmmem-nav__toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmmem-nav__group.is-open .hmmem-nav__toggle{
  background:rgba(255,255,255,.09);
}

.hmmem-nav__chevron{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}

.hmmem-nav__chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmmem-nav__group.is-open .hmmem-nav__chevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

.hmmem-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:2px 0 2px 18px;
}

.hmmem-nav__group.is-open .hmmem-subnav{
  display:flex;
}

.hmmem-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmmem-subnav__item:hover,
.hmmem-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

/* ===== RESOURCES SIDEBAR DROPDOWN ===== */

.hmrs-nav__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hmrs-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmrs-nav__item--parent{
  min-width:0;
}

.hmrs-nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  width:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmrs-nav__toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmrs-nav__group.is-open .hmrs-nav__toggle{
  background:rgba(255,255,255,.09);
}

.hmrs-nav__chevron{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}

.hmrs-nav__chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmrs-nav__group.is-open .hmrs-nav__chevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

.hmrs-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:2px 0 2px 18px;
}

.hmrs-nav__group.is-open .hmrs-subnav{
  display:flex;
}

.hmrs-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmrs-subnav__item:hover,
.hmrs-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

/* ===== COMPRADOS SIDEBAR DROPDOWN ===== */

.hmcp-nav__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hmcp-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmcp-nav__item--parent{
  min-width:0;
}

.hmcp-nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  width:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmcp-nav__toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmcp-nav__group.is-open .hmcp-nav__toggle{
  background:rgba(255,255,255,.09);
}

.hmcp-nav__chevron{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}

.hmcp-nav__chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmcp-nav__group.is-open .hmcp-nav__chevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

.hmcp-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:2px 0 2px 18px;
}

.hmcp-nav__group.is-open .hmcp-subnav{
  display:flex;
}

.hmcp-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmcp-subnav__item:hover,
.hmcp-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

/* ===== SOPORTE SIDEBAR DROPDOWN ===== */

.hmsp-nav__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hmsp-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmsp-nav__item--parent{
  min-width:0;
}

.hmsp-nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  width:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmsp-nav__toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmsp-nav__group.is-open .hmsp-nav__toggle{
  background:rgba(255,255,255,.09);
}

.hmsp-nav__chevron{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}

.hmsp-nav__chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmsp-nav__group.is-open .hmsp-nav__chevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

.hmsp-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:2px 0 2px 18px;
}

.hmsp-nav__group.is-open .hmsp-subnav{
  display:flex;
}

.hmsp-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmsp-subnav__item:hover,
.hmsp-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

/* ===== CLASES SIDEBAR DROPDOWN ===== */

.hmcl-nav__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hmcl-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmcl-nav__item--parent{
  min-width:0;
}

.hmcl-nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  width:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmcl-nav__toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmcl-nav__group.is-open .hmcl-nav__toggle{
  background:rgba(255,255,255,.09);
}

.hmcl-nav__chevron{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}

.hmcl-nav__chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmcl-nav__group.is-open .hmcl-nav__chevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

.hmcl-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:2px 0 2px 18px;
}

.hmcl-nav__group.is-open .hmcl-subnav{
  display:flex;
}

.hmcl-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmcl-subnav__item:hover,
.hmcl-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

/* ===== TENDENCIAS SIDEBAR DROPDOWN ===== */

.hmtr-nav__group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hmtr-nav__parent{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  gap:8px;
  align-items:stretch;
}

.hmtr-nav__item--parent{
  min-width:0;
}

.hmtr-nav__toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  width:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:.18s ease;
}

.hmtr-nav__toggle:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.09);
}

.hmtr-nav__group.is-open .hmtr-nav__toggle{
  background:rgba(255,255,255,.09);
}

.hmtr-nav__chevron{
  position:relative;
  width:12px;
  height:12px;
  display:block;
}

.hmtr-nav__chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  transform:rotate(45deg) translate(-1px,-1px);
  transform-origin:center;
  transition:transform .18s ease;
}

.hmtr-nav__group.is-open .hmtr-nav__chevron::before{
  transform:rotate(225deg) translate(-1px,-1px);
}

.hmtr-subnav{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:2px 0 2px 18px;
}

.hmtr-nav__group.is-open .hmtr-subnav{
  display:flex;
}

.hmtr-subnav__item{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  font-size:15px;
  font-weight:700;
  transition:.18s ease;
}

.hmtr-subnav__item:hover,
.hmtr-subnav__item.is-active{
  background:rgba(255,255,255,.085);
  color:#fff;
}

/* =========================================================
   HMCLUB · SEAL SUBSCRIPTIONS PORTAL
   Estilos para /a/subscriptions/manage
========================================================= */

/* ===== CONTENEDOR GENERAL ===== */
.seal-subscription-page {
  background: #f6f7f9;
  padding: 30px 20px 60px;
  max-width: 100% !important;
  color: #424b55;
  font-size: 16px;
  line-height: 1.6;
}

/* contenedor principal del portal */
.seal-subscription-page > .seal-container,
.seal-subscription-page .seal-container.seal-sectioned,
.seal-subscription-page .seal-full,
.seal-subscription-page .seal-layout {
  box-sizing: border-box;
}

/* ancho cómodo */
.seal-subscription-page > .seal-container,
.seal-subscription-page > .seal-full,
.seal-subscription-page .seal-subscriptions-list.seal-full {
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== TITULO ===== */
.seal-subscription-page h1,
.seal-subscription-page [data-seal-t="list_your_subscriptions_text"] {
  font-size: 42px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  color: #111111 !important;
  margin: 0 0 28px !important;
}

/* texto bajo el titulo */
.seal-subscription-page [data-seal-t="list_text_below_the_title"] {
  text-align: center;
  color: #667085;
  margin-bottom: 20px;
}

/* ===== TARJETAS / BLOQUES ===== */
.seal-subscription-page .seal-container.seal-sectioned {
  background: #ffffff !important;
  border: 1px solid #e7e7eb !important;
  border-radius: 20px !important;
  padding: 24px 28px !important;
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06) !important;
  margin-bottom: 22px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.seal-subscription-page .seal-container.seal-sectioned:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.08) !important;
}

/* ===== LAYOUT INTERNO ===== */
.seal-subscription-page .seal-layout {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.seal-subscription-page .seal-oneQuarter {
  flex: 1 1 220px !important;
  min-width: 220px !important;
  margin: 0 !important;
}

/* columna derecha alineada */
.seal-subscription-page .seal-flex-vertical-righ--t,
.seal-subscription-page .seal-flex-vertical-right,
.seal-subscription-page .seal-flex-right {
  text-align: right;
}

/* ===== LINKS / TEXTO ===== */
.seal-subscription-page a {
  color: #111111;
  text-decoration: none;
}

.seal-subscription-page a:hover {
  opacity: 0.8;
}

/* número de suscripción */
.seal-subscription-page .seal-oneQuarter a,
.seal-subscription-page .seal-subscription-number a {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111111 !important;
}

/* intervalo */
.seal-subscription-page .seal-list-interval-label {
  font-size: 14px !important;
  color: #667085 !important;
  margin-top: 4px !important;
}

/* valor total */
.seal-subscription-page .seal-sub-list-total-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

/* texto general interno */
.seal-subscription-page .seal-oneQuarter div,
.seal-subscription-page .seal-oneQuarter span,
.seal-subscription-page .seal-flex-right div,
.seal-subscription-page .seal-flex-right span {
  color: #424b55;
}

/* estado activo */
.seal-subscription-page .seal-status-active,
.seal-subscription-page .seal-active,
.seal-subscription-page [class*="active"] {
  color: #14804a !important;
  font-weight: 700 !important;
}

/* ===== INPUTS / SELECTS ===== */
.seal-subscription-page input:not([type="submit"]):not([type="button"]),
.seal-subscription-page select,
.seal-subscription-page textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #d9dbe1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  color: #111111 !important;
  box-sizing: border-box;
}

.seal-subscription-page textarea {
  min-height: 110px;
  resize: vertical;
}

/* ===== BOTONES GENERALES ===== */
.seal-subscription-page button,
.seal-subscription-page input[type="submit"],
.seal-subscription-page input[type="button"],
.seal-subscription-page .button,
.seal-subscription-page .btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  border: 1px solid #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.seal-subscription-page button:hover,
.seal-subscription-page input[type="submit"]:hover,
.seal-subscription-page input[type="button"]:hover,
.seal-subscription-page .button:hover,
.seal-subscription-page .btn:hover {
  background: #ffffff !important;
  color: #111111 !important;
  transform: translateY(-1px);
}

/* ===== TARJETAS DE DATOS (contacto/envío/facturación) ===== */
.seal-subscription-page .seal-container.seal-sectioned h2,
.seal-subscription-page .seal-container.seal-sectioned h3,
.seal-subscription-page .seal-container.seal-sectioned strong {
  color: #111111;
}

/* links editar */
.seal-subscription-page a[href*="edit"],
.seal-subscription-page .seal-edit-link,
.seal-subscription-page [class*="edit"] {
  color: #4a86c5 !important;
  font-weight: 500;
}

/* ===== CENTRADO REAL DEL BOTÓN ROJO DE CANCELAR ===== */
/* esto apunta al wrapper final que suele quedar alineado a izquierda */
.seal-subscription-page form:has(button),
.seal-subscription-page form:has(input[type="submit"]),
.seal-subscription-page .seal-container:has(> button),
.seal-subscription-page .seal-container:has(> input[type="submit"]),
.seal-subscription-page .seal-layout:has(button),
.seal-subscription-page .seal-layout:has(input[type="submit"]),
.seal-subscription-page div:has(> button:last-child),
.seal-subscription-page div:has(> input[type="submit"]:last-child) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

/* estilo destructivo para cancelar */
.seal-subscription-page button[name*="cancel"],
.seal-subscription-page input[type="submit"][value*="Cancelar"],
.seal-subscription-page input[type="submit"][value*="cancelar"],
.seal-subscription-page button[title*="Cancelar"],
.seal-subscription-page button[title*="cancelar"],
.seal-subscription-page button[aria-label*="Cancelar"],
.seal-subscription-page button[aria-label*="cancelar"] {
  display: inline-flex !important;
  margin: 40px auto 0 !important;
  min-height: 54px !important;
  padding: 16px 30px !important;
  border-radius: 14px !important;
  border: none !important;
  background: #cf4d24 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  float: none !important;
  position: static !important;
}

.seal-subscription-page button[name*="cancel"]:hover,
.seal-subscription-page input[type="submit"][value*="Cancelar"]:hover,
.seal-subscription-page input[type="submit"][value*="cancelar"]:hover,
.seal-subscription-page button[title*="Cancelar"]:hover,
.seal-subscription-page button[title*="cancelar"]:hover,
.seal-subscription-page button[aria-label*="Cancelar"]:hover,
.seal-subscription-page button[aria-label*="cancelar"]:hover {
  background: #b6401b !important;
  color: #ffffff !important;
}

/* fallback bruto: último botón del portal */
.seal-subscription-page > button:last-of-type,
.seal-subscription-page > input[type="submit"]:last-of-type,
.seal-subscription-page .seal-container > button:last-of-type,
.seal-subscription-page .seal-container > input[type="submit"]:last-of-type,
.seal-subscription-page .seal-full > button:last-of-type,
.seal-subscription-page .seal-full > input[type="submit"]:last-of-type {
  display: block !important;
  width: fit-content !important;
  margin: 40px auto 0 !important;
  float: none !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .seal-subscription-page {
    padding: 22px 14px 40px;
  }

  .seal-subscription-page h1,
  .seal-subscription-page [data-seal-t="list_your_subscriptions_text"] {
    font-size: 32px !important;
    margin-bottom: 20px !important;
  }

  .seal-subscription-page .seal-container.seal-sectioned {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  .seal-subscription-page .seal-layout {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .seal-subscription-page .seal-oneQuarter {
    min-width: 100% !important;
    width: 100% !important;
  }

  .seal-subscription-page .seal-flex-vertical-righ--t,
  .seal-subscription-page .seal-flex-vertical-right,
  .seal-subscription-page .seal-flex-right {
    text-align: left !important;
  }

  .seal-subscription-page button,
  .seal-subscription-page input[type="submit"],
  .seal-subscription-page input[type="button"] {
    width: 100%;
    max-width: 320px;
  }
}

/* =========================================================
   FIX · devolver ancho contenido al portal de Seal
========================================================= */

/* wrapper general: NO full width */
.seal-subscription-page {
  max-width: 1100px !important;
  margin: 32px auto 60px !important;
  padding: 0 20px !important;
  background: #f6f7f9 !important;
}

/* los bloques internos ocupan el ancho del wrapper */
.seal-subscription-page > .seal-container,
.seal-subscription-page > .seal-full,
.seal-subscription-page .seal-subscriptions-list.seal-full,
.seal-subscription-page .seal-layout,
.seal-subscription-page .seal-container.seal-sectioned {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* tarjetas */
.seal-subscription-page .seal-container.seal-sectioned {
  background: #fff !important;
  border: 1px solid #e7e7eb !important;
  border-radius: 20px !important;
  padding: 24px 28px !important;
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06) !important;
  margin-bottom: 22px !important;
}

/* mobile */
@media (max-width: 768px) {
  .seal-subscription-page {
    max-width: 100% !important;
    margin: 20px auto 40px !important;
    padding: 0 14px !important;
  }
}

.content-for-layout {
  background: #f6f7f9 !important;
}

/* ===== COLECCION GENERAL HMCLUB ===== */

.template-collection .collection-hero {
  background: #f5f5f7;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.template-collection .collection-hero__inner {
  padding-top: 48px !important;
  padding-bottom: 32px !important;
}

.template-collection .collection-hero__title,
.template-collection .title--primary {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111;
  margin-bottom: 16px;
}

.hm-collection-intro {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(17,17,17,0.72);
  margin-top: 0;
  margin-bottom: 22px;
}

.hm-collection-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.hm-collection-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all .22s ease;
}

.hm-collection-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* Toolbar */
.template-collection .product-grid-container .facets-container {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 28px;
}

.template-collection .facets-vertical-sort,
.template-collection .facet-filters,
.template-collection .facets {
  align-items: center;
}

/* Cards */
.template-collection .card-wrapper {
  height: 100%;
}

.template-collection .card {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.template-collection .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12);
}

.template-collection .card__inner {
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}

.template-collection .card__media img {
  transition: transform .45s ease;
}

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

.template-collection .card__content {
  padding: 16px 16px 18px;
}

.template-collection .card__heading {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.template-collection .card__heading a {
  color: #111;
}

.template-collection .price {
  margin-top: 10px;
}

.template-collection .price-item {
  font-size: 17px;
  font-weight: 700;
  color: #111;
}

/* Espaciado grilla */
.template-collection .collection .grid {
  row-gap: 28px;
  column-gap: 20px;
}

/* Quitar sensación tan gris */
.template-collection .collection {
  background: #fafafa;
}

.template-collection .page-width {
  max-width: 1400px;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .template-collection .collection-hero__inner {
    padding-top: 28px !important;
    padding-bottom: 20px !important;
  }

  .template-collection .collection-hero__title,
  .template-collection .title--primary {
    font-size: 42px;
  }

  .hm-collection-intro {
    font-size: 15px;
    line-height: 1.5;
  }

  .template-collection .product-grid-container .facets-container {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 18px;
  }

  .template-collection .card {
    border-radius: 18px;
  }
}

.hm-collection-intro {
  max-width: 100%;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(0,0,0,0.7);
  margin-top: 10px;
}

.hm-collection-pills {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.hm-collection-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  text-decoration: none;
  color: #111;
  font-weight: 600;
  transition: 0.2s ease;
}

.hm-collection-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 10px rgba(0,0,0,0.03);
}

/* =========================
   HMCLUB / COLLECTION ALL
   ========================= */

.template-collection {
  background: #f6f6f7;
}

/* Hero custom */
.hm-collection-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 20px 18px;
}

.hm-collection-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(42px, 6vw, 68px);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #1f1f1f;
}

.hm-collection-intro {
  max-width: 760px;
  font-size: 22px;
  line-height: 1.5;
  color: rgba(31,31,31,0.72);
  margin: 0;
}

.hm-collection-pills {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.hm-collection-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  color: #111;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hm-collection-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.14);
}

/* Toolbar / filtros */
.template-collection .collection-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.template-collection .facets,
.template-collection .facet-filters,
.template-collection .facets-container {
  background: transparent !important;
}

.template-collection .facets-container {
  margin-bottom: 28px !important;
}

.template-collection .facets__form,
.template-collection .facet-filters {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

/* Cards */
.template-collection .product-grid__item .card,
.template-collection .product-grid__item .card-wrapper {
  background: transparent;
}

.template-collection .card--standard,
.template-collection .card {
  border-radius: 22px;
  overflow: hidden;
}

.template-collection .card__inner {
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}

.template-collection .card__media {
  background: #ececec;
}

.template-collection .card__media img {
  transition: transform .35s ease;
}

.template-collection .card-wrapper:hover .card__media img {
  transform: scale(1.035);
}

.template-collection .card__content,
.template-collection .card-information {
  padding-top: 14px;
}

.template-collection .card__heading,
.template-collection .card-information__text {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #1e1e1e;
}

.template-collection .price,
.template-collection .price-item {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

.template-collection .grid {
  row-gap: 34px !important;
  column-gap: 20px !important;
}

/* Separación entre hero y filtros */
.template-collection results-list.section.product-grid-container {
  padding-top: 0 !important;
}

/* Mobile */
@media (max-width: 749px) {
  .hm-collection-hero {
    padding: 26px 16px 12px;
  }

  .hm-collection-hero h1 {
    font-size: 42px;
  }

  .hm-collection-intro {
    font-size: 17px;
  }

  .template-collection .collection-wrapper {
    padding: 0 16px 28px;
  }

  .hm-collection-pill {
    min-height: 40px;
    padding: 9px 14px;
  }
}

.hm-membership-product__seal-note {
  margin-top: 14px;
  color: {{ section.settings.text_color }};
  font-size: 14px;
  line-height: 1.55;
}

.hm-membership-product__seal-note strong {
  color: {{ section.settings.title_color }};
}

 .hm-about {
  padding: 0px;
  padding-top:66px;
  padding-bottom: 26px;
  background: #F5F7F9 !important;
 }


 /* Dashboard grid */
.hmdb-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "welcome    calendar"
    "referral   membership"
    "resources  playlist";
  gap: 20px;
  align-items: start;
  padding-bottom: 18px;
}

.hmdb-welcome,
.hmdb-calendar-card,
.hmdb-referral-card,
.hmdb-playlist-card,
.hmdb-membership-card,
.hmdb-resources-card {
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.hmdb-welcome       { grid-area: welcome; background: #2ba154; color: #fff; padding: 34px 28px; }
.hmdb-calendar-card { grid-area: calendar; padding: 16px; min-height: 160px; }
.hmdb-referral-card { grid-area: referral; padding: 22px 24px; }
.hmdb-resources-card{ grid-area: resources; padding: 22px 24px; }
.hmdb-playlist-card { grid-area: playlist; padding: 22px 24px; }

.hmdb-membership-card {
  grid-area: membership;
  align-self: start;
  padding: 22px 20px;
  min-height: 324px;
}

.hmdb-referral-card {
  grid-area: referral;
  padding: 18px 22px;
  min-height: 0;
  height: auto;
  align-self: start;
}

.hmdb-referral-card .hmdb-block-head {
  margin-bottom: 8px;
}

.hmdb-referral-card h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.05;
}

.hmdb-referral-card p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
}

.hmdb-referral-box {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.hmdb-referral-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.12);
  background: #fff;
  color: #111;
  font: inherit;
}

.hmdb-referral-progress {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(17,17,17,.68);
  font-size: 13px;
  line-height: 1.35;
}

.hmdb-playlist-card p,
.hmdb-referral-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(17,17,17,.68);
}

.hmdb-playlist-actions {
  margin-top: 18px;
}

.hmdb-referral-card {
  background: #fff;
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 0 rgba(17,17,17,.04);
}

.hmdb-referral-card__text {
  margin: 0;
  color: #6b6b6b;
  font-size: 15px;
  line-height: 1.65;
  max-width: 760px;
}

.hmdb-referral-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.hmdb-referral-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a8a8a;
}

.hmdb-referral-copybox {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f6f6f8;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 18px;
  padding: 10px;
}

.hmdb-referral-copybox input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: #111;
  outline: none;
  box-shadow: none;
}

.hmdb-copy-btn {
  appearance: none;
  border: 0;
  background: #2ba154;
  color: #fff;
  font: inherit;
  font-weight: 700;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
  white-space: nowrap;
}

.hmdb-copy-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}

.hmdb-copy-btn.is-copied {
  background: #111;
}

.hmdb-referral-note {
  font-size: 14px;
  color: #6b6b6b;
  line-height: 1.6;
}

@media (min-width: 990px) {
  .hmdb-referral-grid {
    grid-template-columns: 1fr 1fr;
  }
}