/* =============================================================
   The membership tier card (cmo-0455): shop/_membership_tier_card.php's
   rules, shared by the store's home page (shop/browse.php, after shop.css)
   and My membership's Available plans (dashboard/membership.php). A dark card
   in the plan's tier colour with the logo's arrow, then the price, the perks
   and one button per billing period, all in DM Sans. Colours are tokens
   only: --store-tier-1..3 by the plan's rank, --store-go for the action.
   Every rule is scoped to the card (.hm-plan), never to the home page's .hm,
   so the card looks the same wherever it is drawn.
   ============================================================= */
.hm-plans { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .hm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-plan { display: flex; flex-direction: column; background: var(--store-card); border: 1px solid var(--store-line); border-radius: var(--store-r); overflow: hidden; min-width: 0; font: 16px/1.6 var(--store-body); color: var(--store-ink); }
.hm-plan {
  --hm-tier: var(--store-tier-1);
  --hm-tier-a: var(--store-tier-1-a);
  --hm-tier-b: var(--store-tier-1-b);
  --hm-tier-glow: var(--store-tier-1-glow);
}
.hm-plan--tier2 {
  --hm-tier: var(--store-tier-2);
  --hm-tier-a: var(--store-tier-2-a);
  --hm-tier-b: var(--store-tier-2-b);
  --hm-tier-glow: var(--store-tier-2-glow);
}
.hm-plan--tier3 {
  --hm-tier: var(--store-tier-3);
  --hm-tier-a: var(--store-tier-3-a);
  --hm-tier-b: var(--store-tier-3-b);
  --hm-tier-glow: var(--store-tier-3-glow);
}
.hm-mcard { position: relative; margin: 16px 16px 0; min-height: 168px; padding: 20px 22px; border-radius: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 100% 0%, var(--hm-tier-glow) 0%, var(--store-tier-clear) 60%), linear-gradient(135deg, var(--hm-tier-a) 0%, var(--hm-tier-b) 100%); }
[dir="rtl"] .hm-mcard { background: radial-gradient(120% 80% at 0% 0%, var(--hm-tier-glow) 0%, var(--store-tier-clear) 60%), linear-gradient(225deg, var(--hm-tier-a) 0%, var(--hm-tier-b) 100%); }
.hm-mcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hm-mcard__brand { font: 600 .78rem/1.3 var(--store-body); letter-spacing: .12em; text-transform: uppercase; color: var(--store-on-dark-muted); overflow-wrap: anywhere; }
.hm-mcard__mark { flex: none; width: 46px; height: 34px; fill: var(--hm-tier); }
.hm-mcard__name { display: grid; gap: 2px; }
.hm-mcard__member { font: 500 .82rem/1.3 var(--store-body); color: var(--store-on-dark-muted); }
.hm-plan .hm-mcard h3 { margin: 0; text-wrap: balance; font: 700 clamp(1.6rem, 2.6vw, 2rem)/1.1 var(--store-body); letter-spacing: -.01em; color: var(--hm-tier); overflow-wrap: anywhere; }
.hm-plan .hm-body { padding: 20px 22px 24px; display: grid; gap: 16px; flex: 1; align-content: start; grid-template-rows: auto 1fr auto; }
.hm-plan .hm-body:has(> .hm-desc) { grid-template-rows: auto auto 1fr auto; }
.hm-plan .hm-body[hidden] { display: none; }
.hm-plan .hm-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0; }
.hm-plan .hm-price b { font: 700 2.25rem/1 var(--store-body); letter-spacing: -.01em; }
.hm-plan .hm-price span { color: var(--store-muted); }
.hm-plan .hm-desc { margin: 0; color: var(--store-muted); }
.hm-plan .hm-checks { list-style: none; padding: 0; margin: 0; display: grid; }
.hm-plan .hm-checks--tick { gap: 10px; align-content: start; }
.hm-plan .hm-checks--tick li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.hm-plan .hm-checks li::before { content: ""; }
.hm-plan .hm-checks--tick li::before { width: 20px; height: 20px; margin-top: 2px; border-radius: 0; box-shadow: none; background: var(--store-go);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8.5 15 16 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5 8.5 15 16 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A product on another billing period of this plan: a plus, not a tick. */
.hm-plan .hm-checks--tick li.hm-upsell { color: var(--store-muted); }
.hm-plan .hm-checks--tick li.hm-upsell::before { background: var(--store-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 6.5v7M6.5 10h7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 6.5v7M6.5 10h7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* One button per card, the same on every plan: outlined in the store green.
   A state that cannot be bought (the current plan elsewhere, a lower plan, a
   full plan) is greyed and inert. */
.hm-plan .hm-body .hm-btn--plan { display: inline-flex; align-items: center; justify-content: center; gap: .45em; text-align: center; text-decoration: none; cursor: pointer;
  padding: .85em 1.1em; border: 1.5px solid var(--store-go); border-radius: 12px; color: var(--store-go); background: var(--store-card);
  font: 600 1rem/1.2 var(--store-body); transition: background .15s, color .15s, border-color .15s; }
.hm-plan .hm-body .hm-btn--plan:hover { background: var(--store-go-soft); color: var(--store-go-d); border-color: var(--store-go-d); }
.hm-plan .hm-body .hm-btn--plan:focus-visible { outline: 3px solid var(--store-go); outline-offset: 2px; }
.hm-plan .hm-body .hm-btn--plan.is-inert,
.hm-plan .hm-body .hm-btn--plan.is-inert:hover { cursor: default; border-color: var(--store-line); color: var(--store-muted); background: var(--store-card); }