/* =========================================================================
 * XCellParts � Elementor native-template helper layer
 *
 * The importable templates in build/elementor/{minimal,modern} are built from
 * NATIVE Elementor widgets inside flex/grid Containers, wired to the Brand Kit
 * globals. Almost all styling (colors, type, spacing, borders, radius,
 * backgrounds) is done with Elementor controls. This thin file only adds the
 * few brand "signatures" + chrome bits that Elementor controls can't express:
 *   - the eyebrow red tick + on-dark variant
 *   - the hero highlight underline
 *   - the card hover lift (red border + raise)
 *   - the native "table" (grid of cells) borders
 *   - header / footer chrome (logo wordmark, search pill, link lists)
 * Classes are applied via each element's Advanced ? CSS Classes.
 * Tokens come from xcell-brand.css.
 * ========================================================================= */

/* ---- Eyebrow on-dark variant (light variant lives in xcell-brand.css) ---- */
.xcell-eyebrow--dark .elementor-heading-title,
.xcell-eyebrow--dark{ color:var(--xcell-red-300) }
.xcell-eyebrow--dark::before{ background:var(--xcell-red-400) }

/* ---- Hero highlight (span inside an H1 Heading) ---- */
.xcell-hl{ color:var(--xcell-red-600); box-shadow:inset 0 -.3em 0 var(--xcell-red-100) }

/* ---- WoodMart banner (wd_banner) — placeholder styling ---- */
/*
 * WoodMart renders wd_banner at 0px height with no image; WoodMart sets the
 * background-image as an inline style, so these background-color rules act as
 * solid-color fallbacks for:
 *   a) The Elementor editor canvas (admin-origin iframe may block external CDN)
 *   b) Any context where the image hasn't loaded yet
 * When a real image is assigned, WoodMart's inline background-image takes over
 * and the background-color becomes the colour-behind-image (safe to keep).
 */
.elementor-widget-wd_banner .wd-banner{
  min-height:260px;
  border-radius:var(--xcell-r-card);
  background-color:#EEF0F3;      /* light neutral fallback for generic banners */
}
/* Hero banners: dark ink, matching the hero section background */
.xcell-art .wd-banner{
  min-height:420px;
  background-color:#1F2330;
}
/* Promo band art: very subtle light tint */
.xcell-band-art .wd-banner{
  min-height:260px;
  background-color:#F7F8FA;
}

/* ---- Hero media placeholder ---- */
.xcell-art img{ border-radius:var(--xcell-r-card) }
.xcell-band-art{ min-height:220px }

/* ---- Card surface + signature hover (icon-box widgets and container cards) ---- */
.xcell-card{
  border:1px solid var(--xcell-n-200); border-radius:var(--xcell-r-card);
  padding:22px; background:#fff; transition:.16s var(--xcell-ease);
}
.xcell-card:hover{
  border-color:var(--xcell-red-500); transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(14,17,22,.08);
}
/* icon-box internals inside a card */
.xcell-card .elementor-icon-box-icon{ margin-bottom:10px }
.xcell-card .elementor-icon{ color:var(--xcell-red-600) }

/* feature icon (plain, no card frame) e.g. USP / trust strip */
.xcell-iconfeat .elementor-icon{ color:var(--xcell-red-600) }

