/**
 * Digital product page sections.
 *
 * Everything is scoped under .mz-dp. Never body, html, :root or *, because this
 * renders inside Elementor containers on a live site and a leak breaks the
 * header. Tokens fall back to the Mizrahnik design system when present.
 */

.mz-dp {
  --dp-primary: var(--mz-primary, #5FA886);
  --dp-primary-dark: #478568;
  --dp-secondary: var(--mz-secondary, #FFEEAD);
  --dp-bg: var(--mz-bg, #ffffff);
  --dp-surface: var(--mz-surface, #f6f7f9);
  --dp-text: var(--mz-text, #111827);
  --dp-muted: var(--mz-muted, #6b7280);
  --dp-border: var(--mz-border, rgba(17, 24, 39, .15));
  --dp-focus: var(--mz-focus, rgba(51, 100, 173, .45));

  /* The map: land has to be visibly darker than a white page, and visibly
     lighter than a dark one. Both values are tinted toward the brand green. */
  --dp-land: #cbdad2;
  --dp-land-edge: rgba(17, 24, 39, .28);
  /* The mid green reads 1.95:1 on that land, so in light mode the dots take
     the darker brand green and clear 3:1. In dark mode the mid green is
     already 4.58:1 and stays as it is. */
  --dp-dot: var(--dp-primary-dark, #478568);

  --dp-radius-card: 14px;
  --dp-radius-pill: 50px;
  --dp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  direction: rtl;
  text-align: start;
  font-family: 'Fredoka', 'Heebo', sans-serif;
  line-height: 1.7;
  color: var(--dp-text);
}

html[data-theme="dark"] .mz-dp,
body[data-theme="dark"] .mz-dp {
  --dp-bg: #0b1220;
  --dp-surface: #111827;
  --dp-text: #e5e7eb;
  --dp-muted: #9ca3af;
  --dp-border: rgba(229, 231, 235, .18);
  --dp-focus: rgba(138, 180, 255, .55);
  --dp-land: #24352e;
  --dp-land-edge: rgba(229, 231, 235, .30);
  --dp-dot: var(--dp-primary);
}

.mz-dp *,
.mz-dp *::before,
.mz-dp *::after { box-sizing: border-box; }

.mz-dp :focus-visible {
  outline: 3px solid var(--dp-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.mz-dp__section { padding-block: 36px; }
.mz-dp__section + .mz-dp__section { border-top: 1px solid var(--dp-border); }

.mz-dp__h2 {
  font-size: 26px;
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  color: var(--dp-text);
}

.mz-dp__h3 {
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--dp-text);
}

.mz-dp__prose { color: var(--dp-text); }
.mz-dp__prose p { margin: 0 0 12px; }
.mz-dp__prose p:last-child { margin-bottom: 0; }

/* ============================ hero ============================ */

.mz-dp__hero { padding-block: 8px 32px; }

.mz-dp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Green, not the cream. The cream stays put in both themes while the site's
     global dark-mode sheet repaints text it does not recognise to white, and
     white on cream is unreadable. Green with white holds either way. */
  background: var(--dp-primary, #5FA886);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--dp-radius-pill);
  padding: 4px 14px;
  margin-bottom: 12px;
}

.mz-dp__title {
  font-size: 34px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  color: var(--dp-text);
}

.mz-dp__lede {
  font-size: 17px;
  color: var(--dp-muted);
  margin: 0 0 22px;
  max-width: 56ch;
}

.mz-dp__stats {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-card);
  overflow: hidden;
  background: var(--dp-surface);
}

.mz-dp__stat {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 12px 18px;
  border-inline-start: 1px solid var(--dp-border);
}
.mz-dp__stat:first-child { border-inline-start: 0; }

.mz-dp__stat b {
  display: block;
  font-size: 23px;
  font-weight: 800;
  color: var(--dp-primary);
  line-height: 1.2;
}

.mz-dp__stat span {
  font-size: 13px;
  color: var(--dp-muted);
}

.mz-dp__buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
}

.mz-dp__price { display: flex; flex-direction: column; }

.mz-dp__price-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--dp-primary);
  line-height: 1.1;
}
.mz-dp__price-value .amount { color: inherit; }

.mz-dp__price-label {
  font-size: 13px;
  color: var(--dp-muted);
}

.mz-dp a.mz-dp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 30px;
  border-radius: var(--dp-radius-pill);
  background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-primary-dark) 100%);
  color: #ffffff !important;   /* the global dark-mode rule uses !important too */
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(95, 168, 134, .4);
  transition: transform 200ms var(--dp-ease), box-shadow 200ms var(--dp-ease);
}

.mz-dp a.mz-dp__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(95, 168, 134, .5);
  color: #ffffff !important;
}
.mz-dp a.mz-dp__cta:active { transform: scale(.98); }

.mz-dp__club {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(95, 168, 134, .08);
  border: 1px dashed var(--dp-primary);
  border-radius: 10px;
  padding: 8px 14px;
  margin-top: 16px;
}

.mz-dp__club-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--dp-primary-dark);
}
html[data-theme="dark"] .mz-dp .mz-dp__club-text { color: var(--dp-primary); }

