/*
 * Conversion Tools — shared look tokens (single source of truth).
 *
 * Applied to <body class="cdl-ct cdl-ct--{look}"> on product pages. Each child
 * widget consumes these custom properties via var() and keeps a fallback so it
 * still renders if this layer is absent.
 *
 * One light look. Theme fit is a setting, not a style choice:
 *   automatic — corners follow the theme's add-to-cart button at runtime
 *               (assets/conversion-tools.js), font is inherited;
 *   manual    — corner radius and font come from the settings (inline CSS
 *               that sets --cdl-ct-radius / --cdl-ct-box-radius / --cdl-ct-font).
 */

/* ── Shared rhythm ──
   --cdl-ct-stack: space under each widget, whatever anchor it is placed on.
   --cdl-ct-max:   width cap for the boxed widgets so, in wide summary columns,
                   they line up with the pills and the add-to-cart row instead
                   of stretching edge to edge. */
.cdl-ct{ --cdl-ct-stack:14px; --cdl-ct-max:36rem; }

/* Palette (Apple direction): cool neutrals, meaning carried by
   text/icon colour rather than filled pills.
     ink #1d1d1f · secondary #6e6e73 · surface #f5f5f7 · hairline #e3e3e8
     live #34c759 · delivery #1f7a35 · urgency #b64400 */

/* ── The look — quiet, neutral surfaces ── */
.cdl-ct--calm{
  --cdl-ct-radius:14px; --cdl-ct-pad:8px 14px; --cdl-ct-border:1px solid #e3e3e8;
  --cdl-ct-ico:17px; --cdl-ct-fs:13px; --cdl-ct-weight:500; --cdl-ct-ls:0; --cdl-ct-transform:none;
  --cdl-ct-gap:8px;
  --cdl-ct-live-dot:#34c759; --cdl-ct-live-ink:#1d1d1f; --cdl-ct-live-bg:#f5f5f7; --cdl-ct-live-anim:cdlCtPulse;
  --cdl-ct-scar-bg:#f5f5f7; --cdl-ct-scar-ink:#b64400; --cdl-ct-scar-bd:#e3e3e8; --cdl-ct-scar-ico:#b64400;
  --cdl-ct-timer-bg:#f5f5f7; --cdl-ct-timer-ink:#1d1d1f; --cdl-ct-timer-bd:#e3e3e8; --cdl-ct-timer-ico:#6e6e73; --cdl-ct-flame-anim:none;
  --cdl-ct-del-bg:#ffffff; --cdl-ct-del-bd:1px solid #e3e3e8; --cdl-ct-del-pad:12px 14px; --cdl-ct-del-ink:#1d1d1f; --cdl-ct-del-ico:#1f7a35;
  --cdl-ct-del-mark-bg:#eef7f0; --cdl-ct-del-sub:#6e6e73;
  --cdl-ct-tr-bg:#ffffff; --cdl-ct-tr-bd:1px solid #e3e3e8; --cdl-ct-tr-pad:11px 10px; --cdl-ct-tr-ico:#6e6e73; --cdl-ct-tr-ink:#1d1d1f; --cdl-ct-tr-fs:13px; --cdl-ct-tr-wt:500;
}

@keyframes cdlCtPulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes cdlCtFlame{0%,100%{opacity:1}50%{opacity:.55}}

/* ── Delivery + trust as one service panel ─────────────────────────
   When the trust strip sits directly under the delivery estimate (the default
   placement), they join into a single card. */
.cdl-ct #codela-delivery-eta:has(+ #codela-trust-badges) {
  margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.cdl-ct #codela-delivery-eta + #codela-trust-badges {
  margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}

/* Consistent breathing room below the add-to-cart button 
   whichever widget falls first. High specificity so it beats the theme's own
   `.single-product div.product form.cart` rule. */
.cdl-ct.single-product div.product form.cart { margin-bottom: 20px; }