/* modern trust bar: hairline dividers between framed-icon items */
.xcell-trust-item{ padding:24px 22px }
.xcell-trust-item:not(:last-child){ border-right:1px solid var(--xcell-n-100) }
/* Force framed icon size, border colour and icon colour — overrides WoodMart defaults */
.xcell-trust-item .elementor-icon-box-icon{ margin-bottom:0; flex:none }
.xcell-trust-item .elementor-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px!important; height:48px!important; font-size:20px!important;
  border:2px solid var(--xcell-red-200)!important;
  border-radius:10px!important;
  color:var(--xcell-red-500)!important;
  background:transparent;
}
.xcell-trust-item .elementor-icon-box-wrapper{ display:flex; gap:14px; align-items:flex-start }
.xcell-trust-item .elementor-icon-box-content{ flex:1 }
.xcell-trust-item .elementor-icon-box-title{ margin:0!important; font-size:1rem!important; font-weight:700!important; color:var(--xcell-ink-800)!important }
.xcell-trust-item .elementor-icon-box-description{ margin:0!important; font-size:0.875rem!important; color:var(--xcell-n-500)!important }
@media(max-width:1024px){ .xcell-trust-item:nth-child(2){ border-right:0 } }
@media(max-width:767px){ .xcell-trust-item{ border-right:0!important; border-bottom:1px solid var(--xcell-n-100) } }

/* ---- Stats ---- */
.xcell-stat-num .elementor-heading-title{ font-variant-numeric:tabular-nums }

/* ---- Modern hero: glass stat chips + caption pill ---- */
.xcell-hero-chip{ backdrop-filter:blur(4px) }
.xcell-pill{ box-shadow:0 8px 24px rgba(14,17,22,.18) }

/* ---- Section "view all" link (a Button styled as a text link) ---- */
.xcell-link .elementor-button{
  background:transparent!important; border:0!important; padding:6px 0!important;
  color:var(--xcell-red-600)!important; box-shadow:none!important; font-weight:700;
}
.xcell-link .elementor-button:hover{ color:var(--xcell-red-700)!important; transform:none }

/* ---- Pill chips (Buttons used as model/brand chips) ---- */
.xcell-chip .elementor-button{
  background:#fff!important; color:var(--xcell-ink-700)!important;
  border:1px solid var(--xcell-n-200)!important; box-shadow:none!important;
  font-weight:600; padding:9px 16px!important;
}
.xcell-chip .elementor-button:hover{ border-color:var(--xcell-red-500)!important; color:var(--xcell-red-600)!important }

/* ---- Native data table (grid of heading/text cells, gap 0) ---- */
.xcell-table{
  border:1px solid var(--xcell-n-200); border-radius:var(--xcell-r-card); overflow:hidden; background:#fff;
}
.xcell-table > .e-con-inner > .elementor-element,
.xcell-table > .elementor-element{
  padding:13px 16px; border-bottom:1px solid var(--xcell-n-100);
}
.xcell-table .xcell-th .elementor-heading-title{
  font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--xcell-n-600); font-weight:700;
}
.xcell-table .xcell-th{ background:var(--xcell-n-50) }

/* ---- Pricing tiers ---- */
.xcell-tier{ position:relative }
.xcell-tier--feat{ border-color:var(--xcell-red-500); box-shadow:0 16px 36px rgba(212,32,39,.12) }
.xcell-tier-disc .elementor-heading-title{ font-variant-numeric:tabular-nums }

/* ---- Steps (numbered) ---- */
.xcell-step-n .elementor-heading-title{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9999px; background:var(--xcell-red-50); color:var(--xcell-red-600); font-weight:800;
}

/* ---- Promo tiles ---- */
.xcell-promo{ min-height:150px; justify-content:flex-end }

/* ---- 404 ---- */
.xcell-404-code .elementor-heading-title{ font-size:90px; line-height:1; letter-spacing:-.03em }

/* ---- Grade / promo small tags ---- */
.xcell-gradetag .elementor-heading-title,
.xcell-promo-tag .elementor-heading-title{ font-weight:800; letter-spacing:.04em }

/* ---- Reviews ---- */
.xcell-rev-who .elementor-heading-title{ font-weight:700; color:var(--xcell-ink-800) }

/* =========================================================================
 * Header / Footer chrome (native Elementor header/footer templates)
 * ========================================================================= */

