/* =========================================================
   MyHotips one button system (theme 1.4.7)
   Loaded last. The top bar and the plain-text sidebar filters are deliberately not touched.

   1. Action buttons  : rounded badge buttons (as the Seasonal Picks badge) - icon circle, label, ONE arrow
   2. Labels/filters  : solid caps pills, same colours on cards and filters, hover on all
   3. Page numbers    : the chunky round hub style everywhere
   4. Hub layout      : one hero button, beige band with balanced buttons and topic filters
   5. Seasonal cards  : label pinned top, title max 3 lines, action pinned bottom
   ========================================================= */

:root{
  --mht-ui-btn-h: 40px;
  --mht-ui-btn-icon: 24px;
  --mht-ui-btn-font: 600 12.5px/1.2 var(--font-body, Montserrat, Arial, sans-serif);
  --mht-ui-pill-h: 26px;
  --mht-ui-pill-font: 800 10px/1 var(--font-body, Montserrat, Arial, sans-serif);
  --mht-ui-pill-track: .07em;
  --mht-ui-wellness: var(--color-wellness-dark, #587760);
  --mht-ui-wellness-deep: #3f5a46;
  --mht-ui-money: var(--color-section-money-dark, #3b4b6b);
  --mht-ui-money-deep: var(--color-dark, #2e3b55);
  --mht-ui-page: 40px;
}

/* ---------------------------------------------------------
   1. ACTION BUTTONS
   --------------------------------------------------------- */
.mht-context-hero__pill,
.mht-context-hero__pill:visited,
.hotips-area-landing__content-menu-link,
a.mht-lane-tab,
.mht-pg .mht-pg-button,
.hotips-section-guide-card__button{
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--mht-ui-btn-h);
  padding: 5px 14px;
  border-radius: 999px;
  font: var(--mht-ui-btn-font);
  letter-spacing: -.005em;
  text-decoration: none;
  text-transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}
.mht-context-hero__pill:hover,
.mht-context-hero__pill:focus-visible,
.hotips-area-landing__content-menu-link:hover,
.hotips-area-landing__content-menu-link:focus-visible,
a.mht-lane-tab:hover,
a.mht-lane-tab:focus-visible,
.mht-pg .mht-pg-button:hover,
.mht-pg .mht-pg-button:focus-visible,
.hotips-section-guide-card__button:hover,
.hotips-section-guide-card__button:focus-visible{
  transform: translateY(-1px);
  filter: brightness(1.07);
  text-decoration: none;
}

/* Lane colours: solid, readable on any background */
.mht-context-hero__pill--wellness,
.hotips-area-landing__content-menu--wellness .hotips-area-landing__content-menu-link,
a.mht-lane-tab--wellness{
  background: linear-gradient(145deg, var(--mht-ui-wellness), var(--mht-ui-wellness-deep));
  border: 1px solid color-mix(in srgb, var(--mht-ui-wellness) 70%, #fff 30%);
  color: #fff;
}
.mht-context-hero__pill--money,
.hotips-area-landing__content-menu--money .hotips-area-landing__content-menu-link,
a.mht-lane-tab--money,
.mht-pg .mht-pg-button{
  background: linear-gradient(145deg, var(--mht-ui-money), var(--mht-ui-money-deep));
  border: 1px solid color-mix(in srgb, var(--mht-ui-money) 65%, #fff 35%);
  color: #fff;
}
.mht-context-hero__pill.mht-context-hero__pill--wellness:is(:hover,:focus-visible){
  background: linear-gradient(145deg, var(--mht-ui-wellness), var(--mht-ui-wellness-deep));
  border-color: color-mix(in srgb, var(--mht-ui-wellness) 50%, #fff 50%);
  color: #fff;
}
.mht-context-hero__pill.mht-context-hero__pill--money:is(:hover,:focus-visible){
  background: linear-gradient(145deg, var(--mht-ui-money), var(--mht-ui-money-deep));
  border-color: color-mix(in srgb, var(--mht-ui-money) 45%, #fff 55%);
  color: #fff;
}
.hotips-area-landing__content-menu-link:hover, a.mht-lane-tab:hover, .mht-pg .mht-pg-button:hover{ color: #fff; }

/* ONE arrow: hero pills draw theirs with ::after; buttons that carry a text arrow keep only that */
.mht-context-hero__pill::after{ content: "›"; font: 400 20px/1 Arial, sans-serif; margin-left: 2px; }
.mht-context-hero__pill--down::after{ content: "↓"; font-size: 15px; }
.mht-context-hero__pill > span[aria-hidden="true"]:last-child:not(.mht-context-hero__pill-icon){ display: none; }

/* Icon circle, same size everywhere */
.mht-context-hero__pill-icon,
.mht-lane-tab__icon{
  flex: 0 0 var(--mht-ui-btn-icon);
  width: var(--mht-ui-btn-icon);
  height: var(--mht-ui-btn-icon);
  border-radius: 999px;
}
.mht-context-hero__pill--hub,
a.mht-lane-tab{ padding-left: 6px; }

/* Lane tabs: single line, badge proportions */
a.mht-lane-tab{ width: 100%; min-height: var(--mht-ui-btn-h); }
.mht-lane-tab__icon{ padding: 3px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); box-sizing: border-box; }
.mht-lane-tab__label{ font: var(--mht-ui-btn-font); }
.mht-lane-tab__sub{ display: none; }
.mht-lane-tab__arrow{ margin-left: auto; font: 400 20px/1 Arial, sans-serif; }

/* Toolkit "start here" and guide buttons */
.mht-pg-directory__lead{ border-radius: 999px; min-height: var(--mht-ui-btn-h); }
.hotips-section-guide-card__button--ghost{
  background: transparent;
  border: 1px solid currentColor;
}

/* ---------------------------------------------------------
   2. LABELS AND FILTERS: solid caps pills
   --------------------------------------------------------- */
.mht-content-card__label,
.hotips-area-landing__filter,
.mht-discovery-tile .mht-discovery-label,
.mht-ui-pill{
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: var(--mht-ui-pill-h);
  padding: 0 11px;
  border-radius: 999px;
  font: var(--mht-ui-pill-font);
  letter-spacing: var(--mht-ui-pill-track);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
}

/* Card labels: opaque in the card's lane colour (cards themselves stay glassy).
   Set through the cards' own variables so their hover rules keep working. */
.mht-content-card.mht-content-card{
  --mht-card-label-bg: var(--mht-ui-money-deep);
  --mht-card-label-bg-hover: var(--mht-ui-money);
  --mht-card-label-border: color-mix(in srgb, var(--mht-ui-money) 60%, #fff 40%);
  --mht-card-label-text: #fff;
}
.mht-content-card.mht-content-card--wellness{
  --mht-card-label-bg: var(--mht-ui-wellness-deep);
  --mht-card-label-bg-hover: var(--mht-ui-wellness);
  --mht-card-label-border: color-mix(in srgb, var(--mht-ui-wellness) 60%, #fff 40%);
}
.mht-content-card.mht-content-card--seasonal{
  --mht-card-label-bg: var(--season-dark, #4a2c22);
  --mht-card-label-bg-hover: var(--season-bg, #78452f);
  --mht-card-label-border: var(--season-edge, #c9a04f);
  --mht-card-label-text: var(--season-text, #fff8ef);
}
.mht-content-card .mht-content-card__label{
  background: var(--mht-card-label-bg);
  border: 1px solid var(--mht-card-label-border);
  color: var(--mht-card-label-text);
}

/* Topic filters on the hubs: same pill, white when idle, lane colour when hovered or chosen */
.hotips-area-landing__filter{
  background: #fff;
  border: 1px solid var(--border-color-light, #e3ded6);
  color: var(--area-landing-text, #2e3b55);
}
.hotips-area-landing__filter:hover,
.hotips-area-landing__filter:focus-visible,
.hotips-area-landing__filter.is-active{
  background: var(--area-landing-band-a, var(--mht-ui-money-deep));
  border-color: var(--area-landing-band-a, var(--mht-ui-money-deep));
  color: #fff;
  outline: none;
}

/* Seasonal labels on tiles: a proper pill in the season colour */
.mht-discovery-tile .mht-discovery-label{
  background: var(--season-dark, rgba(12,26,34,.82));
  border: 1px solid var(--season-edge, rgba(255,255,255,.35));
  color: var(--season-text, #fff);
}
.mht-discovery-tile:hover .mht-discovery-label{ filter: brightness(1.15); }

/* Kicker above seasonal hub titles: caps pill like Wellness / Money */
.mht-seasonal-hero .mht-seasonal-kicker.mht-ui-pill{
  margin: 0 0 10px;
  background: color-mix(in srgb, var(--season-dark, #4a2c22) 82%, transparent);
  border: 1px solid var(--season-edge, #c9a04f);
  color: var(--season-text, #fff8ef);
}

/* ---------------------------------------------------------
   3. PAGE NUMBERS: the chunky round hub style everywhere
   --------------------------------------------------------- */
.mht-pg-pagination,
.mht-seasonal-pagination,
.mht-site-search-pagination{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.mht-pg-pagination .page-numbers,
.mht-seasonal-pagination .page-numbers,
.mht-site-search-pagination .page-numbers{
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mht-ui-page);
  min-height: var(--mht-ui-page);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mht-ui-money) 30%, transparent);
  background: rgba(255,255,255,.86);
  color: var(--mht-ui-money-deep);
  font: 800 13px/1 var(--font-body, Montserrat, Arial, sans-serif);
  text-decoration: none;
}
.mht-pg-pagination .page-numbers.current,
.mht-pg-pagination a.page-numbers:hover,
.mht-pg-pagination a.page-numbers:focus-visible,
.mht-site-search-pagination .page-numbers.current,
.mht-site-search-pagination a.page-numbers:hover{
  background: var(--mht-ui-money-deep);
  border-color: var(--mht-ui-money-deep);
  color: #fff;
  outline: none;
}
.mht-seasonal-pagination .page-numbers.current,
.mht-seasonal-pagination a.page-numbers:hover,
.mht-seasonal-pagination a.page-numbers:focus-visible{
  background: var(--season-dark, #4a2c22);
  border-color: var(--season-edge, #c9a04f);
  color: var(--season-text, #fff8ef);
  outline: none;
}
.mht-seasonal-pagination .page-numbers.disabled{ opacity: .45; }

/* ---------------------------------------------------------
   4. HUB LAYOUT (1.4.8): one slim toolbar under the hero - "Filter by topic" dropdown + three buttons,
      in the phone style (icon, solid lane colour, rounded rectangle). No heading on desktop.
   --------------------------------------------------------- */
/* The phone dropdown and icons, used at every width (copied from the mobile rules in style.css) */
.hotips-area-landing__content-menu-link-icon{
  width:20px !important;
  height:20px !important;
  background:var(--mht-area-side-accent) !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  -webkit-mask-size:contain !important;
  mask-size:contain !important;
  }
.hotips-area-landing__content-menu-link--guide .hotips-area-landing__content-menu-link-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h5.5A2.5 2.5 0 0 1 12 5.5V21a3 3 0 0 0-3-3H4V3Zm16 0h-5.5A2.5 2.5 0 0 0 12 5.5V21a3 3 0 0 1 3-3h5V3Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h5.5A2.5 2.5 0 0 1 12 5.5V21a3 3 0 0 0-3-3H4V3Zm16 0h-5.5A2.5 2.5 0 0 0 12 5.5V21a3 3 0 0 1 3-3h5V3Z'/%3E%3C/svg%3E") !important;
  }
.hotips-area-landing__content-menu-link--latest .hotips-area-landing__content-menu-link-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h11a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2Zm13 5v10a1 1 0 0 0 2 0V8h-2ZM7 7v4h7V7H7Zm0 7v2h7v-2H7Zm0 4v1h7v-1H7Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h11a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2Zm13 5v10a1 1 0 0 0 2 0V8h-2ZM7 7v4h7V7H7Zm0 7v2h7v-2H7Zm0 4v1h7v-1H7Z'/%3E%3C/svg%3E") !important;
  }
.hotips-area-landing__content-menu-link--practical .hotips-area-landing__content-menu-link-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2 4v2h6V7H8Zm0 4v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm2 4v2h6V7H8Zm0 4v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E") !important;
  }
.hotips-area-landing__content-menu-link--seasonal .hotips-area-landing__content-menu-link-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c.5 3.2 2.3 5.1 5.5 5.8C14.3 8.5 12.5 10.4 12 14c-.5-3.6-2.3-5.5-5.5-6.2C9.7 7.1 11.5 5.2 12 2Zm6 10c.3 1.9 1.3 3 3 3.5-1.7.4-2.7 1.6-3 3.5-.3-1.9-1.3-3.1-3-3.5 1.7-.5 2.7-1.6 3-3.5ZM7 15c.4 2.4 1.7 3.8 4 4.3-2.3.5-3.6 1.9-4 4.3-.4-2.4-1.7-3.8-4-4.3 2.3-.5 3.6-1.9 4-4.3Z'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c.5 3.2 2.3 5.1 5.5 5.8C14.3 8.5 12.5 10.4 12 14c-.5-3.6-2.3-5.5-5.5-6.2C9.7 7.1 11.5 5.2 12 2Zm6 10c.3 1.9 1.3 3 3 3.5-1.7.4-2.7 1.6-3 3.5-.3-1.9-1.3-3.1-3-3.5 1.7-.5 2.7-1.6 3-3.5ZM7 15c.4 2.4 1.7 3.8 4 4.3-2.3.5-3.6 1.9-4 4.3-.4-2.4-1.7-3.8-4-4.3 2.3-.5 3.6-1.9 4-4.3Z'/%3E%3C/svg%3E") !important;
  }
.hotips-area-landing__filter-dropdown{
  --mht-mobile-filter-bg:var(--color-area-hub-money-band-a, var(--color-dark));
  --mht-mobile-filter-accent:var(--color-tech-accent);
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 0 var(--space-md) !important;
  padding:0 !important;
  border:1px solid color-mix(in srgb, var(--color-white) 22%, transparent) !important;
  border-radius:13px !important;
  background:var(--mht-mobile-filter-bg) !important;
  color:var(--color-white) !important;
  box-shadow:var(--shadow-sm) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  }
.hotips-area-landing__filter-dropdown--wellness{
  --mht-mobile-filter-bg:var(--color-area-hub-wellness-band-a, var(--color-wellness-dark));
  --mht-mobile-filter-accent:var(--color-wellness-accent);
  }
.hotips-area-landing__filter-dropdown-summary{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) 16px !important;
  align-items:center !important;
  gap:9px !important;
  min-height:50px !important;
  margin:0 !important;
  padding:9px 12px !important;
  color:inherit !important;
  font-family:var(--font-body) !important;
  font-size:11px !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  list-style:none !important;
  box-sizing:border-box !important;
  }
.hotips-area-landing__filter-dropdown-summary::-webkit-details-marker{
  display:none !important;
  }
.hotips-area-landing__filter-dropdown-summary > span:first-child{
  white-space:nowrap !important;
  }
.hotips-area-landing__filter-dropdown-summary strong{
  min-width:0 !important;
  overflow:hidden !important;
  color:color-mix(in srgb, var(--color-white) 86%, transparent) !important;
  font-size:11px !important;
  font-weight:650 !important;
  text-align:right !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  }
.hotips-area-landing__filter-dropdown-summary i{
  display:block !important;
  width:10px !important;
  height:10px !important;
  margin:0 !important;
  border-right:2px solid var(--mht-mobile-filter-accent) !important;
  border-bottom:2px solid var(--mht-mobile-filter-accent) !important;
  transform:translateY(-2px) rotate(45deg) !important;
  transition:transform var(--duration-fast) var(--ease-soft) !important;
  }
.hotips-area-landing__filter-dropdown[open] .hotips-area-landing__filter-dropdown-summary i{
  transform:translateY(3px) rotate(225deg) !important;
  }
.hotips-area-landing__filter-dropdown-menu{
  display:grid !important;
  gap:0 !important;
  margin:0 !important;
  padding:6px !important;
  border-top:1px solid color-mix(in srgb, var(--color-white) 18%, transparent) !important;
  background:color-mix(in srgb, var(--mht-mobile-filter-bg) 88%, var(--color-white) 12%) !important;
  }
.hotips-area-landing__filter-dropdown-option{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  margin:0 !important;
  padding:9px 10px !important;
  border:0 !important;
  border-bottom:1px solid color-mix(in srgb, var(--color-white) 14%, transparent) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--color-white) !important;
  font-family:var(--font-body) !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-align:left !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
  }
.hotips-area-landing__filter-dropdown-option:last-child{
  border-bottom:0 !important;
  }
.hotips-area-landing__filter-dropdown-option > span:first-child{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  }
.hotips-area-landing__filter-dropdown-option > span:last-child{
  flex:0 0 auto !important;
  color:var(--mht-mobile-filter-accent) !important;
  font-size:18px !important;
  line-height:1 !important;
  }
.hotips-area-landing__filter-dropdown-option.is-active,
  .hotips-area-landing__filter-dropdown-option[aria-current="page"]{
  border-radius:8px !important;
  background:var(--color-surface) !important;
  color:var(--color-heading) !important;
  font-weight:850 !important;
  }

.hotips-area-landing__content-menu{
  display: block !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  overflow: visible !important;
}
.mht-hub-toolbar{
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.mht-hub-toolbar .hotips-area-landing__filter-dropdown{
  position: relative;
  flex: 0 0 260px;
  width: 260px !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 20;
}
.mht-hub-toolbar .hotips-area-landing__filter-dropdown-summary{ min-height: 44px !important; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px !important; }
.mht-hub-toolbar .hotips-area-landing__filter-dropdown-summary strong{ text-transform: none; letter-spacing: 0; }
.mht-hub-toolbar .hotips-area-landing__filter-dropdown-menu{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow: auto;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.mht-hub-toolbar .hotips-area-landing__content-menu-links{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: none;
  margin: 0;
}
.mht-hub-toolbar .hotips-area-landing__content-menu-links:has(> :nth-child(4)){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mht-hub-toolbar .hotips-area-landing__content-menu-link{
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 8px;
  min-height: 44px !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
}
.mht-hub-toolbar .hotips-area-landing__content-menu-link-icon{ display: block !important; }
.mht-hub-toolbar .hotips-area-landing__content-menu-link small{ display: none !important; }
.mht-hub-toolbar .hotips-area-landing__content-menu-link strong{ font: var(--mht-ui-btn-font); color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mht-hub-toolbar .hotips-area-landing__content-menu-link > span:last-child{ font: 400 20px/1 Arial, sans-serif; color: var(--mht-area-side-accent, currentColor); }
@media (min-width: 761px){
  .hotips-area-landing__content-menu-head{ display: none !important; }   /* saves a full row on desktop */
  .hotips-area-landing__content-menu-copy-mobile{ display: none !important; }
}
@media (max-width: 760px){
  .mht-hub-toolbar{ flex-direction: column; }
  .mht-hub-toolbar .hotips-area-landing__filter-dropdown{ flex: none; width: 100% !important; }
  .mht-hub-toolbar .hotips-area-landing__filter-dropdown-menu{ position: static; box-shadow: none; border: 0; border-radius: 0; }
  .mht-hub-toolbar .hotips-area-landing__content-menu-links,
  .mht-hub-toolbar .hotips-area-landing__content-menu-links:has(> :nth-child(4)){ grid-template-columns: minmax(0, 1fr) !important; }
}

/* Smaller hero button on desktop (phones already look right) */
@media (min-width: 761px){
  .mht-context-hero__actions .mht-context-hero__pill{ min-height: 34px; padding: 4px 14px; font-size: 12px; }
}

/* ---------------------------------------------------------
   5. SEASONAL / DISCOVERY TILES: same anchor points on every card
   --------------------------------------------------------- */
.mht-discovery-tile .mht-discovery-tile__copy{ position: static; }
.mht-discovery-tile .mht-discovery-label{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}
.mht-discovery-tile h3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mht-discovery-tile .mht-discovery-action{ display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .mht-context-hero__pill, .hotips-area-landing__content-menu-link, a.mht-lane-tab, .mht-pg .mht-pg-button,
  .hotips-section-guide-card__button{ transition: none; transform: none !important; }
}

/* ---------------------------------------------------------
   6. FIXES (1.4.8)
   --------------------------------------------------------- */
/* Hero kicker pills (WELLNESS, season) are solid, like every other label */
.mht-context-hero__eyebrow{
  background: color-mix(in srgb, var(--area-landing-band-a, #2e3b55) 88%, #000 12%) !important;
  border-color: color-mix(in srgb, #fff 32%, transparent) !important;
  color: #fff !important;
  backdrop-filter: none !important;
}
body.mht-seasonal-theme--autumn .mht-context-hero__eyebrow{ background: #4a2c22 !important; border-color: #c9a04f !important; color: #fff8ef !important; }
body.mht-seasonal-theme--christmas .mht-context-hero__eyebrow{ background: #202e28 !important; border-color: #8f7c66 !important; color: #fff !important; }
body.mht-seasonal-theme--spring .mht-context-hero__eyebrow{ background: #354d40 !important; border-color: #9aaa83 !important; color: #fff !important; }
body.mht-seasonal-theme--summer .mht-context-hero__eyebrow{ background: #233f42 !important; border-color: #799e9b !important; color: #fff !important; }

/* Card rating pill ("NEW", stars): dark text on the light pill, white text on the hover colour */
.mht-content-card.mht-content-card .my-blog-rating-display{ color: var(--mht-ui-money-deep) !important; }
.mht-content-card.mht-content-card--wellness .my-blog-rating-display{ color: var(--mht-ui-wellness-deep) !important; }
.mht-content-card.mht-content-card--seasonal .my-blog-rating-display{ color: var(--season-dark, #4a2c22) !important; }
.mht-content-card.mht-content-card:is(:hover,:focus-within) .my-blog-rating-display{ background: var(--mht-card-label-bg) !important; color: #fff !important; }
.mht-content-card .my-blog-rating-display__pill--new,
.mht-content-card .my-blog-rating-display__pill{ color: inherit !important; }

/* Toolkit cards: "Read guide" is a small round arrow in the bottom-right corner (the link keeps its full label for screen readers) */
.mht-pg .mht-pg-card{ position: relative; }
.mht-pg .mht-pg-card .mht-pg-card__copy{ padding-right: 46px; }
.mht-pg .mht-pg-card .mht-pg-button{
  position: absolute;
  right: 10px;
  bottom: 10px;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  gap: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 0;
}
.mht-pg .mht-pg-card .mht-pg-button > span{ font-size: 14px; line-height: 1; }

/* Article header chips: caps like every other label */
.mht-article-hero-footer__brand-name,
.mht-article-hero-footer__views,
.mht-article-hero-footer__rating{
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------------------------------------------------------
   7. FIXES (1.4.9)
   --------------------------------------------------------- */
/* The hub hero frame clipped the topic dropdown: let it overflow and sit above the cards below.
   (The frame's own background keeps its rounded corners.) */
.mht-context-shell--area-hub{ overflow: hidden !important; overflow: clip !important; position: relative; z-index: 30; }
.mht-hub-toolbar .hotips-area-landing__filter-dropdown{ z-index: 60; }

/* Toolbar buttons may shrink, so the last one never breaks out of the frame */
.mht-hub-toolbar,
.mht-hub-toolbar .hotips-area-landing__content-menu-links,
.mht-hub-toolbar .hotips-area-landing__content-menu-link,
.mht-hub-toolbar .hotips-area-landing__content-menu-link > span:nth-child(2){ min-width: 0; }
.hotips-area-landing__content-menu{ box-sizing: border-box; max-width: 100%; }
@media (min-width: 761px) and (max-width: 1100px){
  .mht-hub-toolbar .hotips-area-landing__filter-dropdown{ flex-basis: 220px; width: 220px !important; }
}

/* Toolkit = spanner (1.4.9) */
.hotips-area-landing__content-menu-link--practical .hotips-area-landing__content-menu-link-icon{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22.7 19.3l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6.3 6.3 9 2 4.7C.9 7.1 1.3 10.1 3.3 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2-2c.4-.4.4-1 0-1.4z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22.7 19.3l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6.3 6.3 9 2 4.7C.9 7.1 1.3 10.1 3.3 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2-2c.4-.4.4-1 0-1.4z'/%3E%3C/svg%3E") !important;
}

/* "New" comes from two different plugin code paths (a badge, or the plain count line): make them identical (1.4.10) */
.mht-content-card .my-blog-rating-display__count,
.mht-content-card .my-blog-rating-display__pill--new{
  font-family: var(--font-body, Montserrat, Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}

/* 1.4.12: the hub hero keeps its own rounded crop.
   Desktop (sidebar beside the posts, which already lists every topic): no dropdown, just the three buttons.
   Below 981px (sidebar drops to the bottom): the dropdown stays and opens inside the hero. */
@media (min-width: 981px){
  .mht-hub-toolbar .hotips-area-landing__filter-dropdown{ display: none !important; }
}
@media (max-width: 980px){
  .mht-hub-toolbar{ flex-wrap: wrap; }
  .mht-hub-toolbar .hotips-area-landing__filter-dropdown[open]{ flex: 0 0 100% !important; width: 100% !important; }
  .mht-hub-toolbar .hotips-area-landing__filter-dropdown-menu{ position: static !important; max-height: none !important; box-shadow: none !important; margin-top: 8px; }
}

/* 1.4.13: the hero's topic dropdown, moved to the top of the posts shell (same look); opens as a full-width panel and the cards move down */
.mht-topic-dropdown{ position: relative; z-index: 2; margin: 0 0 14px; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown{ position: relative; width: 260px !important; max-width: 100%; margin: 0 !important; overflow: visible !important; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown[open]{ width: 100% !important; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown-summary{ min-height: 44px !important; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px !important; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown[open] .hotips-area-landing__filter-dropdown-summary{ max-width: 260px; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown-summary strong{ text-transform: none; letter-spacing: 0; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown-menu{ position: static !important; max-height: none !important; box-shadow: none !important; margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
@media (max-width: 760px){ .mht-topic-dropdown .hotips-area-landing__filter-dropdown{ width: 100% !important; } .mht-topic-dropdown .hotips-area-landing__filter-dropdown-summary{ max-width: none !important; } .mht-topic-dropdown .hotips-area-landing__filter-dropdown-menu{ grid-template-columns: 1fr; } }
/* 1.4.14: keep the open topic panel inside the rounded corners; no divider lines in the grid */
.mht-topic-dropdown .hotips-area-landing__filter-dropdown{ overflow: hidden !important; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown-menu{ margin-top: 0 !important; border-radius: 0 0 12px 12px; padding: 6px 8px 8px !important; gap: 4px 12px !important; }
.mht-topic-dropdown .hotips-area-landing__filter-dropdown-option{ border-bottom: 0 !important; }
/* 1.4.15: article hero — the top section grows to fit long titles (was a fixed 225px, so title/image spilled into the bar); slimmer footer bar */
.mht-context-shell--article .mht-context-hero__inner{ height: auto !important; min-height: 225px; }
.mht-article-hero-footer{ padding: 4px 6px !important; min-height: 0 !important; }
.mht-article-hero-footer__hub-link,
.mht-article-hero-footer__hub-icon,
.mht-article-hero-footer__hub-icon img{ width: 26px !important; height: 26px !important; min-height: 26px !important; }
.mht-article-hero-footer__brand img{ width: 20px !important; height: 20px !important; }
/* 1.4.16: seasonal collection page — tighter gap between the hero and "Explore the picks" */
.mht-seasonal-page .mht-seasonal-hero{ margin-bottom: 16px !important; }
.mht-seasonal-primary > .mht-seasonal-heading:first-child{ margin-top: 0 !important; }
.mht-seasonal-heading{ margin-bottom: 14px !important; }
/* 1.4.17: homepage discovery tiles — reserve room under the top-left label so long titles never run under it; tile grows instead of clipping */
.mht-discovery-tile:has(.mht-discovery-label){ height: auto !important; min-height: 260px; padding-top: 44px !important; box-sizing: border-box; }

/* 1.4.18: Seasonal Picks sidebar card — why-line and two article previews */
.mht-collection-discovery__why{ margin: 0 0 4px; font: 700 9.5px/1.3 var(--font-body, Montserrat, Arial, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #f6c46a; }
.mht-collection-discovery__list{ display: grid; gap: 8px; margin: 10px 0 12px; }
a.mht-collection-discovery__item{ display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font: 600 12px/1.3 var(--font-body, Montserrat, Arial, sans-serif); transition: background .15s ease; }
a.mht-collection-discovery__item:hover, a.mht-collection-discovery__item:focus-visible{ background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }
a.mht-collection-discovery__item img{ width: 54px; height: 40px; flex: 0 0 54px; object-fit: cover; border-radius: 8px; }
a.mht-collection-discovery__item span{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 1.4.19: slimmer Toolkit strip on hubs (rail cards) — no round button (picture and title are links), smaller thumbnail, two-line titles */
.mht-pg-grid--rail .mht-pg-card .mht-pg-button{ display: none !important; }
.mht-pg-grid--rail .mht-pg-card .mht-pg-card__copy{ padding-right: 0 !important; }
.mht-pg-grid--rail .mht-pg-card{ grid-template-columns: 52px minmax(0, 1fr) !important; padding: 6px 10px 6px 6px !important; gap: 10px !important; }
.mht-pg-grid--rail .mht-pg-card__image{ width: 52px !important; height: 52px !important; }
.mht-pg-grid--rail h3{ font-size: 13.5px !important; line-height: 1.3 !important; }
.mht-pg-grid--rail h3 a{ -webkit-line-clamp: 2 !important; min-height: 0 !important; }

/* 1.4.20: hub row = In-depth guide + deal slider (Affiliate Promotions). No deals → guide runs full width. */
.mht-hub-toolbar .hotips-area-landing__content-menu-links{ grid-template-columns: minmax(0, 1fr) !important; }
.mht-hub-toolbar .hotips-area-landing__content-menu-links.has-deals:has(.hotips-area-landing__content-menu-link){ grid-template-columns: minmax(190px, 1fr) minmax(0, 2.6fr) !important; }
.hotips-area-landing__content-menu:not(:has(.hotips-area-landing__content-menu-link, .mht-deal-slider:not([hidden]))){ display: none !important; }
.mht-deal-slider[hidden]{ display: none !important; }
.mht-deal-slider{ position: relative; display: flex; align-items: stretch; gap: 8px; min-width: 0; container-type: inline-size; }
.mht-deal-slider__track{ position: relative; flex: 1 1 auto; min-width: 0; display: grid; }
.mht-deal{ grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 6px 12px 6px 6px; border-radius: 12px;
  background: linear-gradient(120deg, #1d1b2e 0%, #2a2350 62%, #5b35c9 100%); color: #fff; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.mht-deal.is-active{ opacity: 1; visibility: visible; transition: opacity .45s ease; }
.mht-deal--black-friday, .mht-deal--cyber-monday{ background: linear-gradient(120deg, #0d0d0f 0%, #1f1f24 60%, #3a0d14 100%); }
.mht-deal--christmas{ background: linear-gradient(120deg, #3b0f17 0%, #7a1d2a 55%, #1f4d3a 100%); }
.mht-deal--summer{ background: linear-gradient(120deg, #0f3d57 0%, #1f6f8f 60%, #e3a33b 100%); }
.mht-deal__img{ width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border-radius: 9px; background: rgba(255,255,255,.12); }
.mht-deal__copy{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mht-deal__tags{ display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 9.5px/1.2 var(--font-body, Montserrat, Arial, sans-serif); letter-spacing: .07em; text-transform: uppercase; }
.mht-deal__campaign{ padding: 2px 7px; border-radius: 999px; background: #f6c46a; color: #2b1a00; white-space: nowrap; }
.mht-deal__partner{ opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mht-deal__headline{ font: 600 13.5px/1.3 var(--font-body, Montserrat, Arial, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mht-deal__price{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--font-body, Montserrat, Arial, sans-serif); }
.mht-deal__price-top{ display: flex; align-items: center; gap: 6px; }
.mht-deal__was{ font-size: 11px; opacity: .7; }
.mht-deal__save{ padding: 2px 6px; border-radius: 5px; background: #d1182f; color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.mht-deal__now{ font-size: 14px; font-weight: 800; white-space: nowrap; }
.mht-deal__code{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; border: 1px dashed rgba(255,255,255,.6); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font: 600 10px/1.1 var(--font-body, Montserrat, Arial, sans-serif); text-transform: uppercase; letter-spacing: .05em; }
.mht-deal__code strong{ font-size: 12px; letter-spacing: .04em; }
.mht-deal__code.is-copied strong::after{ content: " ✓ copied"; font-size: 10px; color: #f6c46a; }
a.mht-deal__cta{ flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 4px 16px; border-radius: 9px; background: #fff; color: #1d1b2e !important; font: 700 12.5px/1 var(--font-body, Montserrat, Arial, sans-serif); text-decoration: none !important; white-space: nowrap; }
a.mht-deal__cta:hover, a.mht-deal__cta:focus-visible{ background: #f6c46a; }
.mht-deal a:focus-visible, .mht-deal button:focus-visible, .mht-deal-slider__nav button:focus-visible{ outline: 3px solid #f6c46a; outline-offset: 2px; }
.mht-deal-slider__ad{ position: absolute; top: 3px; right: 8px; z-index: 2; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.35); color: rgba(255,255,255,.85); font: 700 8.5px/1.3 var(--font-body, Montserrat, Arial, sans-serif); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.mht-deal-slider__nav{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 2px; }
.mht-deal-slider__arrow{ width: 26px; height: 26px; border: 0; border-radius: 999px; background: var(--color-dark, #2e3b55); color: #fff; font: 400 18px/1 Arial, sans-serif; cursor: pointer; }
.mht-deal-slider__arrow:hover{ background: #5b35c9; }
.mht-deal-slider__dots{ display: flex; gap: 3px; }
.mht-deal-slider__dot{ width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-dark, #2e3b55) 35%, transparent); cursor: pointer; }
.mht-deal-slider__dot[aria-current="true"]{ height: 14px; background: var(--color-dark, #2e3b55); }
.mht-deal-slider__nav{ flex-direction: row; }
.mht-deal-slider__nav .mht-deal-slider__dots{ flex-direction: column; }
/* narrower slots: drop the was-price, then stack */
@container (max-width: 640px){ .mht-deal__was{ display: none; } .mht-deal__code span{ display: none; } }
@container (max-width: 500px){
  .mht-deal{ flex-wrap: wrap; row-gap: 6px; padding-right: 8px; }
  .mht-deal__copy{ flex-basis: calc(100% - 70px); }
  .mht-deal__headline{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mht-deal__price{ flex-direction: row; align-items: center; margin-left: 64px; }
  a.mht-deal__cta{ margin-left: auto; }
}
@media (max-width: 760px){ .mht-hub-toolbar .hotips-area-landing__content-menu-links.has-deals:has(.hotips-area-landing__content-menu-link){ grid-template-columns: minmax(0, 1fr) !important; } }
@media (prefers-reduced-motion: reduce){ .mht-deal, .mht-deal.is-active{ transition: none; } }

/* 1.4.21: sidebar deal card — whole square artwork on top, details below, arrows underneath. Hidden until deals load. */
.mht-deal-side:not(:has(.mht-deal-slider:not([hidden]))){ display: none !important; }
.mht-deal-side{ padding: 12px !important; border-radius: 18px; background: var(--color-dark, #2e3b55); color: #fff; }
.mht-deal-side__kicker{ margin: 0 0 8px; font: 800 10px/1.2 var(--font-body, Montserrat, Arial, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #f6c46a; }
.mht-deal-slider--side{ flex-direction: column; gap: 8px; }
.mht-deal-slider--side .mht-deal{ flex-direction: column; align-items: stretch; gap: 8px; padding: 0 0 10px; min-height: 0; border-radius: 14px; overflow: hidden; }
.mht-deal-slider--side .mht-deal__img{ width: 100%; height: auto; aspect-ratio: 1; flex: none; border-radius: 0; }
.mht-deal-slider--side .mht-deal__copy, .mht-deal-slider--side .mht-deal__price, .mht-deal-slider--side .mht-deal__code, .mht-deal-slider--side a.mht-deal__cta{ margin: 0 10px; }
.mht-deal-slider--side .mht-deal__headline{ white-space: normal; font-size: 14px; }
.mht-deal-slider--side .mht-deal__price{ flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
.mht-deal-slider--side .mht-deal__was{ display: inline; }
.mht-deal-slider--side .mht-deal__code{ justify-content: space-between; }
.mht-deal-slider--side .mht-deal__code span{ display: inline; }
.mht-deal-slider--side a.mht-deal__cta{ justify-content: center; min-height: 40px; }
.mht-deal-slider--side .mht-deal-slider__ad{ top: 8px; right: 8px; }
.mht-deal-slider--side .mht-deal-slider__nav{ justify-content: center; }
.mht-deal-slider--side .mht-deal-slider__dots{ flex-direction: row; }
.mht-deal-slider--side .mht-deal-slider__dot{ background: rgba(255,255,255,.4); }
.mht-deal-slider--side .mht-deal-slider__dot[aria-current="true"]{ width: 14px; height: 6px; background: #f6c46a; }
.mht-deal-slider--side .mht-deal-slider__arrow{ background: rgba(255,255,255,.14); }
.mht-deal-slider__note{ margin: 0; font: 400 10.5px/1.4 var(--font-body, Montserrat, Arial, sans-serif); opacity: .75; }
/* sidebar card is narrow: undo the hero slider's small-slot wrapping rules */
.mht-deal-slider--side .mht-deal{ flex-wrap: nowrap !important; padding-right: 0 !important; }
.mht-deal-slider--side .mht-deal__copy{ flex-basis: auto !important; }
.mht-deal-slider--side .mht-deal__price{ margin-left: 10px !important; }
.mht-deal-slider--side a.mht-deal__cta{ margin-left: 10px !important; margin-right: 10px !important; }
.mht-deal-slider--side .mht-deal__headline{ display: block !important; -webkit-line-clamp: unset !important; }

/* 1.4.22: deal slides move even when there's only one deal: light sweep, pulsing saving badge, text easing in */
.mht-deal{ position: relative; overflow: hidden; }
.mht-deal.is-active::after{ content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 28%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform: translateX(-160%) skewX(-20deg);
  animation: mht-deal-shine 5.5s ease-in-out 1.2s infinite; }
@keyframes mht-deal-shine{ 0%{ transform: translateX(-160%) skewX(-20deg); } 45%, 100%{ transform: translateX(520%) skewX(-20deg); } }
.mht-deal.is-active .mht-deal__save{ display: inline-block; animation: mht-deal-pulse 2.6s ease-in-out infinite; }
@keyframes mht-deal-pulse{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.1); } }
.mht-deal.is-active .mht-deal__copy, .mht-deal.is-active .mht-deal__price, .mht-deal.is-active .mht-deal__code, .mht-deal.is-active a.mht-deal__cta{ animation: mht-deal-in .5s ease-out both; }
.mht-deal.is-active .mht-deal__price{ animation-delay: .08s; }
.mht-deal.is-active .mht-deal__code{ animation-delay: .14s; }
.mht-deal.is-active a.mht-deal__cta{ animation-delay: .2s; }
@keyframes mht-deal-in{ from{ opacity: 0; transform: translateX(14px); } to{ opacity: 1; transform: none; } }
.mht-deal-slider--side .mht-deal.is-active .mht-deal__copy, .mht-deal-slider--side .mht-deal.is-active .mht-deal__price, .mht-deal-slider--side .mht-deal.is-active a.mht-deal__cta{ animation-name: mht-deal-up; }
@keyframes mht-deal-up{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .mht-deal.is-active::after, .mht-deal.is-active .mht-deal__save, .mht-deal.is-active .mht-deal__copy, .mht-deal.is-active .mht-deal__price, .mht-deal.is-active .mht-deal__code, .mht-deal.is-active a.mht-deal__cta{ animation: none !important; }
  .mht-deal.is-active::after{ display: none; }
}

/* MyHotips branding on deal slides and the sidebar card */
.mht-deal__brand{ display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 2px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; white-space: nowrap; }
.mht-deal__brand img{ width: 18px; height: 18px; border-radius: 5px; }
.mht-deal-side__kicker{ display: flex; align-items: center; gap: 8px; }
.mht-deal-side__kicker img{ width: 26px; height: 26px; border-radius: 7px; }
@container (max-width: 500px){ .mht-deal__partner{ display: none; } }
.mht-deal-slider--side a.mht-deal__imglink{ display: block; line-height: 0; }
.mht-deal-slider--side a.mht-deal__imglink:focus-visible{ outline: 3px solid #f6c46a; outline-offset: -3px; }
.mht-deal-slider--side a.mht-deal__imglink:hover img{ filter: brightness(1.06); }

/* Banner slide: wide artwork fills the slot (height follows the artwork, about 6:1) */
.mht-deal.mht-deal--banner{ padding: 0 !important; min-height: 0; background: #0b1530; }
a.mht-deal__bannerlink{ display: block; width: 100%; line-height: 0; }
img.mht-deal__banner{ display: block; width: 100%; height: auto; border-radius: 12px; }
a.mht-deal__bannerlink:focus-visible{ outline: 3px solid #f6c46a; outline-offset: 2px; }
.mht-deal-slider__track:has(.mht-deal--banner.is-active) ~ .mht-deal-slider__nav{ align-self: center; }
.mht-hub-toolbar .hotips-area-landing__content-menu-links.has-deals:has(.mht-deal--banner) .hotips-area-landing__content-menu-link--guide{ align-self: center; }

/* 1.4.24: sidebar deal card takes its hub's colour (Wellness = sage green, Money = navy) */
.mht-deal-side.mht-deal-side--wellness{ background: linear-gradient(160deg, var(--color-wellness-dark, #587760), var(--color-wellness-text, #34473a)) !important; }
.mht-deal-side--wellness .mht-deal-slider--side .mht-deal-slider__arrow{ background: rgba(255,255,255,.18); }
/* 1.4.24: banner slides capped at 96px tall; artwork scales (never crops) and sits centred on matching navy */
.mht-deal.mht-deal--banner{ display: flex; align-items: center; justify-content: center; height: 96px; border-radius: 12px; overflow: hidden; }
a.mht-deal__bannerlink{ display: flex; justify-content: center; height: 100%; }
img.mht-deal__banner{ width: auto; max-width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
@media (max-width: 760px){ .mht-deal.mht-deal--banner{ height: auto; } img.mht-deal__banner{ width: 100%; height: auto; } }

/* 1.4.24: compact deal card for article sidebars (thumbnail + headline, then saving, code and button) */
.mht-deal-slider--compact{ flex-direction: column; gap: 8px; container-type: normal; }
.mht-deal-slider--compact .mht-deal{ flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px 10px 8px; min-height: 0; border-radius: 14px; }
.mht-deal-slider--compact .mht-deal__img{ width: 60px; height: 60px; flex: 0 0 60px; }
.mht-deal-slider--compact .mht-deal__copy{ flex: 1 1 calc(100% - 74px); }
.mht-deal-slider--compact .mht-deal__headline{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 13px; }
.mht-deal-slider--compact .mht-deal__price{ flex: 1 1 100%; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.mht-deal-slider--compact .mht-deal__code{ flex: 1 1 100%; justify-content: space-between; }
.mht-deal-slider--compact a.mht-deal__cta{ flex: 1 1 100%; justify-content: center; margin: 0; }
.mht-deal-slider--compact .mht-deal-slider__ad{ top: 6px; right: 8px; }
.mht-deal-slider--compact .mht-deal-slider__nav{ justify-content: center; }
.mht-deal-slider--compact .mht-deal-slider__dots{ flex-direction: row; }
.mht-deal-slider--compact .mht-deal-slider__dot{ background: rgba(255,255,255,.4); }
.mht-deal-slider--compact .mht-deal-slider__dot[aria-current="true"]{ width: 14px; height: 6px; background: #f6c46a; }
.mht-deal-slider--compact .mht-deal-slider__arrow{ background: rgba(255,255,255,.14); }
/* Wellness cards: pink (wellness accent) for the active dot and arrows */
.mht-deal-side--wellness .mht-deal-slider__dot[aria-current="true"]{ background: var(--color-wellness-accent, #c9826b) !important; }
.mht-deal-side--wellness .mht-deal-slider__arrow{ background: var(--color-wellness-accent, #c9826b) !important; color: #fff; }
.mht-deal-side--wellness .mht-deal-slider__arrow:hover{ filter: brightness(1.08); }

/* 1.4.24: homepage deal banners: two columns matching the Toolkit / Seasonal Picks panels below; one column on tablets and phones */
.mht-home-deals{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1440px; margin: 28px 24px 0; }
.mht-home-deals:not(:has(.mht-deal-slider:not([hidden]))){ display: none; }
.mht-home-deals + .mht-home-discovery{ margin-top: 16px !important; }
.mht-deal-slider--home .mht-deal{ min-height: 96px; padding: 10px 14px 10px 10px; gap: 14px; }
.mht-deal-slider--home .mht-deal__img{ width: 76px; height: 76px; flex-basis: 76px; border-radius: 12px; }
.mht-deal-slider--home .mht-deal__headline{ font-size: 14px; }
@media (max-width: 900px){
  .mht-home-deals{ grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 22px 16px 0; gap: 12px; }
}
@media (max-width: 480px){
  .mht-deal-slider--home .mht-deal{ min-height: 0; padding: 8px 10px 10px 8px; }
  .mht-deal-slider--home .mht-deal__img{ width: 56px; height: 56px; flex-basis: 56px; }
}
/* phones: arrows and dots go under the slide (never squeeze it); prices may wrap */
@media (max-width: 600px){
  .mht-deal-slider:not(.mht-deal-slider--side){ flex-direction: column; }
  .mht-deal-slider:not(.mht-deal-slider--side) .mht-deal-slider__nav{ justify-content: center; }
  .mht-deal-slider:not(.mht-deal-slider--side) .mht-deal-slider__dots{ flex-direction: row; }
  .mht-deal-slider:not(.mht-deal-slider--side) .mht-deal-slider__dot[aria-current="true"]{ width: 14px; height: 6px; }
  .mht-deal__price{ flex-wrap: wrap; }
}
/* Wellness deals with no campaign: sage green instead of purple */
.mht-deal-slider[data-lane="wellness"] .mht-deal:not(.mht-deal--black-friday):not(.mht-deal--cyber-monday):not(.mht-deal--christmas):not(.mht-deal--summer):not(.mht-deal--banner){ background: linear-gradient(120deg, #34473a 0%, #4a6651 60%, #6f8f76 100%); }
@media (max-width: 600px){ .mht-deal__tags{ padding-right: 28px; flex-wrap: wrap; row-gap: 4px; } }

/* homepage banner slides: full width of the column, height follows the artwork (about 87px) */
.mht-deal-slider--home .mht-deal.mht-deal--banner{ height: auto; min-height: 0; padding: 0 !important; }
.mht-deal-slider--home img.mht-deal__banner{ width: 100%; height: auto; }

/* 1.4.25: seasonal deals (Halloween): rust card on Seasonal Picks pages; wide product photos keep their shape */
.mht-deal-side.mht-deal-side--seasonal{ background: linear-gradient(160deg, #8a3a1c, #4a1c10) !important; margin-top: 18px; }
.mht-deal-side--seasonal .mht-deal-slider__dot[aria-current="true"]{ background: #f6a04d !important; }
.mht-deal-slider--side .mht-deal__img{ aspect-ratio: auto; }
.mht-deal--halloween{ background: linear-gradient(120deg, #120c08 0%, #2a1408 55%, #a4460f 100%); }

/* 1.4.26: homepage deal pair, tidied. Two-row text slide, same 96px height as the banner, controls inside the slide */
@media (min-width: 601px){
  .mht-deal-slider--home{ display: block; position: relative; }
  .mht-deal-slider--home .mht-deal{ display: grid; grid-template-columns: 76px auto minmax(0, 1fr) auto; grid-template-areas: "img copy copy cta" "img price code cta";
    column-gap: 14px; row-gap: 6px; align-items: center; height: 96px; min-height: 0; padding: 10px 16px 10px 10px; box-sizing: border-box; }
  .mht-deal-slider--home .mht-deal__img{ grid-area: img; width: 76px; height: 76px; }
  .mht-deal-slider--home .mht-deal__copy{ grid-area: copy; min-width: 0; }
  .mht-deal-slider--home .mht-deal__headline{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mht-deal-slider--home .mht-deal__price{ grid-area: price; flex-direction: row; align-items: center; gap: 8px; }
  .mht-deal-slider--home .mht-deal__code{ grid-area: code; justify-self: start; min-height: 26px; padding: 2px 9px; }
  .mht-deal-slider--home a.mht-deal__cta{ grid-area: cta; }
  .mht-deal-slider--home .mht-deal__partner{ display: none; }
  .mht-deal-slider--home .mht-deal.mht-deal--banner{ display: flex; height: 96px; background: #0b1530; }
  .mht-deal-slider--home img.mht-deal__banner{ width: 100%; height: 100%; object-fit: contain; }
  /* arrows + dots: small, inside the slide, bottom centre */
  .mht-deal-slider--home .mht-deal-slider__nav{ position: absolute; right: 16px; bottom: 3px; z-index: 3; gap: 5px; }
  .mht-deal-slider--home .mht-deal-slider__dots{ flex-direction: row !important; }
  .mht-deal-slider--home .mht-deal-slider__dot{ background: rgba(255,255,255,.45); }
  .mht-deal-slider--home .mht-deal-slider__dot[aria-current="true"]{ width: 12px !important; height: 5px !important; background: #fff; }
  .mht-deal-slider--home .mht-deal-slider__arrow{ width: 18px; height: 18px; font-size: 14px; background: rgba(0,0,0,.25); }
  .mht-deal-slider--home:has(.mht-deal-slider__nav) a.mht-deal__cta{ align-self: start; margin-top: 2px; }
}

/* 1.4.27: homepage deal banners share the Toolkit / Seasonal Picks grid: row 1 = banners, row 2 = cards */
.mht-home-discovery > .mht-deal-slider--home-money{ grid-column: 1; grid-row: 1; }
.mht-home-discovery > .mht-deal-slider--home-seasonal{ grid-column: 2; grid-row: 1; }
.mht-home-discovery > .mht-discovery-panel{ grid-row: 2; }
.mht-home-discovery--single > .mht-deal-slider--home, .mht-home-discovery--single > .mht-discovery-panel{ grid-column: auto; grid-row: auto; }
@media (max-width: 900px){
  .mht-home-discovery > .mht-deal-slider--home, .mht-home-discovery > .mht-discovery-panel{ grid-column: auto; grid-row: auto; }
}

/* 1.4.28: company name leads every deal headline (bold, gold); the small partner tag is no longer needed */
.mht-deal__brandname{ font-weight: 800; color: #f6c46a; }
.mht-deal__partner{ display: none !important; }

/* 1.4.29: seasonal collection page — Black Friday strip beside "Explore the picks" */
.mht-seasonal-headrow{ display: flex; align-items: center; gap: 18px; margin: 0 0 14px; }
.mht-seasonal-headrow > .mht-seasonal-heading{ flex: 0 0 auto; margin: 0 !important; }
.mht-seasonal-headrow > .mht-deal-slider{ flex: 1 1 auto; max-width: 720px; margin-left: auto; }
.mht-seasonal-headrow .mht-deal-slider__arrow{ background: rgba(255,255,255,.16); }
.mht-seasonal-headrow .mht-deal-slider__arrow:hover{ background: #f6c46a; color: #2b1a00; }
.mht-seasonal-headrow .mht-deal-slider__dot{ background: rgba(255,255,255,.35); }
.mht-seasonal-headrow .mht-deal-slider__dot[aria-current="true"]{ background: #f6c46a; }
@media (max-width: 760px){
  .mht-seasonal-headrow{ flex-direction: column; align-items: stretch; gap: 10px; }
  .mht-seasonal-headrow > .mht-deal-slider{ max-width: none; margin-left: 0; }
}

/* 1.4.30: seasonal articles — FAQ question bars in the season colour, not Wellness green */
body.mht-seasonal-theme--autumn{ --mht-sq-bg: #b75d3e; --mht-sq-edge: #c9a04f; }
body.mht-seasonal-theme--christmas{ --mht-sq-bg: #783c39; --mht-sq-edge: #efd39a; }
body.mht-seasonal-theme--spring{ --mht-sq-bg: #546846; --mht-sq-edge: #f9e8a5; }
body.mht-seasonal-theme--summer{ --mht-sq-bg: #3e686a; --mht-sq-edge: #ffe3a0; }
body.mht-seasonal-theme .mhas-article .mhas-section--faq .mhas-legacy-row--question, body.mht-seasonal-theme .mhas-article .mhas-legacy-row--question{ background: var(--mht-sq-bg, #b75d3e) !important; border-left-color: var(--mht-sq-edge, #c9a04f) !important; }
body.mht-seasonal-theme .mhas-article .mhas-legacy-row--question .mhas-legacy-qa-label{ color: var(--mht-sq-bg, #b75d3e) !important; border-left-color: var(--mht-sq-bg, #b75d3e) !important; }

/* 1.4.45: article top strip = the hub deal slider showing a single deal; spacing only, same card styles. */
.mht-deal-slider.mht-deal-slider--top{ margin: 0 0 18px; }

/* 1.4.51: inside the article strip, article/Keypoints link rules (highlight gradient, inset underline, link colour) must not restyle the button. Scoped to the strip only. */
.my-blog-builder .mhtph-intro-strip a.mht-deal__cta,
.mhtph-intro-strip a.mht-deal__cta,
.mht-deal-slider--top a.mht-deal__cta{ background-image: none !important; box-shadow: none !important; background-color: #fff !important; color: #1d1b2e !important; text-decoration: none !important; border: 0 !important; outline-offset: 2px; }
.my-blog-builder .mhtph-intro-strip a.mht-deal__cta:hover,
.my-blog-builder .mhtph-intro-strip a.mht-deal__cta:focus-visible,
.mhtph-intro-strip a.mht-deal__cta:hover,
.mhtph-intro-strip a.mht-deal__cta:focus-visible,
.mht-deal-slider--top a.mht-deal__cta:hover,
.mht-deal-slider--top a.mht-deal__cta:focus-visible{ background-image: none !important; background-color: #f6c46a !important; box-shadow: none !important; color: #1d1b2e !important; text-decoration: none !important; }

/* 1.4.52: Article Studio's `.mhas-article a:not(...)` (frontend-match.css) resets every link inside an article with !important (inline display, no padding, transparent background, highlight gradient, inset underline). Beat it for the strip button only: the doubled class lifts specificity above it whatever the load order. */
.mhtph-intro-strip .mht-deal-slider a.mht-deal__cta.mht-deal__cta{ display: inline-flex !important; align-items: center !important; min-height: 34px !important; padding: 4px 16px !important; border: 0 !important; border-radius: 9px !important; background-color: #fff !important; background-image: none !important; box-shadow: none !important; color: #1d1b2e !important; font: 700 12.5px/1 var(--font-body, Montserrat, Arial, sans-serif) !important; text-decoration: none !important; white-space: nowrap !important; }
.mhtph-intro-strip .mht-deal-slider a.mht-deal__cta.mht-deal__cta:hover,
.mhtph-intro-strip .mht-deal-slider a.mht-deal__cta.mht-deal__cta:focus,
.mhtph-intro-strip .mht-deal-slider a.mht-deal__cta.mht-deal__cta:focus-visible{ background-color: #f6c46a !important; background-image: none !important; box-shadow: none !important; color: #1d1b2e !important; text-decoration: none !important; }

/* 1.4.53: the article strip's thumb may be wide (3:1 logo tile). The base .mht-deal__img is a fixed 52px square with object-fit: cover, which would crop a wide image; this keeps the whole picture. Strip only. */
.mht-deal-slider--top .mht-deal__img{ width: auto !important; height: 64px !important; max-width: 220px; flex: 0 0 auto !important; object-fit: contain !important; border-radius: 10px; background: #11100f; }
@media (max-width: 760px){ .mht-deal-slider--top .mht-deal__img{ height: 48px !important; max-width: 150px; } }