/* ==========================================================================
   Locksmiths Canada — v2 bridge

   Every page that is not yet a dedicated v2 template keeps its v1 markup.
   This file puts that markup into the v2 look: the v1 design system was
   token-based, so remapping the tokens re-colours most of the site at once,
   and the overrides below retire the v1 signatures (paper grain, hard offset
   shadows, the tilted fee card, the copper key-cut rules) and bring in the
   v2 type and buttons.

   Loaded only when v2 is active (preview cookie, preview key, or the live
   switch), after every v1 stylesheet.
   ========================================================================== */

:root{
  --paper:#f4f5f2; --paper2:#eaece7; --card:#ffffff;
  --ink:#14201b; --ink60:#3d4943; --ink30:#66726c;
  --steel:#0f3d30; --steel2:#14513f; --steel-lt:#dcebe4;
  --rule:#d9dfda;
  --cu:#14513f; --cu2:#0f3d30; --cu-lt:#e3f1ea;
  --ok:#1a7f4b;
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:16px;
  --ink-shadow:0px; --ink-shadow-sm:0px; --card-tilt:0deg; --card-drop:0px;
  --grain:0; --stamp-ink:0;
  --max:1200px;
}

/* The v2 homepage is a v2 template: element-level rules here are for v1 pages only. */
body{background:var(--bg,#f4f5f2);color:var(--ink);font-family:var(--sans)}
body::before,body::after{background-image:none!important}

/* ---------- type ---------- */
body:not(.lc-v2-home) :is(h1,h2),.dsp{font-family:var(--serif)!important;font-weight:700!important;letter-spacing:-.015em!important;line-height:1.08}
body:not(.lc-v2-home) :is(h3,h4){font-family:var(--sans)!important;letter-spacing:-.01em!important}
.eyb{color:var(--g700)!important;font-family:var(--sans)!important;letter-spacing:.14em!important}
.eyb::before,.eyb::after{background:var(--g700)!important}
.lede{color:var(--ink2)!important}
body:not(.lc-v2-home) main a:not([class]),.lc-prose a{color:var(--g700)}

/* ---------- retire the v1 signatures ---------- */
.sv__n::after,.sh::after,.lc-hd__box::after,.vb::after{display:none!important}
.fee{transform:none!important;margin-top:0!important}
[class*="stamp"]{display:none!important}

/* ---------- buttons: orange acts, green structures ---------- */
.btn{border-radius:var(--r1,6px)!important;min-height:44px;font-family:var(--sans)!important;font-weight:600!important;box-shadow:none!important;letter-spacing:0!important}
.btn--c{background:var(--or)!important;border-color:var(--or)!important;color:#fff!important}
.btn--c:hover{background:var(--or-h)!important;border-color:var(--or-h)!important}
.btn--p{background:var(--g800)!important;border-color:var(--g800)!important;color:#fff!important}
.btn--p:hover{background:var(--g700)!important}
.btn--g{background:#fff!important;border:1.5px solid var(--g800)!important;color:var(--g800)!important}
.btn--sm{min-height:38px}

/* ---------- surfaces: white cards, soft shadow, one radius ---------- */
.box,.lc,.pv,.pl,.empty,.sv,.fee,.cty,.hw,.lc-guide,.lc-tw,.lc-hd__row,.lc-hd__ask,.lc-ht__i,.frm,.lc-hc{
  border-radius:var(--r2,10px)!important;border-color:var(--rule)!important}
.box,.lc,.pv,.pl,.empty,.sv,.fee,.cty,.lc-guide,.lc-hd__row,.lc-hc{background:var(--card)!important;box-shadow:var(--sh1)!important}
.lc:hover,.pv:hover,.sv:hover,.lc-guide:hover,a.cty:hover{border-color:var(--g700)!important;box-shadow:var(--sh2)!important}
.lc--top{border:1.5px solid var(--or)!important}
.lc__sp{background:var(--or)!important;font-family:var(--sans)!important;letter-spacing:.06em!important}

/* ---------- tags and chips ---------- */
.tg-s{border-radius:999px!important;font-family:var(--sans)!important;letter-spacing:.04em!important;font-size:10.5px!important;padding:3px 9px!important}
.tg-ok{background:#e3f1ea!important;color:var(--ok)!important;border-color:#bfe0cf!important}
.tg-24{background:var(--bg)!important;color:var(--ink2)!important;border-color:var(--rule)!important}
.tg-sp{background:var(--or)!important;color:#fff!important;border-color:var(--or)!important}

/* ---------- section heads ---------- */
.sh{border-color:var(--rule)!important}
.sh h2,.sh .dsp{color:var(--ink)!important}

/* ---------- the first band of a directory or guide page becomes a v2 hero ---------- */
.lc-doc main>.lc-band:first-child,.lc-doc main>section:first-child,.lc-doc main>.wrap:first-child{position:relative}
.lc-doc .crumbs,.lc-doc .bc{color:var(--ink3)!important}

/* ---------- forms ---------- */
.frm input,.frm select,.frm textarea,.box input,.box select,.box textarea{border-radius:var(--r1,6px)!important;border-color:var(--rule2)!important}
.frm input:focus,.frm select:focus,.frm textarea:focus,.box input:focus,.box select:focus,.box textarea:focus{border-color:var(--g700)!important;box-shadow:0 0 0 3px rgba(20,81,63,.15)!important;outline:0}

/* ---------- FAQ ---------- */
.faq details{border-color:var(--rule)!important;border-radius:var(--r2,10px)}
.faq summary{font-family:var(--sans)!important;font-weight:600}

/* ---------- mobile call bar ---------- */
.mbar{background:var(--g900)!important}
.mbar a:first-child{background:var(--or)!important;color:#fff!important}

/* ---------- the sample notice keeps its warning colour, but not the old red ---------- */
.lc-sample__bar{background:#7a2f12!important}

/* ---------- v1 header and footer are replaced by v2; never show both ---------- */
.elementor-location-header,.elementor-location-footer{display:none!important}

/* dark boxes stay dark: some v1 boxes set their own background inline */
.box[style*="--steel"],.box[style*="background"]{background:var(--g800)!important;border-color:var(--g800)!important;color:#d8e6df!important}
.box[style*="--steel"] p,.box[style*="background"] p{color:#b9cec5!important}
.box[style*="--steel"] h3,.box[style*="background"] h3{color:#fff!important}

/* form fields: one line of label text, then the field; equal heights in a row */
.frm label{display:block!important;font-size:13px!important;color:var(--ink2)!important}
.frm label>span{display:inline!important;color:var(--ink3)}
.frm label input,.frm label textarea,.frm label select{display:block;width:100%;margin-top:6px;background:#fff!important}
.frm input:not([type=checkbox]):not([type=radio]),.frm select{height:46px;padding:0 13px!important}
.frm__2{align-items:end}