.mz-dp a.mz-dp__club-btn {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  background: var(--dp-primary);
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 150ms var(--dp-ease);
}
.mz-dp a.mz-dp__club-btn:hover { background: var(--dp-primary-dark); color: #ffffff !important; }

/* ========================= destinations =========================

   A map of the country, and the names grouped under it.

   What this replaced was a wrap of grey pills, and the reasons it read as a
   shopping list are worth keeping written down, because they are easy to
   reintroduce: a pill shape is an interface tag and files the contents as
   metadata; a dot before every line is a bullet; one weight for every item
   leaves the eye nowhere to land; and `flex-wrap` alone gives a ragged edge
   that reads as spilled rather than composed.

   So: no pills, no bullets, aligned columns, and the names carry real weight.
   Everything is visible at once, because the block's whole job is to prove
   coverage.                                                                  */

.mz-dp__map-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

/* Countries differ wildly in shape: Nepal is twice as wide as it is tall and
   Vietnam is twice as tall as it is wide. Height is capped and width follows
   the aspect ratio, so the narrow ones stay narrow instead of stretching the
   page. The viewBox means the browser reserves the space before paint, so
   there is no layout shift. */
.mz-dp__map {
  max-height: 420px;
  max-width: 100%;
  height: auto;
  width: auto;
  overflow: visible;
}

/* The land needs its own value, not `--dp-surface`.
   Surface is tuned to sit quietly behind text, which on white is almost white
   and in dark mode is almost the background: either way the country dissolved
   into the page. A filled shape is a graphic, not a panel, and it has to read
   as an object. Tinted toward the brand green so it belongs to the palette
   rather than looking like a grey placeholder. */
.mz-dp__map-land {
  fill: var(--dp-land, #dbe6e0);
  stroke: var(--dp-land-edge, rgba(17, 24, 39, .28));
  stroke-width: 2;
  stroke-linejoin: round;
}

.mz-dp__map-dot {
  fill: var(--dp-dot, #478568);
  stroke: var(--dp-bg);
  stroke-width: 3;
}

.mz-dp__dest-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mz-dp__dest-region {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dp-primary-dark);
}

/* The rule runs to the end of the line, which is what makes a heading read as
   a divider rather than as another item in the list. */
.mz-dp__dest-region::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dp-border);
}

.mz-dp__dest-region em {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: var(--dp-muted);
}

html[data-theme="dark"] .mz-dp .mz-dp__dest-region,
body[data-theme="dark"] .mz-dp .mz-dp__dest-region {
  color: var(--dp-primary);
}

/* Columns, not a wrap. An aligned edge is the difference between a list that
   looks composed and one that looks dumped. */
.mz-dp__dest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 20px;
}

/* These names are the product. 16px at 600 in the text colour, not 14px grey:
   they are meant to be read, not scanned past. */
.mz-dp__dest-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--dp-text);
}

/* ---- picking a region ---- */

.mz-dp__map-zone {
  fill: var(--dp-primary);
  fill-opacity: .14;
  /* The border between two regions is the whole point of drawing them, so it
     is a real line and not a hint. At .35 it dissolved into the land and the
     division was invisible until you hovered. */
  stroke: var(--dp-bg);
  stroke-opacity: .9;
  stroke-width: 4;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill-opacity 150ms var(--dp-ease);
}

/* Neighbours alternate, so where two regions meet they differ in fill as well
   as in outline. One tint would leave the seam carrying the whole burden. */
.mz-dp__map-zone.is-alt { fill-opacity: .26; }

.mz-dp__map-zone:hover,
.mz-dp__map-zone.is-alt:hover { fill-opacity: .38; }
.mz-dp__map-zone.is-on,
.mz-dp__map-zone.is-alt.is-on { fill-opacity: .46; }

.mz-dp__map-zone:focus-visible {
  outline: none;
  stroke: var(--dp-text);
  stroke-opacity: 1;
  stroke-width: 5;
}

/* Everything else recedes. Nothing is hidden: the block still has to prove
   coverage, and coverage is judged by eye. */
.mz-dp__dest.is-picking .mz-dp__dest-group:not(.is-on) { opacity: .38; }
.mz-dp__dest.is-picking .mz-dp__map-dot:not(.is-on) { fill: var(--dp-muted); opacity: .55; }

.mz-dp__dest-group { transition: opacity 150ms var(--dp-ease); }
.mz-dp__map-dot { transition: opacity 150ms var(--dp-ease); }

/* The picked region comes up under the map. Without this, on a phone the map
   fills the top of the screen and the group you just tapped is below the fold,
   so the tap looks like it did nothing. */
.mz-dp__dest.is-reordering .mz-dp__dest-group.is-on { order: -1; }
.mz-dp__dest.is-reordering .mz-dp__dest-group.is-on {
  animation: mz-dp-rise 220ms var(--dp-ease) both;
}

@keyframes mz-dp-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.mz-dp__dest--zoned .mz-dp__dest-region { cursor: pointer; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  /* It still moves up. It just does not animate getting there: someone who
     asked for less motion still needs to see that the tap did something. */
  .mz-dp__dest.is-reordering .mz-dp__dest-group.is-on { animation: none; }
  .mz-dp__map-zone,
  .mz-dp__dest-group,
  .mz-dp__map-dot { transition: none; }
}

@media (max-width: 767px) {
  .mz-dp__map { max-height: 340px; }
  .mz-dp__dest-list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .mz-dp__dest-name { font-size: 15px; }
}

/* ============================ fit ============================ */

.mz-dp__fit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

/* Icon above, sentence under it, both centred.
   The row form put a 20px mark beside a line of text and the icon read as
   punctuation. Stacked and given room, it is the first thing the eye lands on
   and the sentence explains it — which is the order these are read in. */
.mz-dp__fit-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: var(--dp-surface);
  border-radius: var(--dp-radius-card);
  padding: 22px 18px;
  font-size: 15px;
  line-height: 1.6;
}

.mz-dp__check {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--dp-primary);
}

/* Narrow enough that a card per row would be a column of stamps. Two across
   keeps the stack readable without shrinking the icon back to a mark. */
@media (max-width: 560px) {
  .mz-dp__fit-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .mz-dp__fit-list li {
    padding: 18px 10px;
    font-size: 14px;
  }

  .mz-dp__check {
    width: 30px;
    height: 30px;
  }
}

