/*
 * Site-wide brand-direction pilot (staging trial).
 * Palette and typography extend the corporate-orders page (deep forest
 * green, parchment/cream, gold, terracotta, DM Sans) to the rest of the
 * site. Deliberately does NOT touch the sticker illustrations, the logo,
 * or the corporate-orders page itself (excluded at the PHP enqueue level -
 * it already has its own complete, hand-built design system).
 */
body {
  --tt-forest: #1F4D38;
  --tt-forest-deep: #16302A;
  --tt-sage: #6A7A64;
  --tt-parchment: #FBF8F2;
  --tt-cream: #F2E9D3;
  --tt-gold: #E3B23C;
  --tt-terracotta: #B8532F;
  --tt-ink: #1B2420;
}

/* ---------- base body copy ----------
   The theme's own CSS sets body{color:#0f6277} and p{color:#0f6277}, so
   every paragraph, price, and label inherited the same bright accent as
   headings. Regular text gets a dark neutral instead; headings/buttons
   below keep the forest green as the deliberate accent. */
body,
body p,
body li,
body .woocommerce-Price-amount,
body span.from,
body .elementor-widget-text-editor,
body .elementor-widget-text-editor * {
  color: var(--tt-ink) !important;
}
/* some text-editor widgets carry a decorative per-widget font (e.g.
   Damion, a script face) set directly in their Elementor settings -
   one consistent family everywhere instead. */
body .elementor-widget-text-editor,
body .elementor-widget-text-editor * {
  font-family: 'DM Sans', sans-serif !important;
}
/* a handful of "benefit" headings (Great variety, Snacks change
   monthly...) are h3 tags nested inside a text-editor widget, so the
   ink-color rule above (a class selector, higher specificity than the
   plain "h3" tag selector in the heading rule below) was winning and
   showing them in body-text color instead of the heading accent. */
body .elementor-widget-text-editor h1,
body .elementor-widget-text-editor h2,
body .elementor-widget-text-editor h3,
body .elementor-widget-text-editor h4,
body .elementor-widget-text-editor h5,
body .elementor-widget-text-editor h6 {
  color: var(--tt-forest) !important;
}

/* ---------- links and nav ----------
   body a alone is only two tag selectors (0,0,2) - weaker than any single
   class elsewhere in the cascade (0,1,0), so it silently lost to
   .elementor-toggle-title and similar. The [href] attribute selector
   brings it to (0,1,1), matching or beating a single class. */
body a[href] {
  color: var(--tt-forest) !important;
}
body a[href]:hover {
  color: var(--tt-forest-deep) !important;
}
/* FAQ accordion triggers: a plain <a class="elementor-toggle-title"> with
   no href, so the [href] rule above never matches it. */
body .elementor-toggle-title {
  color: var(--tt-forest) !important;
}

/* ---------- testimonials ----------
   Previously floated as bare centered text with no card, no quote
   mark, no avatar - just a paragraph that happened to be italic. */
body .elementor-testimonial__title {
  color: var(--tt-sage) !important;
}
body .elementor-testimonial {
  background: var(--tt-parchment) !important;
  border: 1px solid rgba(31, 77, 56, 0.15) !important;
  border-radius: 14px !important;
  padding: 36px 28px 28px !important;
  box-shadow: 0 16px 34px -24px rgba(22, 48, 42, 0.35);
  max-width: 480px;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column;
  height: 340px;
}
body .elementor-testimonial__content {
  position: relative;
  flex: 1;
  min-height: 0;
}
body .elementor-testimonial__text {
  font-style: normal !important;
  font-size: 0.9rem !important;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.tt-review-more {
  display: inline-block;
  margin-top: 10px;
  border: none;
  background: none;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tt-forest);
  cursor: pointer;
  text-align: left;
}
body .elementor-testimonial.tt-review-clickable {
  cursor: pointer;
}
body .elementor-testimonial__text::before {
  content: '\201C';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--tt-gold);
  margin-bottom: -6px;
}
body .elementor-testimonial__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px !important;
  text-align: left !important;
}
body .elementor-testimonial__cite {
  display: flex;
  flex-direction: column;
}
body .elementor-testimonial__name {
  font-weight: 700 !important;
  color: var(--tt-forest) !important;
}
.tt-review-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tt-forest);
  color: var(--tt-parchment);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
}