/* logo wordmark */
.xcell-logo-wrap .elementor-widget-container,.xcell-logo-wrap .elementor-text-editor{ line-height:1 }
.xcell-logo{ display:inline-flex; align-items:center; gap:4px; flex:none; text-decoration:none } /* v2: X is the first letter — tight gap */
.xcell-logo .mark{ width:30px; height:30px; flex:none }
.xcell-logo .wm{ font-weight:900; font-style:italic; letter-spacing:-.03em; font-size:23px; color:var(--xcell-ink-900) }
.xcell-logo .elementor-heading-title{ font-weight:900; font-style:italic; letter-spacing:-.03em; font-size:23px; color:var(--xcell-ink-900) }
.xcell-logo--light .wm,.xcell-logo--light .elementor-heading-title,.xcell-footer .xcell-logo .wm{ color:#fff }
.xcell-logo-p{ color:var(--xcell-red-500); font-style:italic }

/* utility bar */
.xcell-utilbar{ font-size:12.5px }
.xcell-utilbar .elementor-icon-list-item a:hover,
.xcell-util-nav .elementor-icon-list-item a:hover{ color:#fff }
.xcell-util-right{ font-weight:600 }

/* header search (a small <form> in a Text widget � Woo/Pro AJAX search can replace it) */
.xcell-search{ display:flex; align-items:center; gap:8px; border:1.5px solid var(--xcell-n-200);
  border-radius:9999px; padding:0 6px 0 16px; height:48px; background:#fff }
.xcell-search:focus-within{ border-color:var(--xcell-red-500); box-shadow:0 0 0 3px var(--xcell-red-50) }
.xcell-search input{ flex:1; border:0; outline:0; font:inherit; font-size:14.5px; background:transparent }
.xcell-search button{ height:36px; border:0; border-radius:9999px; background:var(--xcell-red-500); color:#fff;
  font:inherit; font-weight:700; font-size:13.5px; padding:0 18px; cursor:pointer }
.xcell-search button:hover{ background:var(--xcell-red-600) }
.xcell-search-wrap{ flex:1 }

/* [xcell_header_search] in the LIGHT minimal header — the shortcode markup is
 * styled dark by xcell-header-v2.css (form.xh-search); these higher-specificity
 * overrides restyle it to the comp's white pill + red "Search" text button. */
.xcell-search--light form.xh-search{
  background:#fff; border:1.5px solid var(--xcell-n-200); height:46px; padding:0 6px 0 16px }
.xcell-search--light form.xh-search:focus-within{
  border-color:var(--xcell-red-500); box-shadow:0 0 0 3px var(--xcell-red-50); background:#fff }
.xcell-search--light .xh-search input[type=search]{ color:var(--xcell-ink-800); font-size:14.5px }
.xcell-search--light .xh-search input::placeholder{ color:var(--xcell-n-400) }
.xcell-search--light .xh-search .xh-search-btn{
  width:auto; min-width:0; height:34px; border-radius:9999px; padding:0 16px;
  font-size:13.5px; font-weight:700 }
.xcell-search--light .xh-search .xh-search-btn svg{ display:none }
.xcell-search--light .xh-search .xh-search-btn .vh{
  position:static!important; width:auto; height:auto; clip:auto; overflow:visible; white-space:normal }

/* [xcell_header_cart] in the LIGHT minimal header — icon button + count dot
 * (comp .iconbtn + .dot); label and running total stay hidden. */
.xcell-cart--light .xcell-header-cart{
  border-color:var(--xcell-n-200); background:#fff; color:var(--xcell-ink-700);
  padding:10px 12px; border-radius:12px }
.xcell-cart--light .xcell-header-cart:hover{
  background:var(--xcell-red-50); color:var(--xcell-red-600); border-color:var(--xcell-red-300) }
.xcell-cart--light .xcell-header-cart__label,
.xcell-cart--light .xcell-header-cart__total{ display:none }
.xcell-cart--light .xcell-header-cart__badge{ border-color:#fff }

/* header icon buttons */
.xcell-iconbtn .elementor-button{ border-radius:12px }

/* footer */
.xcell-footer .elementor-heading-title{ color:#fff }
.xcell-foot-links .elementor-icon-list-item a{ color:#c5ccd8; font-size:14px }
.xcell-foot-links .elementor-icon-list-item a:hover{ color:#fff }

/* =========================================================================
 * Pro-native chrome skins (header/footer rebuild 2026-06-10)
 * The chrome templates now use Elementor Pro widgets (Site Logo, Search Form,
 * Menu Cart, Social Icons, Form). Widget controls carry the colors/sizes;
 * these rules add only what controls can't express: pill containers, focus
 * rings, circle buttons, per-icon borders, comp hover states.
 * ========================================================================= */

/* Site Logo (theme-site-logo) — flush line box */
.xcell-sitelogo .elementor-widget-container{ line-height:1 }
.xcell-sitelogo img{ display:block }

/* Pro Search Form — LIGHT pill (minimal header comp .search) */
.xcell-psearch .elementor-search-form__container{
  border-radius:9999px; border:1.5px solid var(--xcell-n-200); background:#fff;
  padding:0 5px 0 16px; transition:border-color .15s ease, box-shadow .15s ease }
.xcell-psearch .elementor-search-form--focus .elementor-search-form__container{
  border-color:var(--xcell-red-500); box-shadow:0 0 0 3px var(--xcell-red-50) }
.xcell-psearch input.elementor-search-form__input{ font-size:14.5px; color:var(--xcell-ink-800) }
.xcell-psearch .elementor-search-form__input::placeholder{ color:var(--xcell-n-400); opacity:1 }
.xcell-psearch button.elementor-search-form__submit{
  width:38px; min-width:38px; height:38px; flex:none; align-self:center;
  border-radius:50%; transition:background .15s ease }

/* Pro Search Form — DARK pill (header V2 comp .xh-search) */
.xcell-psearch--dark .elementor-search-form__container{
  border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06); padding-left:18px }
.xcell-psearch--dark .elementor-search-form--focus .elementor-search-form__container{
  border-color:var(--xcell-red-400); box-shadow:0 0 0 4px rgba(212,32,39,.20); background:rgba(255,255,255,.10) }
.xcell-psearch--dark input.elementor-search-form__input{ color:#fff; font-size:15px }
.xcell-psearch--dark .elementor-search-form__input::placeholder{ color:#9aa1ad }
.xcell-psearch--dark button.elementor-search-form__submit{ width:40px; min-width:40px; height:40px }

/* Pro Menu Cart — LIGHT icon button (minimal header comp .iconbtn + count dot) */
.xcell-menucart .elementor-menu-cart__toggle .elementor-button{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--xcell-n-200); background:#fff; color:var(--xcell-ink-700);
  border-radius:12px; padding:10px 12px; transition:.15s ease }
.xcell-menucart .elementor-menu-cart__toggle .elementor-button:hover{
  background:var(--xcell-red-50); color:var(--xcell-red-600); border-color:var(--xcell-red-300) }
.xcell-menucart .elementor-button-icon-qty[data-counter]{
  background:var(--xcell-red-500); border:2px solid #fff; font-weight:800 }

/* Pro Menu Cart — DARK pill + red subtotal chip (header V2 comp .xh-cart).
 * Pro renders subtotal text before the icon; row-reverse puts the icon left
 * and the chip right like the comp. */
.xcell-menucart--dark .elementor-menu-cart__toggle .elementor-button{
  flex-direction:row-reverse;
  border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff;
  border-radius:9999px; padding:6px 6px 6px 15px; font-weight:600; font-size:13.5px }
.xcell-menucart--dark .elementor-menu-cart__toggle .elementor-button:hover{
  background:rgba(255,255,255,.06); color:#fff; border-color:var(--xcell-red-300) }
.xcell-menucart--dark .elementor-menu-cart__toggle .elementor-button-text{
  background:var(--xcell-red-500); color:#fff; font-weight:800; font-size:13px;
  border-radius:9999px; padding:6px 13px; font-variant-numeric:tabular-nums }
.xcell-menucart--dark .elementor-button-icon-qty[data-counter]{
  background:var(--xcell-red-500); border:2px solid var(--xcell-ink-900) }

/* [xcell_header_wishlist] in the LIGHT minimal header — the shortcode circle
 * is styled dark by xcell-header-v2.css (.xh-wish); restyle to comp .iconbtn. */
.xcell-wish--light .xcell-header-wish{
  border-color:var(--xcell-n-200); background:#fff; color:var(--xcell-ink-700); border-radius:12px }
.xcell-wish--light .xcell-header-wish:hover{
  border-color:var(--xcell-red-300); background:var(--xcell-red-50); color:var(--xcell-red-600) }

/* Footer social circles (comp .xf-social — per-icon border has no control) */
.xcell-social .elementor-social-icon{
  border:1px solid rgba(255,255,255,.14); transition:.15s ease }
.xcell-social .elementor-social-icon:hover{
  border-color:var(--xcell-red-400); background:rgba(212,32,39,.18) }
.xcell-social .elementor-social-icon:hover i{ color:#fff }

/* Footer payment chips + contact list (comp .xf-pays / .xf-contact) */
.xcell-paychip .elementor-heading-title{ white-space:nowrap }
.xcell-foot-contact .elementor-icon-list-item{ font-size:13.5px }
.xcell-foot-contact .elementor-icon-list-icon i{ font-size:14px }
.xcell-foot-contact .elementor-icon-list-item a:hover .elementor-icon-list-text{ color:#fff }

/* Pro Form newsletter — dark pill fields (footer band + footer-v3 red card) */
.xcell-nl-form .elementor-field-textual{ border-radius:9999px; min-height:48px; padding:0 18px }
.xcell-nl-form .elementor-button[type=submit]{ min-height:48px; font-weight:700 }
.xcell-nl-form--ondark .elementor-field-textual{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff }
.xcell-nl-form--ondark .elementor-field-textual::placeholder{ color:#9aa1ad; opacity:1 }
.xcell-nl-form--ondark .elementor-field-textual:focus{
  background:rgba(255,255,255,.10); border-color:var(--xcell-red-400);
  box-shadow:0 0 0 4px rgba(212,32,39,.20) }

/* legal TOC */
.xcell-toc-wrap{ position:sticky; top:96px }
.xcell-toc .elementor-icon-list-item a{ color:var(--xcell-n-600); font-size:13.5px }
.xcell-toc .elementor-icon-list-item a:hover{ color:var(--xcell-red-600) }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .xcell-card{ transition:none }
  .xcell-card:hover{ transform:none }
}

/* =========================================================================
 * Elementor margin / spacing normalisation
 *
 * The HTML preview hardcodes margin:0 on every heading tag; Elementor does
 * not. WoodMart (and most themes) add bottom-margin to h1–h4 via their own
 * stylesheet. Inside flex/grid Containers the container gap handles all
 * inter-element spacing, so any extra heading or paragraph margin produces
 * double-spacing compared to the preview and the design intent.
 *
 * These rules are scoped tightly to Elementor widget classes and are safe
 * site-wide: they only affect content placed via Elementor widgets, where
 * the container gap is always the source of truth for vertical rhythm.
 * ========================================================================= */

/* Heading tags inside the heading widget should never add margin. */
.elementor-widget-heading .elementor-heading-title { margin-top:0; margin-bottom:0 }

/* First/last <p> in a text-editor widget should flush with the widget edge. */
.elementor-widget-text-editor .elementor-widget-container > p:first-child { margin-top:0 }
.elementor-widget-text-editor .elementor-widget-container > p:last-child  { margin-bottom:0 }

/* Icon-box description <p> should not add trailing margin inside cards. */
.elementor-icon-box-description { margin-bottom:0 }