/* ============================ blocks ============================ */

.mz-dp__blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.mz-dp__block {
  background: var(--dp-surface);
  border-radius: var(--dp-radius-card);
  padding: 20px;
}

.mz-dp__block-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(95, 168, 134, .12);
  font-size: 20px;
  margin-bottom: 10px;
}

.mz-dp__block p { margin: 0; color: var(--dp-muted); font-size: 15px; }

.mz-dp__block-items {
  margin: 10px 0 0;
  padding-inline-start: 18px;
  color: var(--dp-muted);
  font-size: 15px;
}

/* ============================ tip ============================ */

.mz-dp__tip .mz-dp__prose {
  background: var(--dp-surface);
  border-inline-start: 4px solid var(--dp-primary);
  border-radius: var(--dp-radius-card);
  padding: 18px 20px;
}

/* ============================ mobile ============================ */

@media (max-width: 767px) {
  .mz-dp__title { font-size: 27px; }
  .mz-dp__h2 { font-size: 22px; }
  .mz-dp__section { padding-block: 28px; }
  .mz-dp__buy { gap: 14px; }
  .mz-dp a.mz-dp__cta { width: 100%; }
  .mz-dp__club { width: 100%; }
  .mz-dp__club-btn { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mz-dp *,
  .mz-dp *::before,
  .mz-dp *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------- bundle
 * Several products offered together. Every colour resolves through the
 * --dp-* tokens, so the dark-mode block at the top of this file covers it
 * without a single override down here.
 *
 * Sized by container, not viewport. The block sits inside an Elementor
 * column whose width has nothing to do with the window, and a viewport
 * media query would collapse it at the wrong moment.
 */

/* No `container-type` here, and that is a scar rather than a preference.
   `container-type: inline-size` anywhere in this subtree made WebKit report a
   block size to Elementor's widget wrapper that its own content never had:
   content 741px, wrapper 1308px, and 567px of blank page between the bundle
   and the footer. Proven by toggling it on the live page, and it reproduced
   wherever in the subtree the property was moved. The block scaled to its own
   width, which was the point, but not at the price of a hole under every
   product page. The clamps below are viewport based instead. */

.mz-dp .mz-dp__bundle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  align-items: center;
  padding: clamp(16px, 2.2vw, 28px);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-card);
  background: var(--dp-bg);
  color: var(--dp-text);
}

/* Posters are portrait. Capping by height keeps a 724x1024 image from
   swallowing the block, and keeps two of them the same size as each other. */
.mz-dp .mz-dp__bundle-media {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.mz-dp .mz-dp__bundle-thumb {
  display: block;
  width: auto;
  height: clamp(120px, 16vw, 190px);
  object-fit: cover;
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--dp-radius-card) - 5px);
  border: 1px solid var(--dp-border);
}

.mz-dp .mz-dp__bundle-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Its own class, not the hero's eyebrow.
 *
 * .mz-dp__eyebrow carries a cream pill, and inside a column flexbox an
 * inline-flex child stretches to the full width, which turned a three word
 * label into a bar across the block. Nothing here inherits that. */
.mz-dp .mz-dp__bundle-eyebrow {
  align-self: flex-start;
  margin: 0;
  padding: 0;
  background: none;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--dp-primary);
}

/* The site's global dark-mode stylesheet repaints text it does not know
 * about, so the accent has to be restated. Same treatment .mz-dp__club-text
 * already needed. */