/* "Read more" opens the full review in a modal instead of expanding
   the card in place - expanding in place shifted every card below it
   on the page each time one was opened. */
.tt-review-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 16, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}
.tt-review-modal-overlay[hidden] {
  display: none;
}
.tt-review-modal {
  position: relative;
  background: var(--tt-parchment);
  border-radius: 16px;
  padding: 40px 28px 28px;
  max-width: 460px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.tt-review-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  background: rgba(31, 77, 56, 0.1);
  color: var(--tt-forest);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-review-modal-close svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}
.tt-review-modal-close:hover {
  background: rgba(31, 77, 56, 0.18);
}
.tt-review-modal-quote {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--tt-gold);
  margin-bottom: 4px;
}
.tt-review-modal-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--tt-ink);
}
.tt-review-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* ---------- typography: one family instead of three ---------- */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .elementor-heading-title {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--tt-forest) !important;
}

/* ---------- blog/archive title band ----------
   Both .page-header AND the h1.entry-title inside it carry their own
   dark-teal background from the theme; without this, the blanket
   heading-color rule above put dark forest text on a dark teal band
   with barely any contrast. Recolor the band to match the new palette
   instead of just fixing the symptom. */
body .page-header,
body .page-header .entry-title {
  background-color: var(--tt-forest) !important;
}
body .page-header h1,
body .page-header .entry-title {
  color: var(--tt-parchment) !important;
}

/* ---------- global newsletter-signup band (element 2221eea8) ----------
   Appears near the bottom of every page with its own bright teal
   background; same contrast problem as the title band above. */
body .elementor-element-2221eea8 {
  background-color: var(--tt-forest) !important;
}
body .elementor-element-2221eea8 .elementor-heading-title,
body .elementor-element-2221eea8 p {
  color: var(--tt-parchment) !important;
}

/* ---------- buttons: one consistent style ---------- */
body .elementor-button,
body button.button,
body a.button,
body input[type="submit"],
body .cli_action_button {
  background-color: var(--tt-forest) !important;
  border-color: var(--tt-forest) !important;
  color: var(--tt-parchment) !important;
  border-radius: 11px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
body .elementor-button:hover,
body button.button:hover,
body a.button:hover,
body input[type="submit"]:hover,
body .cli_action_button:hover {
  background-color: var(--tt-forest-deep) !important;
  border-color: var(--tt-forest-deep) !important;
  color: var(--tt-parchment) !important;
  transform: translateY(-1px);
}
body .elementor-button .elementor-button-text {
  color: var(--tt-parchment) !important;
}
/* the cookie banner's "Reject" link is deliberately the lower-emphasis
   action - keep it visually secondary rather than matching Accept */
body .wt-cli-reject-btn {
  background-color: transparent !important;
  border: 1.5px solid var(--tt-forest) !important;
  color: var(--tt-forest) !important;
}
body .wt-cli-reject-btn:hover {
  background-color: rgba(31, 77, 56, 0.08) !important;
  color: var(--tt-forest) !important;
}

/* ---------- form fields: consistent input/select/textarea style ----------
   Today every field on the site (checkout, my-account, contact) is an
   unstyled browser default. One shape, one focus state, everywhere. */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body select,
body textarea,
body input.wpcf7-form-control,
body textarea.wpcf7-form-control,
body .wpcf7-form input[type="text"],
body .wpcf7-form input[type="email"],
body .wpcf7-form input[type="tel"],
body .wpcf7-form select,
body .wpcf7-form textarea {
  font-family: 'DM Sans', sans-serif !important;
  border: 1.5px solid rgba(31, 77, 56, 0.25) !important;
  border-radius: 3px !important;
  background-color: var(--tt-parchment) !important;
  color: var(--tt-ink) !important;
  padding: 10px 12px !important;
}
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="password"]:focus,
body input[type="number"]:focus,
body input[type="search"]:focus,
body select:focus,
body textarea:focus {
  outline: none !important;
  border-color: var(--tt-forest) !important;
  box-shadow: 0 0 0 3px rgba(31, 77, 56, 0.18) !important;
}

/* ---------- native radio/checkbox tint ---------- */
body input[type="radio"],
body input[type="checkbox"] {
  accent-color: var(--tt-forest) !important;
}

/* ---------- homepage "how our subscription works" icons ----------
   Used to have a padded parchment/bordered square frame around them -
   removed per feedback, image shown plain (still scoped to these
   specific element IDs, not a blanket image rule, so the sticker
   illustrations and logo elsewhere are untouched either way). */
