/* * Conversion Tools — shared design-language tokens (single source of truth). * * Applied to on product pages and to the * admin preview root. Each child widget consumes these custom properties via * var() and keeps a fallback so it still renders if this layer is absent. * * Languages: editorial (default) · soft · line · bold. */ /* ── 01 · Editorial — monochrome, borderless, uppercase ── */ .cdl-ct--editorial{ --cdl-ct-radius:0; --cdl-ct-pad:0; --cdl-ct-border:0; --cdl-ct-ico:15px; --cdl-ct-fs:12px; --cdl-ct-weight:500; --cdl-ct-ls:.08em; --cdl-ct-transform:uppercase; --cdl-ct-gap:18px; --cdl-ct-live-dot:currentColor; --cdl-ct-live-ink:currentColor; --cdl-ct-live-bg:transparent; --cdl-ct-live-anim:none; --cdl-ct-scar-bg:transparent; --cdl-ct-scar-ink:currentColor; --cdl-ct-scar-bd:transparent; --cdl-ct-scar-ico:currentColor; --cdl-ct-timer-bg:transparent; --cdl-ct-timer-ink:currentColor; --cdl-ct-timer-bd:transparent; --cdl-ct-timer-ico:currentColor; --cdl-ct-flame-anim:none; --cdl-ct-del-bg:transparent; --cdl-ct-del-bd:0; --cdl-ct-del-pad:0; --cdl-ct-del-ink:currentColor; --cdl-ct-del-ico:currentColor; --cdl-ct-del-sub:currentColor; --cdl-ct-tr-bg:transparent; --cdl-ct-tr-bd:0; --cdl-ct-tr-pad:2px; --cdl-ct-tr-ico:currentColor; --cdl-ct-tr-ink:currentColor; --cdl-ct-tr-fs:12px; --cdl-ct-tr-wt:500; } /* ── 02 · Soft — rounded, light surface, warm accent ── */ .cdl-ct--soft{ --cdl-ct-radius:14px; --cdl-ct-pad:8px 14px; --cdl-ct-border:1px solid #e5e3dc; --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:#2fa36b; --cdl-ct-live-ink:#1f2937; --cdl-ct-live-bg:#f5f4f0; --cdl-ct-live-anim:cdlCtPulse; --cdl-ct-scar-bg:#fbeee8; --cdl-ct-scar-ink:#1f2937; --cdl-ct-scar-bd:#f2d6c8; --cdl-ct-scar-ico:#9c3a1e; --cdl-ct-timer-bg:#f5f4f0; --cdl-ct-timer-ink:#1f2937; --cdl-ct-timer-bd:#e5e3dc; --cdl-ct-timer-ico:#1f2937; --cdl-ct-flame-anim:none; --cdl-ct-del-bg:#ffffff; --cdl-ct-del-bd:1px solid #e5e3dc; --cdl-ct-del-pad:12px 14px; --cdl-ct-del-ink:#1f2937; --cdl-ct-del-ico:#2fa36b; --cdl-ct-del-sub:#1f2937; --cdl-ct-tr-bg:#ffffff; --cdl-ct-tr-bd:1px solid #e5e3dc; --cdl-ct-tr-pad:12px 8px; --cdl-ct-tr-ico:#2fa36b; --cdl-ct-tr-ink:#1f2937; --cdl-ct-tr-fs:13px; --cdl-ct-tr-wt:500; } /* ── 03 · Line — hairline outlines, compact, neutral ── */ .cdl-ct--line{ --cdl-ct-radius:7px; --cdl-ct-pad:6px 11px; --cdl-ct-border:1px solid #d8d3c8; --cdl-ct-ico:16px; --cdl-ct-fs:12.5px; --cdl-ct-weight:500; --cdl-ct-ls:0; --cdl-ct-transform:none; --cdl-ct-gap:8px; --cdl-ct-live-dot:#3e7bc2; --cdl-ct-live-ink:#1f2937; --cdl-ct-live-bg:transparent; --cdl-ct-live-anim:none; --cdl-ct-scar-bg:transparent; --cdl-ct-scar-ink:#1f2937; --cdl-ct-scar-bd:#d8d3c8; --cdl-ct-scar-ico:#b4432f; --cdl-ct-timer-bg:transparent; --cdl-ct-timer-ink:#1f2937; --cdl-ct-timer-bd:#d8d3c8; --cdl-ct-timer-ico:#b4432f; --cdl-ct-flame-anim:none; --cdl-ct-del-bg:transparent; --cdl-ct-del-bd:1px solid #d8d3c8; --cdl-ct-del-pad:10px 12px; --cdl-ct-del-ink:#1f2937; --cdl-ct-del-ico:#2fa36b; --cdl-ct-del-sub:#1f2937; --cdl-ct-tr-bg:transparent; --cdl-ct-tr-bd:1px solid #d8d3c8; --cdl-ct-tr-pad:11px 8px; --cdl-ct-tr-ico:#54524b; --cdl-ct-tr-ink:#1f2937; --cdl-ct-tr-fs:12.5px; --cdl-ct-tr-wt:500; } /* ── 04 · Bold — campaign: solid fills, high contrast, uppercase, animated ── */ .cdl-ct--bold{ --cdl-ct-radius:8px; --cdl-ct-pad:9px 14px; --cdl-ct-border:0; --cdl-ct-ico:18px; --cdl-ct-fs:13px; --cdl-ct-weight:700; --cdl-ct-ls:.02em; --cdl-ct-transform:uppercase; --cdl-ct-gap:8px; --cdl-ct-live-dot:#ffffff; --cdl-ct-live-ink:#ffffff; --cdl-ct-live-bg:#1f6d46; --cdl-ct-live-anim:cdlCtPulse; --cdl-ct-scar-bg:#c0392b; --cdl-ct-scar-ink:#ffffff; --cdl-ct-scar-bd:transparent; --cdl-ct-scar-ico:#ffffff; --cdl-ct-timer-bg:#1a1a17; --cdl-ct-timer-ink:#ffffff; --cdl-ct-timer-bd:transparent; --cdl-ct-timer-ico:#ffffff; --cdl-ct-flame-anim:cdlCtFlame; --cdl-ct-del-bg:#12241a; --cdl-ct-del-bd:0; --cdl-ct-del-pad:12px 14px; --cdl-ct-del-ink:#ffffff; --cdl-ct-del-ico:#7fd1a6; --cdl-ct-del-sub:#9fc7b2; --cdl-ct-tr-bg:#f2efe8; --cdl-ct-tr-bd:0; --cdl-ct-tr-pad:12px 8px; --cdl-ct-tr-ico:#111827; --cdl-ct-tr-ink:#111827; --cdl-ct-tr-fs:13px; --cdl-ct-tr-wt:700; } @keyframes cdlCtPulse{0%,100%{opacity:1}50%{opacity:.45}} @keyframes cdlCtFlame{0%,100%{opacity:1}50%{opacity:.55}} /* ── Editorial-only layout ────────────────────────────────────────── Editorial drops the tiled/boxed look, so trust badges get thin hairline dividers instead of borders, and the add-to-cart → widget gap is tightened to match the language's compact rhythm. */ /* column-gap:0 so the hairline dividers read as a continuous strip; row-gap keeps the two mobile rows from colliding when it wraps. */ .cdl-ct--editorial #codela-trust-badges { column-gap: 0; row-gap: 16px; } .cdl-ct--editorial #codela-trust-badges .cdl-tb-item { padding: 2px 12px; gap: 5px; } /* Smaller, proportionate icons — 26px reads as oversized against the thin editorial text. */ .cdl-ct--editorial #codela-trust-badges .cdl-tb-ico svg { width: 18px; height: 18px; } .cdl-ct--editorial #codela-trust-badges .cdl-tb-item + .cdl-tb-item { border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent); } @media (max-width: 768px) { /* 2-across on mobile: the first item of the second row must not carry a divider. */ .cdl-ct--editorial #codela-trust-badges .cdl-tb-item:nth-child(3) { border-left: 0; } } /* Consistent breathing room below the add-to-cart button, whichever widget falls first (adjacent vertical margins collapse, so this value governs the gap). High specificity so it beats the theme's own `.single-product div.product form.cart` rule. */ .cdl-ct--editorial.single-product div.product form.cart { margin-bottom: 20px; }