html[data-theme="dark"] .mz-dp__explain-close,
body[data-theme="dark"] .mz-dp__explain-close { color: #9ca3af !important; }

html[data-theme="dark"] .mz-dp .mz-dp__bundle-eyebrow,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-eyebrow {
  color: var(--dp-primary) !important;
}

html[data-theme="dark"] .mz-dp .mz-dp__bundle-now,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-now {
  color: var(--dp-primary) !important;
}

/* WooCommerce wraps a price in its own span, and the site's dark-mode sheet
 * paints that span. Colouring the <strong> around it never reached the digits,
 * which is how the amount came out white on a light ground. Stated on the
 * price element itself, in both themes. */
.mz-dp .mz-dp__bundle-club,
.mz-dp .mz-dp__bundle-club strong,
.mz-dp .mz-dp__bundle-club .woocommerce-Price-amount,
.mz-dp .mz-dp__bundle-club bdi,
html[data-theme="dark"] .mz-dp .mz-dp__bundle-club,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club,
html[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong,
html[data-theme="dark"] .mz-dp .mz-dp__bundle-club .woocommerce-Price-amount,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club .woocommerce-Price-amount,
html[data-theme="dark"] .mz-dp .mz-dp__bundle-club bdi,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club bdi {
  color: var(--dp-text) !important;
}

.mz-dp .mz-dp__bundle-club strong,
html[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong {
  color: var(--dp-primary, #5FA886) !important;
  font-weight: 800;
}

.mz-dp .mz-dp__bundle-club strong .woocommerce-Price-amount,
.mz-dp .mz-dp__bundle-club strong bdi,
html[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong .woocommerce-Price-amount,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong .woocommerce-Price-amount,
html[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong bdi,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club strong bdi {
  color: var(--dp-primary, #5FA886) !important;
}

.mz-dp .mz-dp__bundle-title {
  margin: 0;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  line-height: 1.22;
  font-weight: 800;
  color: var(--dp-text);
  text-wrap: balance;
}

.mz-dp .mz-dp__bundle-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.mz-dp .mz-dp__bundle-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--dp-border);
  font-size: .92rem;
  color: var(--dp-muted);
  font-variant-numeric: tabular-nums;
}

.mz-dp .mz-dp__bundle-item:last-child { border-bottom: 0; }

.mz-dp .mz-dp__bundle-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--dp-primary);
  cursor: pointer;
}

.mz-dp .mz-dp__bundle-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mz-dp .mz-dp__bundle-item-label {
  min-width: 0;
  cursor: pointer;
}

.mz-dp .mz-dp__bundle-item-name {
  color: var(--dp-text);
  font-weight: 600;
}

/* An unticked row steps back without disappearing, so the offer stays legible. */
.mz-dp .mz-dp__bundle-check:not(:checked) ~ .mz-dp__bundle-item-main .mz-dp__bundle-item-name,
.mz-dp .mz-dp__bundle-check:not(:checked) ~ .mz-dp__bundle-item-price {
  opacity: .45;
  text-decoration: line-through;
}

.mz-dp .mz-dp__bundle-item-price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.mz-dp .mz-dp__bundle-item-was {
  color: var(--dp-muted);
  font-size: .85em;
}

.mz-dp .mz-dp__bundle-item-price b { color: var(--dp-text); font-weight: 700; }

/* The anchor of the block. Everything above it is context. */
.mz-dp .mz-dp__bundle-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 2px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  font-variant-numeric: tabular-nums;
}

.mz-dp .mz-dp__bundle-now {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  color: var(--dp-primary);
}

.mz-dp .mz-dp__bundle-was {
  font-size: .95rem;
  color: var(--dp-muted);
  text-decoration: line-through;
}

.mz-dp .mz-dp__bundle-save {
  margin-inline-start: auto;
  font-size: .75rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-primary);
  color: #ffffff;
  white-space: nowrap;
}

/* The same treatment the hero's club line gets: a soft green wash with a
 * dashed brand border, rather than a slab of cream. The cream also forced
 * dark ink in both themes, which fought the dark-mode sheet on every element
 * inside it. */
.mz-dp .mz-dp__bundle-club {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(95, 168, 134, .08);
  border: 1px dashed var(--dp-primary, #5FA886);
  color: var(--dp-text);
  font-size: .9rem;
}

.mz-dp .mz-dp__bundle-club strong { font-weight: 800; }

.mz-dp a.mz-dp__bundle-club-link {
  padding: 5px 12px;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-primary);
  color: #ffffff !important;   /* the global dark-mode rule uses !important too */
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.mz-dp a.mz-dp__bundle-club-link:hover {
  background: var(--dp-primary-dark);
  color: #ffffff !important;
}

.mz-dp .mz-dp__bundle-cta {
  align-self: flex-start;
  margin-top: 2px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-primary);
  color: #ffffff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s var(--dp-ease), transform .18s var(--dp-ease);
}

.mz-dp .mz-dp__bundle-cta:hover,
.mz-dp .mz-dp__bundle-cta:focus-visible {
  background: var(--dp-primary-dark);
  transform: translateY(-2px);
}

.mz-dp .mz-dp__bundle-cta:focus-visible {
  outline: 3px solid var(--dp-focus);
  outline-offset: 3px;
}

.mz-dp .mz-dp__bundle-cta[disabled],
.mz-dp .mz-dp__bundle-cta[aria-busy="true"] {
  opacity: .6;
  cursor: default;
  transform: none;
}

/* An explicit display beats the browser's [hidden], so it has to be restated.
 * Without this the confirmation sat on the page from first paint, announcing a
 * cart nobody had filled.
 *
 * The same trap caught the club row, which declares display:flex further down.
 * Unticking a pack left it insisting members pay for three while the total
 * beside it had already dropped to one. Any element the script hides and this
 * sheet gives a display to belongs on this list, and HiddenAttributeTest fails
 * the build if one is added without it. */
.mz-dp .mz-dp__bundle-done[hidden],
.mz-dp .mz-dp__bundle-club[hidden] { display: none; }

/* ------------------------------------------------------------- club login */

/* Someone already signed in has nothing to sign in for. The page is cached, so
 * the server cannot tell who is asking; the cached copy is always the
 * logged-out one, and WordPress puts logged-in on the body of the fresh render
 * a member gets. That makes this the one check that is correct in both cases. */
body.logged-in .mz-dp .mz-dp__bundle-login { display: none; }

/* A line of text under the buy button, not a second button beside it.
   Three full width targets stacked in one block gave the eye no ranking, and
   only one of them is the goal. Buying is the button; signing in is a
   sentence for the people it applies to; the club explainer is quiet text.
   Same reasoning that took "בדיקת זכאות" out in plan 08 of phase 6: nothing
   should pull the reader off the page at the moment of the decision. */
.mz-dp .mz-dp__bundle-login {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .9rem;
  color: var(--dp-muted);
  text-align: center;
}

.mz-dp .mz-dp__bundle-login-lead { color: var(--dp-muted); }

.mz-dp .mz-dp__bundle-login[hidden] { display: none; }

.mz-dp .mz-dp__bundle-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  /* 44px minimum: below that it stops being reliably tappable on a phone. */
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 10px;
  /* The theme reset paints every button #c36 and fills the background on
   * focus, so background, border and colour are all restated in every state.
   * Dropping any one of them brings the pink back. */
  background: #ffffff !important;
  border: 1px solid var(--dp-border, #e5e7eb) !important;
  color: #374151 !important;
  font: 600 15px/1.4 inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: background 150ms var(--dp-ease, ease-out), border-color 150ms var(--dp-ease, ease-out);
}

.mz-dp .mz-dp__bundle-login-btn span { color: inherit !important; }
.mz-dp .mz-dp__bundle-login-btn svg { flex-shrink: 0; }

.mz-dp .mz-dp__bundle-login-btn:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.mz-dp .mz-dp__bundle-login-btn:active { transform: scale(.98); }

.mz-dp .mz-dp__bundle-login-btn:focus-visible {
  outline: 3px solid var(--dp-focus, rgba(95, 168, 134, .45));
  outline-offset: 2px;
}

.mz-dp .mz-dp__bundle-login-btn[disabled] { opacity: .6; cursor: default; }

html[data-theme="dark"] .mz-dp .mz-dp__bundle-login-btn,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-login-btn {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #e5e7eb !important;
  box-shadow: none;
}

html[data-theme="dark"] .mz-dp .mz-dp__bundle-login-btn:hover,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-login-btn:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: #e5e7eb !important;
}