body .elementor-element-5f5dcd78 img,
body .elementor-element-222a9495 img,
body .elementor-element-3373525 img {
  border-radius: 12px;
}

/* ---------- scroll reveal ---------- */
body .tt-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);
}
body .tt-reveal.tt-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body .tt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- product order customisation (WooCommerce Extra Product
   Options: gift options, "who are the snacks for", size, personalisation)
   ----------
   This plugin renders a rigid HTML <table> - fixed-width label column,
   inline native radios - and no amount of color/font patching fixes that;
   it needed an actual layout rebuild. Table/row/cell display roles are
   dropped in favour of a spaced block layout, and inline radio options
   become pill toggles. */
body table.extra-options {
  display: block !important;
  width: 100% !important;
  border: none !important;
  margin: 0 0 4px 0 !important;
}
body table.extra-options tbody {
  display: block !important;
  width: 100% !important;
}
/* deliberately NOT !important on display: the plugin hides conditional
   rows (e.g. gift-to/gift-from when "Is this a gift?" is No) via an
   inline style="display:none", and !important here would have overridden
   that and shown every field regardless of the selection. Without
   !important this still beats the browser's default table-row display
   (a UA style, lowest priority), so visible rows still get the block
   layout - but the plugin's own hide/show logic keeps working. */
body table.extra-options tr {
  display: block;
  width: 100% !important;
  margin: 0 0 20px 0 !important;
}
body table.extra-options td.section-title,
body table.extra-options td.label,
body table.extra-options td.value {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  text-align: left !important;
}
body table.extra-options td.section-title {
  padding-bottom: 10px !important;
  margin-bottom: 6px !important;
  border-bottom: 1.5px solid rgba(31, 77, 56, 0.15) !important;
}
body table.extra-options td.section-title h4 {
  margin: 0 !important;
}
body table.extra-options td.label {
  margin-bottom: 14px !important;
}
body table.extra-options .label-tag {
  font-weight: 600 !important;
  font-size: 0.92rem !important;
}
/* the helper-text line under a field label (e.g. "We can cater for
   simple allergies...") had no visual distinction from the label itself
   and almost no gap before the input - looked like one cramped
   paragraph. Muted color + its own top margin separates the two. */
body table.extra-options .sublabel-tag {
  display: block !important;
  margin-top: 4px !important;
  color: var(--tt-sage) !important;
  font-weight: 400 !important;
}

