/* TEFT Global — QA fix layer. Loaded after home.css and native.css.
   Everything here is an override; the source-derived cascade is left untouched. */

/* ------------------------------------------------------------------ 1. ICONS
   The source markup carries Font Awesome (.fas) and Happy Icons (.hm) glyphs.
   Neither icon font ships with this theme, so the glyphs rendered as tofu
   boxes. They are replaced with inline SVG, which is how Elementor itself
   renders Font Awesome on this site (e_font_icon_svg). These rules make the
   SVG size and colour behave exactly like the font glyph it replaced. */
.teft-i {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
/* Elementor and Happy Addons both set `fill: currentColor` on any svg they
   find, which would flood these stroke-drawn icons solid. Pin them back. */
.teft-i,
.teft-i path,
.teft-i circle,
.teft-i rect,
.teft-i line,
.teft-i polyline {
  fill: none;
  stroke: currentColor;
}
.teft-addon-feature-list .teft-addon-icon .teft-i {
  width: 1em;
  height: 1em;
}
.teft-addon-steps-icon .teft-i--step {
  width: 1em;
  height: 1em;
}

/* -------------------------------------------------- 2. WIDGET SPACING (gaps)
   Root cause: the conversion renamed BOTH Elementor's section wrapper
   (.elementor-container) and its flexbox container (.e-con) to .teft-container.
   Elementor's rule ".e-con .elementor-widget{margin-block-end:0}" therefore
   also hit widgets sitting inside section columns, collapsing every vertical
   gap between stacked widgets — which is why the supplier cards touched.
   Re-scope it to direct children of a flex/grid container, which is the only
   place Elementor actually means it (those use `gap` instead). */
/* The same rename collision also zeroed Elementor's --kit-widget-spacing
   variable, so restoring the margin alone was not enough. Put the kit value
   back for widgets stacked inside a section column, and keep it at zero
   inside flex/grid containers where `gap` does the spacing. */
.teft-widget-wrap > .teft-widget:not(:last-child) {
  --kit-widget-spacing: 20px;
}
.teft-container-inner > .teft-widget:not(:last-child) {
  --kit-widget-spacing: 0px;
}
.teft-container .teft-widget.teft-widget {
  margin-block-end: var(--kit-widget-spacing, 20px);
}
.teft-container > .teft-container-inner > .teft-widget.teft-widget,
.teft-container > .teft-widget.teft-widget {
  margin-block-end: 0;
}
.teft-widget-wrap > .teft-widget.teft-widget:last-child {
  margin-block-end: 0;
}

/* The supplier / buyer cards are Happy Addons infoboxes stacked inside a
   column. Give them the original 20px rhythm and keep the two masonry
   columns level. */
.teft-element-4ebf0f5 > .teft-container,
.teft-element-8636b72 > .teft-container-inner {
  --column-gap: 20px;
  --row-gap: 20px;
}
.teft-addon-infobox + .teft-addon-infobox,
.teft-widget-wrap > .teft-widget-teft-addon-infobox + .teft-widget-teft-addon-infobox {
  margin-block-start: 0;
}

/* ------------------------------------------- 3. INDUS PEARL VERTICAL CENTRING
   The flagship-brand band had top-aligned columns, so the copy sat against the
   top edge while the pack shot floated mid-band. */
.teft-72 .teft-element.teft-element-33a8b610 > .teft-container {
  align-items: center;
}
.teft-72 .teft-element.teft-element-33a8b610 > .teft-container > .teft-column > .teft-widget-wrap {
  align-content: center;
  align-items: center;
  justify-content: center;
}
.teft-72 .teft-element.teft-element-33a8b610 .teft-element-5b739134 img {
  display: block;
  margin-inline: auto;
}

/* --------------------------------------------------- 4. COMMITMENT CARD PADDING
   The card body only had horizontal padding, so the heading touched the top
   edge of the white card and the last line touched the bottom. */

/* Visible keyboard focus — the source theme removed it. */
.teft a:focus-visible,
.teft button:focus-visible,
.teft input:focus-visible,
.teft select:focus-visible,
.teft textarea:focus-visible {
  outline: 2px solid var(--e-global-color-fc69a00, #f36857);
  outline-offset: 2px;
}
.teft img { max-width: 100%; height: auto; }

/* Happy Addons card — values read off the live page (1536px viewport):
   wrapper  display:flex; align-items:center; padding:0; border-radius:5px
   figure   flex:0 0 502px; stretched to the card's full height; padding:0
   image    object-fit:cover; fills the figure; border-radius:5px 0 0 5px
   body     flex:0 0 calc(100% - 502px); padding:0 50px  (no vertical padding)
   The only actual defect was the image having no height constraint, so tall
   sources spilled below the card. Nothing else here needed changing. */
.teft-addon-card--left > .teft-widget-container,
.teft-addon-card--right > .teft-widget-container {
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
}
.teft-addon-card--left .teft-addon-card-figure,
.teft-addon-card--right .teft-addon-card-figure {
  padding: 0;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
}
.teft-addon-card .teft-addon-card-figure img {
  /* height:100% only bites when the figure is stretched (left/right cards);
     on --top cards the figure is auto-height so the image keeps its ratio */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .teft-addon-card.teft-addon-card--tablet-top > .teft-widget-container {
    display: block;
  }
  .teft-addon-card.teft-addon-card--tablet-top .teft-addon-card-figure {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .teft-addon-card.teft-addon-card--mobile-top > .teft-widget-container {
    display: block;
  }
  .teft-addon-card.teft-addon-card--mobile-top .teft-addon-card-figure {
    width: 100%;
    max-width: 100%;
  }
}

/* --top cards: the figure was inline-block, so the inline baseline added a
   ~10px phantom gap under the image and made each card 511px instead of the
   live 501px. Live renders it as a block. */
.teft-addon-card--top .teft-addon-card-figure,
.teft-addon-card--top .teft-addon-card-figure img {
  display: block;
  width: 100%;
}

/* ------------------------------------------- WORDPRESS LAYOUT CLAMP
   WordPress emits global block styles that constrain .site-main to the
   theme.json content/wide size (1140px here). That clamped every section to
   1100px instead of the live 1260px and made the whole page look narrow.
   This theme does not use block layout, so the clamp is removed. Width is
   owned by the Elementor containers, exactly as on the live site. */
main#content.site-main {
  max-width: none;
  width: 100%;
  padding-inline: 0;
  margin-inline: 0;
}

/* ------------------------------------------------- GRID CONTAINER NESTING
   Measured on the live page: a boxed grid container is a SINGLE column at
   full width, and the column template belongs to its inner wrapper, which is
   what gets width-limited and centred.

     live outer  grid-template-columns: 1520.8px   (one column)
     live inner  grid-template-columns: 413px x3   width 1280, centred

   Two things broke this. The original conversion renamed the custom property
   itself (--e-con-grid-template-columns -> --teft-container-...), so the base
   rule read a variable nothing set; and pages-shared.css loads after home.css
   and re-applied the 3-column template to the OUTER container. The result
   nested grid inside grid - 1536 -> 512 -> 157px - which squeezed whole
   sections into vertical strips of single characters. */
.teft-container-boxed.e-grid {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.teft-container-boxed.e-grid > .teft-container-inner {
  grid-template-columns: var(--e-con-grid-template-columns);
  grid-template-rows: var(--e-con-grid-template-rows);
}

/* --------------------------------------------- SECTION CONTAINER PADDING
   The conversion gave Elementor's two different wrappers the same class name:
   legacy section inners (.elementor-container) and flex containers (.e-con)
   both became .teft-container. So the flex container's 10px inline padding
   leaked onto every legacy section inner, pushing content 10px (or 20px where
   nested) further right than the live page on every section.

   Measured on live:  .elementor-container  padding-left 0, x 120, width 1280
   Flex containers keep their own padding - they carry -boxed / -full. */
.teft-section > .teft-container:not(.teft-container-boxed):not(.teft-container-full) {
  padding-inline: 0;
}

/* ------------------------------------------------- ACCORDION DEFAULT STATE
   The live page ships the first item of each accordion open. The homepage
   conversion dropped that state, so its FAQ section rendered 158px short.
   The subpage templates DO carry the active markup from source, so the rule
   is gated on "no item is active yet": it supplies the default where it is
   missing, stays out of the way where it is present, and releases as soon as
   the visitor toggles anything, so the first item can still be closed. */
.teft-accordion:not(:has(.teft-tab-content.teft-active)) .teft-accordion-item:first-child .teft-tab-content {
  display: block;
}
.teft-accordion:not(:has(.teft-tab-content.teft-active)) .teft-accordion-item:first-child .teft-accordion-icon-closed {
  display: none;
}
.teft-accordion:not(:has(.teft-tab-content.teft-active)) .teft-accordion-item:first-child .teft-accordion-icon-opened {
  display: inline-block;
}