/* Ultimate Member's own button is never shown. The script reads the sign-in
 * URL out of it and navigates, so it does not have to be reachable.
 *
 * This was an off-screen clip first, because clicking it was the mechanism and
 * a hidden subtree cannot be clicked. On the live page it escaped the clip and
 * the block rendered two Google buttons. The template now carries display:none
 * inline as well, so the first paint is covered before this file arrives; this
 * rule is the belt to that pair of braces. */
.mz-dp .mz-dp__bundle-login-um,
.mz-dp .mz-dp__bundle-login-um * { display: none !important; }

.mz-dp .mz-dp__bundle-done {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--dp-surface);
  border: 1px solid var(--dp-primary);
  color: var(--dp-text);
  font-size: .9rem;
  font-weight: 700;
}

.mz-dp a.mz-dp__bundle-next {
  margin-inline-start: auto;
  padding: 7px 16px;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-primary);
  color: #ffffff !important;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mz-dp a.mz-dp__bundle-next:hover,
.mz-dp a.mz-dp__bundle-next:focus-visible {
  background: var(--dp-primary-dark);
  color: #ffffff !important;
}

/* Narrow column: stack, and let the posters lead. */
@container (max-width: 560px) {
  .mz-dp .mz-dp__bundle {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mz-dp .mz-dp__bundle-media { justify-content: flex-start; }
  .mz-dp .mz-dp__bundle-thumb { height: 150px; }
  .mz-dp .mz-dp__bundle-cta { align-self: stretch; text-align: center; }
  .mz-dp .mz-dp__bundle-save { margin-inline-start: 0; }
}

/* A phone is a viewport problem, not a container one, and this also covers
 * browsers without container query support. */
@media (max-width: 767px) {
  .mz-dp .mz-dp__bundle {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    margin: 24px auto;
  }

  .mz-dp .mz-dp__bundle-media { justify-content: flex-start; }
  .mz-dp .mz-dp__bundle-thumb { height: 128px; }
  .mz-dp .mz-dp__bundle-now { font-size: 1.75rem; }
  .mz-dp .mz-dp__bundle-cta { align-self: stretch; text-align: center; }
  .mz-dp .mz-dp__bundle-save { margin-inline-start: 0; }

  /* The name and its trigger stay on one line together; only the price is
     allowed to drop, and only when the name is genuinely long. */
  .mz-dp .mz-dp__bundle-item { flex-wrap: wrap; }
  .mz-dp .mz-dp__bundle-item-main { flex: 1 1 60%; }
  .mz-dp .mz-dp__bundle-item-price { margin-inline-start: auto; }

  .mz-dp .mz-dp__bundle-club { flex-direction: column; align-items: flex-start; }
  .mz-dp .mz-dp__bundle-done { flex-direction: column; align-items: flex-start; }
  .mz-dp a.mz-dp__bundle-next { margin-inline-start: 0; }
}

/* Nothing in the block may push the page sideways. */
.mz-dp .mz-dp__bundle,
.mz-dp .mz-dp__bundle * { max-width: 100%; }
.mz-dp .mz-dp__bundle-list { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .mz-dp .mz-dp__bundle-cta { transition: none; }
  .mz-dp .mz-dp__bundle-cta:hover { transform: none; }
}

/* -------------------------------------------------------------- explainer
 * Opened from a row for a product the visitor is not already looking at.
 * Rendered with the block and hidden, so opening costs no request.
 */

.mz-dp .mz-dp__bundle-explain {
  flex: 0 0 auto;
  padding: 2px 9px;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-pill);
  background: none;
  color: var(--dp-muted);
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
}

.mz-dp .mz-dp__bundle-explain:hover,
.mz-dp .mz-dp__bundle-explain:focus-visible {
  border-color: var(--dp-primary);
  color: var(--dp-primary);
}

.mz-dp .mz-dp__bundle-explain:focus-visible {
  outline: 3px solid var(--dp-focus);
  outline-offset: 2px;
}

/* A closed dialog takes no space, and we say so ourselves rather than trusting
   the browser default to survive.
   Something on the live site gives `dialog` an explicit display, which beats
   the UA rule and left the closed panel occupying its full height: on Vietnam
   that was roughly 80vh of blank page between the bundle and the footer.
   Same family as the orphan `</p>` in alpha.46, and the same lesson the
   handoff records: `[hidden]` and UA defaults both lose to an explicit
   `display`. */
.mz-dp__explain:not([open]) {
  display: none !important;
}

.mz-dp__explain {
  width: min(520px, calc(100vw - 32px));
  max-height: 82vh;
  padding: 0;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-card);
  background: var(--dp-bg);
  color: var(--dp-text);
  direction: rtl;
  overflow: hidden;              /* the inner column scrolls, not the dialog */
}

.mz-dp__explain::backdrop { background: rgba(9, 14, 24, .55); }

.mz-dp__explain-inner {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

/* Sticky rather than absolute: the way out follows the reader down a long
 * list instead of scrolling away with the first paragraph. */
.mz-dp__explain-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--dp-bg);
  border-block-end: 1px solid var(--dp-border);
}