/* radio/checkbox rows: value cell becomes a wrapping flex row of pills */
body table.extra-options tr[data-type="radio"] td.value {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}
body table.extra-options label.radio.thwepo-inline {
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 1.5px solid rgba(31, 77, 56, 0.3) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
body table.extra-options label.radio.thwepo-inline.tt-pill-checked {
  background-color: var(--tt-forest) !important;
  border-color: var(--tt-forest) !important;
  color: var(--tt-parchment) !important;
}

/* gift-wrap style checkbox row */
body table.extra-options tr[data-type="checkbox"] td.value {
  padding: 12px 16px !important;
  border: 1.5px solid rgba(31, 77, 56, 0.2) !important;
  border-radius: 6px !important;
}
body table.extra-options .label-wrapper-checkbox {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

/* text/textarea rows: full-width fields, consistent with the rest of the site */
body table.extra-options tr[data-type="inputtext"] input[type="text"],
body table.extra-options tr[data-type="textarea"] textarea {
  width: 100% !important;
  box-sizing: border-box;
}

/* ---------- WooCommerce's own variation table (e.g. "Size") ----------
   A completely separate, unstyled <table class="variations"> from
   WooCommerce core - question label to the left, dropdown to the right,
   the exact "label left, freeform field right" layout that looked dated.
   Stacked to match the gift-options rebuild above. The native <select>
   stays in the DOM (WooCommerce's own JS needs it) but is visually
   replaced by pill buttons injected via site-modernize.js. */
body table.variations,
body table.variations tbody,
body table.variations tr,
body table.variations th,
body table.variations td {
  display: block !important;
  width: 100% !important;
}
body table.variations th.label {
  padding: 0 0 10px 0 !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
}
body table.variations td.value {
  padding: 0 !important;
}
body table.variations .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--tt-forest) !important;
}
body select.tt-pillified {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 1px !important;
  width: 1px !important;
}
.tt-variation-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tt-variation-pill {
  margin: 0;
  padding: 10px 18px;
  border: 1.5px solid rgba(31, 77, 56, 0.3);
  border-radius: 999px;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  color: var(--tt-ink);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tt-variation-pill.tt-pill-checked {
  background-color: var(--tt-forest);
  border-color: var(--tt-forest);
  color: var(--tt-parchment);
}

/* ---------- blog archive cards ---------- */
body .elementor-post__card {
  border: 1px solid rgba(31, 77, 56, 0.15) !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 14px 30px -22px rgba(22, 48, 42, 0.35) !important;
  background: var(--tt-parchment) !important;
}
body .elementor-post__badge {
  background-color: var(--tt-gold) !important;
  color: var(--tt-forest-deep) !important;
  font-weight: 700 !important;
}
body .elementor-post__title {
  font-size: 1.15rem !important;
}
body .elementor-post__excerpt p {
  color: var(--tt-ink) !important;
  opacity: 0.85;
}
body .elementor-post__meta-data {
  color: var(--tt-sage) !important;
  font-size: 0.82rem !important;
}
body .elementor-post__read-more {
  font-weight: 600 !important;
}

/* ---------- single blog post: content image frame ----------
   Scoped to .single-post so this never touches sticker/logo images
   elsewhere on the site (those live on the homepage/shop, not on post
   pages). */
body.single-post .elementor-widget-image img {
  border: 1px solid rgba(31, 77, 56, 0.15) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 40px -24px rgba(22, 48, 42, 0.35) !important;
}
body.single-post .page-header .elementor-post-avatar,
body.single-post .page-header .elementor-post-date,
body.single-post .page-header .elementor-icon {
  color: var(--tt-parchment) !important;
  opacity: 0.9;
}

/* "Is This a Gift?" pills say it themselves now (see site-modernize.js),
   so the question label above them is redundant. */
body table.extra-options tr.option_is_gift td.label {
  display: none !important;
}

/* ---------- homepage: Instagram reels section ---------- */
.tt-ig-section {
  /* no standalone background/heavy padding - this should read as a
     compact continuation of the flow, not its own big block. The
     heading/subtitle that used to sit above the carousel were removed
     as redundant, so there is no .tt-ig-head spacing to account for
     any more - just enough top padding to clear whatever precedes it. */
  padding: 16px 20px 20px;
  text-align: center;
}
/* carousel (4 reels + 6 real past-box photos) alongside an
   always-visible vertical list of the benefit text - stacked on
   mobile, side by side from tablet width up. No audio control at all:
   every video stays muted, by design. Arrows sit as an overlay on top
   of the slide frame (not as flex siblings) so the frame keeps its
   full width instead of being squeezed by two 40px buttons either
   side of it. */
.tt-ig-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}
.tt-ig-player {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
.tt-ig-slides {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(31, 77, 56, 0.15);
  box-shadow: 0 22px 44px -22px rgba(22, 48, 42, 0.45);
  background: var(--tt-parchment);
}
.tt-ig-slide {
  display: none;
}
.tt-ig-slide--active {
  display: block;
}
.tt-ig-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--tt-forest-deep);
}
.tt-ig-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  line-height: 0;
  font-size: 0;
  border-radius: 50%;
  border: none;
  background: rgba(251, 248, 242, 0.9);
  color: var(--tt-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(22, 48, 42, 0.5);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.tt-ig-arrow--prev {
  left: 10px;
}
.tt-ig-arrow--next {
  right: 10px;
}
.tt-ig-arrow:hover {
  background: var(--tt-parchment);
  transform: translateY(-50%) scale(1.08);
}
.tt-ig-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  transform: translateY(1.5px);
}
.tt-ig-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 20, 16, 0.5);
  color: var(--tt-parchment);
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tt-benefit-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
}
/* A boxed card (background+border+padding) per item added up to more
   visual weight than the content needed - six parchment boxes on a
   parchment page just read as blank space with faint outlines. A thin
   divider between rows groups items just as clearly with much less of
   it. width:100% overrides a leftover 50% width these columns carried
   from their original two-column-per-section layout (Elementor's own
   generated CSS, not something flex-direction:column resets on its
   own) - without it every row sat at half the list width with a big
   empty gap beside it. */