/* A thumbnail, not a banner. The panel is here to explain, and a poster
 * across the top pushed every word of that below the fold. */
.mz-dp__explain-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--dp-border);
}

.mz-dp__explain-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--dp-text);
  text-wrap: balance;
}

.mz-dp__explain-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--dp-border);
  border-radius: 50%;
  background: var(--dp-surface);
  /* The theme and Elementor both paint buttons globally, which is how this
     one came out pink. Stated loudly, and on the inner span too, since the
     glyph is what actually takes the colour. */
  color: #6b7280 !important;
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s var(--dp-ease), color .15s var(--dp-ease), border-color .15s var(--dp-ease);
}

/* The shape follows the button's own colour, which is stated below and is the
 * only thing that has to hold. The inline style on the path takes currentColor,
 * so no global svg rule gets a say. */
.mz-dp__explain-close .mz-dp__explain-close-icon { display: block; }

.mz-dp__explain-close:hover,
.mz-dp__explain-close:focus-visible {
  background: var(--dp-primary);
  border-color: var(--dp-primary);
  color: #ffffff !important;
}

.mz-dp__explain-close:focus-visible {
  outline: 3px solid var(--dp-focus);
  outline-offset: 2px;
}

.mz-dp__explain-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.mz-dp__explain-subtitle {
  margin: 0;
  color: var(--dp-primary);
  font-weight: 700;
  font-size: .95rem;
}

.mz-dp__explain-intro {
  margin: 0;
  color: var(--dp-muted);
  line-height: 1.7;
  max-width: 56ch;
}

.mz-dp__explain-count {
  margin: 4px 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--dp-primary);
}

.mz-dp__explain-destinations {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mz-dp__explain-destinations li {
  padding: 4px 11px;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  font-size: .82rem;
  color: var(--dp-text);
}

.mz-dp__explain-format {
  margin: 0;
  font-size: .85rem;
  color: var(--dp-muted);
}

.mz-dp__explain-price {
  margin: 6px 0 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dp-text);
  font-variant-numeric: tabular-nums;
}

.mz-dp a.mz-dp__explain-link {
  align-self: flex-start;
  padding: 10px 22px;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-primary);
  color: #ffffff !important;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

.mz-dp a.mz-dp__explain-link:hover,
.mz-dp a.mz-dp__explain-link:focus-visible {
  background: var(--dp-primary-dark);
  color: #ffffff !important;
}

/* On a phone it reads as a sheet from the bottom. The dialog is centred by
 * the UA, so it is pinned to the bottom explicitly and the header keeps the
 * close button in reach of a thumb. */
@media (max-width: 600px) {
  .mz-dp__explain {
    width: 100vw;
    max-width: none;
    max-height: 88vh;
    margin: auto 0 0;
    border-inline: 0;
    border-block-end: 0;
    border-radius: 18px 18px 0 0;
  }

  .mz-dp__explain-head { padding: 14px 16px; }
  .mz-dp__explain-thumb { width: 44px; height: 44px; }
  .mz-dp__explain-title { font-size: 1rem; }
  .mz-dp__explain-close { width: 40px; height: 40px; }
  .mz-dp__explain-body { padding: 16px 16px 24px; }
  .mz-dp a.mz-dp__explain-link { align-self: stretch; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .mz-dp__explain[open] { animation: mz-explain-in .2s var(--dp-ease); }
}

@keyframes mz-explain-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------- theme button reset
 * Hello Elementor's reset.css paints every button on the site:
 *
 *   [type=button],[type=submit],button { border:1px solid #c36; color:#c36 }
 *   button:focus, button:hover         { background-color:#c36; color:#fff }
 *
 * #c36 is a raspberry pink. button:focus outranks a plain class selector, so
 * our own background lost, and since the close button is focused the moment
 * the panel opens it rendered as a solid pink disc. Every button in this
 * block is affected, not only that one, so the inherited paint is cleared
 * here once and each button states its own afterwards.
 */

.mz-dp button.mz-dp__bundle-cta,
.mz-dp button.mz-dp__bundle-explain,
.mz-dp button.mz-dp__explain-close,
.mz-dp button.mz-dp__bundle-cta:hover,
.mz-dp button.mz-dp__bundle-explain:hover,
.mz-dp button.mz-dp__explain-close:hover,
.mz-dp button.mz-dp__bundle-cta:focus,
.mz-dp button.mz-dp__bundle-explain:focus,
.mz-dp button.mz-dp__explain-close:focus {
  border-color: currentColor;
  text-decoration: none;
}

/* Each button then paints itself, loudly enough to hold against :focus. */
.mz-dp button.mz-dp__bundle-cta,
.mz-dp button.mz-dp__bundle-cta:focus {
  background-color: var(--dp-primary, #5FA886) !important;
  border: 0 !important;
  color: #ffffff !important;
}

.mz-dp button.mz-dp__bundle-cta:hover,
.mz-dp button.mz-dp__bundle-cta:focus-visible {
  background-color: var(--dp-primary-dark, #478568) !important;
  color: #ffffff !important;
}

.mz-dp button.mz-dp__bundle-explain,
.mz-dp button.mz-dp__bundle-explain:focus {
  background-color: transparent !important;
  border: 1px solid var(--dp-border, rgba(17,24,39,.15)) !important;
  color: var(--dp-muted, #6b7280) !important;
}

.mz-dp button.mz-dp__bundle-explain:hover,
.mz-dp button.mz-dp__bundle-explain:focus-visible {
  background-color: transparent !important;
  border-color: var(--dp-primary, #5FA886) !important;
  color: var(--dp-primary, #5FA886) !important;
}

.mz-dp button.mz-dp__explain-close,
.mz-dp button.mz-dp__explain-close:focus {
  background-color: var(--dp-surface, #f6f7f9) !important;
  border: 1px solid var(--dp-border, rgba(17,24,39,.15)) !important;
  color: #6b7280 !important;
}

.mz-dp button.mz-dp__explain-close:hover,
.mz-dp button.mz-dp__explain-close:focus-visible {
  background-color: var(--dp-primary, #5FA886) !important;
  border-color: var(--dp-primary, #5FA886) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .mz-dp button.mz-dp__explain-close,
body[data-theme="dark"] .mz-dp button.mz-dp__explain-close {
  color: #9ca3af !important;
}

/* The badge keeps its own colours in both themes. */
.mz-dp .mz-dp__eyebrow,
html[data-theme="dark"] .mz-dp .mz-dp__eyebrow,
body[data-theme="dark"] .mz-dp .mz-dp__eyebrow {
  background: var(--dp-primary, #5FA886) !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------- hero image
 * Beside the buying decision on a wide screen, under it on a narrow one.
 * The column only exists when the product actually has a featured image,
 * so a product without one keeps the full width rather than leaving a hole.
 */

.mz-dp .mz-dp__hero--with-image {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}

.mz-dp .mz-dp__hero--with-image .mz-dp__hero-body { min-width: 0; }

.mz-dp .mz-dp__hero-media {
  margin: 0;
  min-width: 0;
}

.mz-dp .mz-dp__hero-media img {
  display: block;
  width: 100%;
  height: auto;
  /* A portrait poster would otherwise run far past the text beside it. */
  max-height: 460px;
  object-fit: contain;
  border-radius: var(--dp-radius-card);
}

@media (max-width: 900px) {
  .mz-dp .mz-dp__hero--with-image {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Under the text, not above it: the price and the button come first. */
  .mz-dp .mz-dp__hero-media { order: 2; }
  .mz-dp .mz-dp__hero--with-image .mz-dp__hero-body { order: 1; }
  .mz-dp .mz-dp__hero-media img { max-height: 340px; margin-inline: auto; }
}

/* The hero's club line carries a price through the same WooCommerce wrapper,
 * so it needs the same statement or the digits go white on a light ground. */
.mz-dp .mz-dp__club-text .woocommerce-Price-amount,
.mz-dp .mz-dp__club-text bdi,
html[data-theme="dark"] .mz-dp .mz-dp__club-text .woocommerce-Price-amount,
body[data-theme="dark"] .mz-dp .mz-dp__club-text .woocommerce-Price-amount,
html[data-theme="dark"] .mz-dp .mz-dp__club-text bdi,
body[data-theme="dark"] .mz-dp .mz-dp__club-text bdi {
  color: var(--dp-primary, #5FA886) !important;
}

/* ----------------------------------------------------------------- author
 * Who wrote this. One record per writer, pointed at from the product, so a
 * bio is written once rather than copied onto every pack.
 */

.mz-dp .mz-dp__author {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  margin-top: 28px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-card);
  background: var(--dp-surface);
}

.mz-dp .mz-dp__author-portrait {
  flex: 0 0 auto;
  margin: 0;
}

.mz-dp .mz-dp__author-portrait img {
  display: block;
  width: clamp(84px, 12vw, 112px);
  height: clamp(84px, 12vw, 112px);
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--dp-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.mz-dp .mz-dp__author-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mz-dp .mz-dp__author-eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--dp-primary);
}

.mz-dp .mz-dp__author-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dp-text);
}

.mz-dp .mz-dp__author-role {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--dp-muted);
}

.mz-dp .mz-dp__author-bio {
  margin: 6px 0 0;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--dp-text);
  max-width: 62ch;
}

html[data-theme="dark"] .mz-dp .mz-dp__author-eyebrow,
body[data-theme="dark"] .mz-dp .mz-dp__author-eyebrow {
  color: var(--dp-primary) !important;
}

/* The portrait leads on a phone, then the words. */
@media (max-width: 600px) {
  .mz-dp .mz-dp__author {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .mz-dp .mz-dp__author-portrait img { width: 76px; height: 76px; }
}

/* The member's own line. States a fact rather than making an offer, so it is
 * quieter than the club row it replaces: no button, no border competing with
 * the total above it. */
.mz-dp .mz-dp__bundle-club--member {
  display: block;
  background: none;
  border: 0;
  padding: 4px 0 0;
  font-size: .9rem;
  color: var(--dp-muted, #6b7280);
}

html[data-theme="dark"] .mz-dp .mz-dp__bundle-club--member,
body[data-theme="dark"] .mz-dp .mz-dp__bundle-club--member {
  color: var(--dp-muted, #9ca3af);
}

/* ── Joining the club, and the line that points at the bundle ───────────────
   Same shape phase 9 settled on: one prominent button, and quiet sentences
   under it. The join offer is a second action, never a second button — three
   full-width targets in one block is exactly what that phase removed. */

.mz-dp .mz-dp__bundle-join {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: .9rem;
  color: var(--dp-muted);
}

.mz-dp .mz-dp__bundle-join[hidden] { display: none; }

/* The reason, above the price. The block spent its whole life quoting a
   discount worth a few shekels and never saying what the club actually is. */
.mz-dp .mz-dp__bundle-join-value {
  color: var(--dp-text);
  font-weight: 600;
}

.mz-dp .mz-dp__bundle-join-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 10px 8px;          /* 44px tall with the line box, for a thumb */
  min-height: 44px;
  font: inherit;
  color: var(--dp-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 8px;
  transition: color 150ms var(--dp-ease, ease-out);
}

.mz-dp .mz-dp__bundle-join-btn:hover { color: var(--dp-text); }

.mz-dp .mz-dp__bundle-join-btn:focus-visible {
  outline: 3px solid var(--dp-focus, rgba(95, 168, 134, .45));
  outline-offset: 2px;
}

.mz-dp .mz-dp__bundle-join-btn strong { color: var(--dp-text); }

.mz-dp .mz-dp__bundle-join-price { font-size: .85rem; }

/* The hero points down instead of competing. Hidden until the script has
   found a block to point at, because the two are placed separately and the
   hero renders first. */
.mz-dp .mz-dp__to-bundle {
  margin: 10px 0 0;
  text-align: start;
}

.mz-dp .mz-dp__to-bundle[hidden] { display: none; }

.mz-dp .mz-dp__to-bundle-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 10px 8px;
  min-height: 44px;
  font: inherit;
  font-size: .9rem;
  color: var(--dp-primary-dark);
  text-align: start;
  cursor: pointer;
  border-radius: 8px;
}

.mz-dp .mz-dp__to-bundle-btn:hover { text-decoration: underline; }

.mz-dp .mz-dp__to-bundle-btn:focus-visible {
  outline: 3px solid var(--dp-focus, rgba(95, 168, 134, .45));
  outline-offset: 2px;
}

/* ── The club panel ────────────────────────────────────────────────────────
   Reuses the explainer dialog each product already opens, so there is one
   focus trap, one close behaviour and one set of keyboard rules on the page
   rather than two that drift. */

.mz-dp .mz-dp__club-panel-lead {
  margin: 0 0 12px;
  color: var(--dp-muted);
  font-size: .95rem;
}

.mz-dp .mz-dp__club-panel-value {
  margin: 0 0 18px;
  padding-inline-start: 18px;
  color: var(--dp-text);
  font-size: .95rem;
  line-height: 1.7;
}

.mz-dp .mz-dp__club-panel-plans {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

/* Each plan is a stack of facts with one action beside it.
   Explicit rows rather than wrapping: the per-month figure is absent whenever
   no term was configured, and a flex layout would have quietly reflowed the
   whole row around the hole. The grid keeps the same shape either way. */
.mz-dp .mz-dp__club-panel-plan {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  padding: 14px;
  border: 1px solid var(--dp-border);
  border-radius: 12px;
  background: var(--dp-surface);
}

.mz-dp .mz-dp__club-panel-plan-name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  color: var(--dp-text);
}

.mz-dp .mz-dp__club-panel-plan-price {
  grid-column: 1;
  grid-row: 2;
  color: var(--dp-text);
}

/* The one axis the three compare on, and the one where the longer plans win. */
.mz-dp .mz-dp__club-panel-plan-month {
  grid-column: 1;
  grid-row: 3;
  color: var(--dp-primary-dark);
  font-size: .9rem;
}

/* A fact, never a verdict. Shown even when it is the larger number. */
.mz-dp .mz-dp__club-panel-plan-today {
  grid-column: 1;
  grid-row: 4;
  color: var(--dp-muted);
  font-size: .9rem;
}

.mz-dp .mz-dp__club-panel-join {
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 44px;
  padding: 10px 22px;
  white-space: nowrap;
}

/* Narrow screens: the button takes its own row rather than squeezing the
   figures into two words per line. */
@media (max-width: 420px) {
  .mz-dp .mz-dp__club-panel-plan { grid-template-columns: 1fr; }

  .mz-dp .mz-dp__club-panel-join {
    grid-column: 1;
    grid-row: auto;
    margin-block-start: 10px;
    width: 100%;
  }
}

/* The dialog itself has to fit a phone. */
.mz-dp .mz-dp__club-panel {
  width: min(560px, calc(100vw - 32px));
}


/* The dialog centres itself only while the browser's own margins survive. The
   width override above was enough to lose them on some engines, which pinned
   the panel to a corner. */
.mz-dp .mz-dp__club-panel { margin: auto; }

/* The club trigger became a <button> when it stopped being a link to /club/,
   and the rule above only ever matched an <a>. It fell through to the theme's
   own button styling, which is sized for a primary action — three times what
   this quiet one should be. Same compact shape as before, on both elements. */
.mz-dp button.mz-dp__bundle-club-link {
  padding: 5px 12px;
  min-height: 0;
  border: 0;
  border-radius: var(--dp-radius-pill);
  background: var(--dp-primary);
  color: #ffffff !important;   /* the global dark-mode rule uses !important too */
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.mz-dp button.mz-dp__bundle-club-link:hover {
  background: var(--dp-primary-dark);
  color: #ffffff !important;
}

.mz-dp button.mz-dp__bundle-club-link:focus-visible {
  outline: 3px solid var(--dp-focus, rgba(95, 168, 134, .45));
  outline-offset: 2px;
}

/* The hero's pointer at the bundle carries a whole sentence with two amounts
   in it. On a phone that ran off the edge: a button does not wrap by default,
   and the price markup inside it will not break on its own. */
.mz-dp .mz-dp__to-bundle-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.mz-dp .mz-dp__to-bundle-btn .amount,
.mz-dp .mz-dp__to-bundle-btn bdi {
  white-space: nowrap;   /* an amount may not break, the sentence around it may */
}

@media (max-width: 480px) {
  .mz-dp .mz-dp__to-bundle-btn {
    padding-inline: 0;
    font-size: .85rem;
  }
}

/* A named icon is drawn at the same weight as the text beside it, unlike the
   tick, which is heavier on purpose because it is a mark rather than a picture. */
.mz-dp .mz-dp__fit-icon {
  /* Thinner than the tick on purpose: a mark wants weight, a picture at 34px
     wants air. The same stroke that reads as solid at 20px reads as heavy here. */
  stroke-width: 1.6;
}