.tt-benefit-list .tt-benefit-card {
  width: 100% !important;
  padding: 10px 0;
  border-bottom: 1px solid rgba(31, 77, 56, 0.12);
}
.tt-benefit-list .tt-benefit-card:last-child {
  border-bottom: none;
}
.tt-benefit-list .tt-benefit-card .elementor-heading-title {
  font-size: 0.88rem !important;
  margin-bottom: 4px;
}
/* .tt-benefit-card's real icon/text content lives two levels deeper:
   widget-wrap > an inner-section > two 50/50 inner-columns (icon,
   text). Elementor's own mobile breakpoint CSS stacks those two
   columns at this viewport width, which is right for a full-width
   page section but wrong here - force them into a row regardless,
   icon fixed-size and text taking the rest. */
.tt-benefit-list .tt-benefit-card .elementor-inner-section > .elementor-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.tt-benefit-list .tt-benefit-card .elementor-inner-column {
  width: auto !important;
}
.tt-benefit-list .tt-benefit-card .elementor-inner-column:first-child {
  flex: 0 0 auto;
}
.tt-benefit-list .tt-benefit-card .elementor-inner-column:last-child {
  flex: 1 1 auto;
  min-width: 0;
}
/* the source artwork is already a circular badge on transparent-ish
   background - aspect-ratio:1 stops it being squashed into an oval
   (the widget wrapper has no fixed height, so the browser was
   stretching the image to an arbitrary box instead of a clean circle),
   and object-fit:cover keeps the artwork centred within that circle. */
.tt-benefit-list .tt-benefit-card .elementor-widget-image img {
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.tt-benefit-list .tt-benefit-card .elementor-widget-text-editor p {
  font-size: 0.85rem !important;
  line-height: 1.45;
}
@media (min-width: 640px) {
  .tt-ig-slides {
    max-width: 480px;
    margin: 0 auto;
  }
}
@media (min-width: 900px) {
  .tt-ig-layout {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .tt-ig-player {
    max-width: 460px;
    flex: 0 0 auto;
  }
  .tt-benefit-list {
    max-width: 560px;
    flex: 1 1 auto;
  }
}

/* ---------- our-story page: Subscribe/Gifts banner images ----------
   Two different source images (one landscape 800x427, one square
   800x800) rendered at their natural heights side by side, so one
   looked properly sized and the other looked cropped/oversized by
   comparison. Same aspect ratio + object-fit:cover for both. */
body .elementor-element-3c835c9 img,
body .elementor-element-373e36f img {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ---------- homepage: Monthly / Mini Monthly Treat Trunk title bands ----------
   Monthly used pink (#f0b5b2), Mini Monthly used the old teal
   (#0f6277) - two different one-off widget-level background colors on
   what's meant to read as a matching pair of product cards. Same forest
   band as the blog title/newsletter sections elsewhere on the site. */
body .elementor-element-02e713f,
body .elementor-element-bacd323 {
  background-color: var(--tt-forest) !important;
}
body .elementor-element-02e713f .elementor-heading-title,
body .elementor-element-bacd323 .elementor-heading-title {
  color: var(--tt-parchment) !important;
}

/* ---------- homepage: "why subscribe" benefit cards ----------
   Six items relocated here via JS from three separate stacking
   sections (see site-modernize.js) into the always-visible list next
   to the carousel - see .tt-benefit-list above for the list-specific
   layout (icon thumbnail + text, left-aligned). */
.tt-benefit-card {
  text-align: center;
}

/* ---------- homepage: Monthly / Mini Monthly Treat Trunk row ----------
   On desktop the decorative image to the left of the two subscription
   cards did not match their combined height, leaving a visible gap.
   Stretch the row and let the image fill whatever height the cards
   set instead of using its own natural height. */
body .elementor-element-cb7ee5c > .elementor-container {
  align-items: stretch !important;
}
body .elementor-element-5c3a2ca,
body .elementor-element-5c3a2ca .elementor-widget-container {
  height: 100% !important;
}
body .elementor-element-5c3a2ca img {
  height: 100% !important;
  object-fit: cover !important;
}
/* "Customise for your dietary needs" repeats identically on both
   cards with no distinguishing info - redundant next to the box
   descriptions right above it. */
body .elementor-element-eb5f079,
body .elementor-element-de2607b {
  display: none !important;
}
/* "Something for everyone" - trailing line under How our subscription
   works with no real content of its own. */
body .elementor-element-74968cf {
  display: none !important;
}