/**
 * ClickSteel Patio Designer (client design port, rebranded).
 * Source: docs/client-provided-docs/clicksteel-design-and-build-your-patio (4).html
 * All selectors scoped under .ecml-dbs; brand token overrides at the end.
 */

.ecml-dbs{
    --steel-900:#20262e; --steel-700:#39424d; --steel-500:#66707c;
    --steel-200:#d5d9de; --steel-100:#eceef0; --paper:#f6f5f2; --card:#ffffff;
    --hivis:#f05a1e; --hivis-deep:#c9440f; --hivis-wash:#fdeee6;
    --ok:#1c7a4d; --docket:#fffdf6;
    --shadow:0 1px 2px rgba(32,38,46,.07),0 10px 30px rgba(32,38,46,.08);
    --r:10px;
    --fd:"Big Shoulders Display",system-ui,sans-serif;
    --fb:"Archivo",system-ui,sans-serif;
    --fm:"IBM Plex Mono",ui-monospace,monospace;
  }
.ecml-dbs.ecml-dbs *{box-sizing:border-box}
.ecml-dbs{font-family:var(--fb);color:var(--steel-900);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
.ecml-dbs.ecml-dbs .hero{
    background:
      repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 3px,transparent 3px 26px),
      linear-gradient(180deg,#232a33 0%,#1b2129 100%);
    color:#fff;padding:44px 0 0;position:relative;overflow:hidden;
  }
.ecml-dbs.ecml-dbs .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.05) 24px 26px);}
.ecml-dbs.ecml-dbs .hero-inner{max-width:1120px;margin:0 auto;padding:0 24px 40px;position:relative;z-index:1}
.ecml-dbs.ecml-dbs .brand{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.ecml-dbs.ecml-dbs .brand .mark{width:34px;height:30px;background:var(--hivis);clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%)}
.ecml-dbs.ecml-dbs .brand .bn{font-family:var(--fd);font-weight:800;font-size:24px;letter-spacing:1.5px;text-transform:uppercase}
.ecml-dbs.ecml-dbs .eyebrow{font-family:var(--fm);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--hivis);margin:0 0 10px}
.ecml-dbs.ecml-dbs .hero h1{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(44px,7vw,84px);line-height:.92;letter-spacing:.5px;margin:0 0 14px}
.ecml-dbs.ecml-dbs .hero h1 em{font-style:normal;color:var(--hivis)}
.ecml-dbs.ecml-dbs .hero p.lede{max-width:54ch;color:#c3c9d0;margin:0 0 6px;font-size:17px}
.ecml-dbs.ecml-dbs .hero .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;font-family:var(--fm);font-size:12px;color:#9aa3ad;letter-spacing:.4px}
.ecml-dbs.ecml-dbs .hero .meta span{display:flex;align-items:center;gap:8px}
.ecml-dbs.ecml-dbs .hero .meta i{width:7px;height:7px;background:var(--hivis);display:inline-block}
.ecml-dbs.ecml-dbs .shell{max-width:1120px;margin:-22px auto 90px;padding:0 24px;display:grid;grid-template-columns:1fr 350px;gap:26px;align-items:start;position:relative;z-index:2}
.ecml-dbs.ecml-dbs .rail{grid-column:1/-1;display:flex;gap:5px;margin-bottom:2px}
.ecml-dbs.ecml-dbs .rail .node{flex:1;border-top:4px solid var(--steel-200);padding-top:8px;font-family:var(--fm);font-size:11px;letter-spacing:.5px;color:var(--steel-500);text-transform:uppercase;transition:.2s}
.ecml-dbs.ecml-dbs .rail .node.active{border-top-color:var(--hivis);color:var(--hivis-deep);font-weight:600}
.ecml-dbs.ecml-dbs .rail .node.done{border-top-color:var(--steel-700);color:var(--steel-700)}
.ecml-dbs.ecml-dbs .card{background:var(--card);border:1px solid var(--steel-200);border-radius:var(--r);box-shadow:var(--shadow);padding:34px}
.ecml-dbs.ecml-dbs .step{display:none;animation:rise .28s ease}
.ecml-dbs.ecml-dbs .step.on{display:block}

  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ecml-dbs.ecml-dbs .kicker{font-family:var(--fm);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--hivis-deep);margin:0 0 6px}
.ecml-dbs.ecml-dbs .step h2{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:34px;letter-spacing:.4px;margin:0 0 6px;line-height:1}
.ecml-dbs.ecml-dbs .hint{color:var(--steel-500);margin:0 0 26px;font-size:15px}
.ecml-dbs.ecml-dbs label.fl{display:block;font-weight:600;font-size:14px;margin:0 0 8px}
.ecml-dbs.ecml-dbs .req{color:var(--hivis-deep)}
.ecml-dbs.ecml-dbs .microhint{font-size:12.5px;color:var(--steel-500);margin-top:6px}
.ecml-dbs.ecml-dbs .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ecml-dbs.ecml-dbs .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ecml-dbs.ecml-dbs .field{margin:0 0 22px}
.ecml-dbs.ecml-dbs input[type=text], .ecml-dbs.ecml-dbs input[type=email], .ecml-dbs.ecml-dbs input[type=tel], .ecml-dbs.ecml-dbs input[type=number], .ecml-dbs.ecml-dbs select, .ecml-dbs.ecml-dbs textarea{
    width:100%;padding:12px 13px;border:1.5px solid var(--steel-200);border-radius:8px;
    font:inherit;font-size:15px;color:var(--steel-900);background:#fff;transition:.15s;
  }
.ecml-dbs.ecml-dbs input:focus, .ecml-dbs.ecml-dbs select:focus, .ecml-dbs.ecml-dbs textarea:focus{outline:none;border-color:var(--hivis);box-shadow:0 0 0 3px var(--hivis-wash)}
.ecml-dbs.ecml-dbs .suffix{position:relative}
.ecml-dbs.ecml-dbs .suffix .u{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--steel-500);font-family:var(--fm);font-size:12px;pointer-events:none}
.ecml-dbs.ecml-dbs textarea{min-height:90px;resize:vertical}
.ecml-dbs.ecml-dbs .err{color:var(--hivis-deep);font-size:13px;margin-top:6px;display:none}
.ecml-dbs.ecml-dbs .field.invalid .err{display:block}
.ecml-dbs.ecml-dbs .field.invalid input, .ecml-dbs.ecml-dbs .field.invalid select{border-color:var(--hivis-deep)}
.ecml-dbs.ecml-dbs .tiles{display:grid;gap:14px}
.ecml-dbs.ecml-dbs .tiles.g2{grid-template-columns:1fr 1fr}
.ecml-dbs.ecml-dbs .tiles.g3{grid-template-columns:repeat(3,1fr)}
.ecml-dbs.ecml-dbs .tiles.g4{grid-template-columns:repeat(4,1fr)}
.ecml-dbs.ecml-dbs .tiles.g5{grid-template-columns:repeat(5,1fr)}
.ecml-dbs.ecml-dbs .tile{position:relative;border:1.5px solid var(--steel-200);border-radius:10px;padding:16px 12px 14px;cursor:pointer;background:#fff;transition:.15s;text-align:center}
.ecml-dbs.ecml-dbs .tile:hover{border-color:var(--hivis);transform:translateY(-2px)}
.ecml-dbs.ecml-dbs .tile input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.ecml-dbs.ecml-dbs .tile .art{width:100%;height:60px;display:block;margin:0 auto 10px}
.ecml-dbs.ecml-dbs .tile .tn{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:16px;display:block}
.ecml-dbs.ecml-dbs .tile .td{font-size:12px;color:var(--steel-500);display:block;margin-top:3px}
.ecml-dbs.ecml-dbs .tile.sel{border-color:var(--hivis);background:var(--hivis-wash);box-shadow:0 0 0 3px var(--hivis-wash)}
.ecml-dbs.ecml-dbs .tile.disabled{opacity:.45;pointer-events:none;filter:grayscale(1)}
.ecml-dbs.ecml-dbs .tile.disabled .td{color:var(--steel-500);font-weight:600}
.ecml-dbs.ecml-dbs .art path, .ecml-dbs.ecml-dbs .art line, .ecml-dbs.ecml-dbs .art polyline, .ecml-dbs.ecml-dbs .art polygon, .ecml-dbs.ecml-dbs .art rect, .ecml-dbs.ecml-dbs .art circle{stroke:var(--steel-700);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.ecml-dbs.ecml-dbs .art .fs{fill:var(--steel-100);stroke:var(--steel-700)}
.ecml-dbs.ecml-dbs .art .hz{fill:#dfe3e7;stroke:var(--steel-500)}
.ecml-dbs.ecml-dbs .tile.sel .art path, .ecml-dbs.ecml-dbs .tile.sel .art line, .ecml-dbs.ecml-dbs .tile.sel .art polyline, .ecml-dbs.ecml-dbs .tile.sel .art polygon, .ecml-dbs.ecml-dbs .tile.sel .art rect{stroke:var(--hivis-deep)}
.ecml-dbs.ecml-dbs .tile.sel .art .fs{fill:#fff;stroke:var(--hivis-deep)}
.ecml-dbs.ecml-dbs .subhead{font-family:var(--fd);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.8px;color:var(--steel-700);margin:28px 0 14px;display:flex;align-items:center;gap:10px}
.ecml-dbs.ecml-dbs .subhead::after{content:"";flex:1;height:1px;background:var(--steel-200)}
.ecml-dbs.ecml-dbs .note{display:flex;gap:10px;background:var(--hivis-wash);border:1px solid #f6cdb8;border-radius:8px;padding:12px 14px;font-size:13.5px;color:var(--hivis-deep);margin:0 0 20px}
.ecml-dbs.ecml-dbs .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.ecml-dbs.ecml-dbs .sw{position:relative;border:1.5px solid var(--steel-200);border-radius:8px;padding:7px;cursor:pointer;text-align:center;transition:.15s;background:#fff}
.ecml-dbs.ecml-dbs .sw:hover{border-color:var(--hivis)}
.ecml-dbs.ecml-dbs .sw.sel{border-color:var(--hivis);box-shadow:0 0 0 3px var(--hivis-wash)}
.ecml-dbs.ecml-dbs .sw .chip{height:32px;border-radius:5px;border:1px solid rgba(0,0,0,.14);margin-bottom:6px}
.ecml-dbs.ecml-dbs .sw .cn{font-size:10.5px;font-weight:600;color:var(--steel-700);line-height:1.25;display:block}
.ecml-dbs.ecml-dbs .sw input{position:absolute;opacity:0}
.ecml-dbs.ecml-dbs .comp-block{margin-bottom:26px}
.ecml-dbs.ecml-dbs .nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
.ecml-dbs.ecml-dbs .btn{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:8px;padding:14px 26px;cursor:pointer;border:1.5px solid transparent;transition:.15s;font-size:16px}
.ecml-dbs.ecml-dbs .btn-primary{background:var(--hivis);color:#fff}
.ecml-dbs.ecml-dbs .btn-primary:hover{background:var(--hivis-deep)}
.ecml-dbs.ecml-dbs .btn-ghost{background:#fff;border-color:var(--steel-200);color:var(--steel-700)}
.ecml-dbs.ecml-dbs .btn-ghost:hover{border-color:var(--steel-700)}
.ecml-dbs.ecml-dbs .btn[hidden]{display:none}
.ecml-dbs.ecml-dbs .btn:focus-visible{outline:3px solid var(--hivis-wash);outline-offset:2px}

  /* 3D preview */
.ecml-dbs.ecml-dbs .preview3d{background:linear-gradient(180deg,#e8ebee 0%,#dfe3e7 100%);border:1px solid var(--steel-200);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px;position:relative}
.ecml-dbs.ecml-dbs .preview3d canvas{display:block;width:100%;height:250px;cursor:grab;touch-action:none}
.ecml-dbs.ecml-dbs .preview3d canvas:active{cursor:grabbing}
.ecml-dbs.ecml-dbs .p3-head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;pointer-events:none}
.ecml-dbs.ecml-dbs .p3-head .pt{font-family:var(--fd);font-weight:800;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;color:var(--steel-700)}
.ecml-dbs.ecml-dbs .p3-head .ph{font-family:var(--fm);font-size:10px;color:var(--steel-500);letter-spacing:.4px}
.ecml-dbs.ecml-dbs .p3-dims{position:absolute;bottom:0;left:0;right:0;padding:8px 14px;font-family:var(--fm);font-size:11.5px;color:var(--steel-700);display:flex;justify-content:space-between;pointer-events:none}
.ecml-dbs.ecml-dbs .p3-dims em{font-style:normal;color:var(--steel-500)}
.ecml-dbs.ecml-dbs .preview3d.empty::after{content:"Enter your patio size to see it take shape";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fm);font-size:12px;color:var(--steel-500);background:rgba(236,238,240,.6);pointer-events:none;text-align:center;padding:0 30px}

  /* docket */
.ecml-dbs.ecml-dbs .docket{background:var(--docket);border:1px solid #e3ddca;border-radius:6px;box-shadow:var(--shadow);font-family:var(--fm);font-size:12.5px;overflow:hidden}
.ecml-dbs.ecml-dbs .docket::before{content:"";display:block;height:10px;background:repeating-linear-gradient(90deg,transparent 0 14px,#e3ddca 14px 18px,transparent 18px 32px)}
.ecml-dbs.ecml-dbs .d-head{padding:16px 18px 12px;border-bottom:2px solid var(--steel-900);display:flex;justify-content:space-between;align-items:baseline}
.ecml-dbs.ecml-dbs .d-head .dt{font-family:var(--fd);font-weight:800;font-size:21px;letter-spacing:1.5px;text-transform:uppercase;color:var(--steel-900)}
.ecml-dbs.ecml-dbs .d-head .dn{font-size:10.5px;color:var(--steel-500);letter-spacing:.5px}
.ecml-dbs.ecml-dbs .d-body{padding:14px 18px 18px;max-height:52vh;overflow:auto}
.ecml-dbs.ecml-dbs .d-sec{font-weight:600;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--hivis-deep);margin:14px 0 6px}
.ecml-dbs.ecml-dbs .d-sec:first-child{margin-top:0}
.ecml-dbs.ecml-dbs .d-row{display:flex;align-items:baseline;gap:6px;padding:3px 0;color:var(--steel-700)}
.ecml-dbs.ecml-dbs .d-row .k{white-space:nowrap}
.ecml-dbs.ecml-dbs .d-row .lead{flex:1;border-bottom:1.5px dotted #cfc8b2;transform:translateY(-3px)}
.ecml-dbs.ecml-dbs .d-row .v{white-space:nowrap;max-width:56%;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--steel-900)}
.ecml-dbs.ecml-dbs .d-row .v.empty{color:#b9b19a;font-weight:400}
.ecml-dbs.ecml-dbs .d-foot{border-top:1.5px dashed #d8d1bb;padding:12px 18px;display:flex;justify-content:space-between;align-items:center}
.ecml-dbs.ecml-dbs .d-foot .stamp{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:1px;color:var(--hivis-deep);border:2px solid var(--hivis-deep);border-radius:4px;padding:3px 9px;transform:rotate(-3deg);opacity:.85}
.ecml-dbs.ecml-dbs .d-foot .pct{font-size:11px;color:var(--steel-500)}
.ecml-dbs.ecml-dbs .done{text-align:center;padding:30px 0}
.ecml-dbs.ecml-dbs .done .tick{width:70px;height:70px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin:0 auto 18px}
.ecml-dbs.ecml-dbs .done h2{font-family:var(--fd);text-transform:uppercase;font-size:36px;margin:0 0 10px}
.ecml-dbs.ecml-dbs .done p{color:var(--steel-500);max-width:46ch;margin:0 auto}
.ecml-dbs.ecml-dbs #toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--steel-900);color:#fff;padding:12px 18px;border-radius:8px;font-size:14px;z-index:60;box-shadow:var(--shadow);opacity:0;transition:opacity .25s;pointer-events:none}
@media(max-width:960px){
  .ecml-dbs.ecml-dbs .shell{grid-template-columns:1fr}
  .ecml-dbs.ecml-dbs #sideCol{position:static!important;order:2}
  .ecml-dbs.ecml-dbs .rail .node{font-size:0;padding:0;height:0}
}
@media(max-width:640px){
  .ecml-dbs.ecml-dbs .card{padding:22px 18px}
  .ecml-dbs.ecml-dbs .grid2, .ecml-dbs.ecml-dbs .grid3{grid-template-columns:1fr}
  .ecml-dbs.ecml-dbs .tiles.g3, .ecml-dbs.ecml-dbs .tiles.g4, .ecml-dbs.ecml-dbs .tiles.g5{grid-template-columns:1fr 1fr}
  .ecml-dbs.ecml-dbs .step h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
  .ecml-dbs.ecml-dbs *{animation:none!important;transition:none!important}
  .ecml-dbs.ecml-dbs .tile:hover{transform:none}
}


/* ===== ClickSteel brand overrides (red/navy, Bebas + Montserrat) ===== */

.ecml-dbs.ecml-dbs {
    --hivis: #ff0c3a;
    --hivis-deep: #d90a31;
    --hivis-wash: #fdecf0;
    --steel-900: #011f30;
    --steel-700: #26414f;
    --fd: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
    --fb: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --fm: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Navy hero instead of the design's charcoal */
.ecml-dbs.ecml-dbs .hero {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 3px, transparent 3px 26px),
        linear-gradient(180deg, #0d3247 0%, #011f30 100%);
}

/* Bebas has a single weight: normalise the display font usage. The .step h2
   and .d-head .dt entries repeat the scope so this block outranks their
   0-3-x base rules — without them the base font-weight:800 wins and the
   browser renders faux-bold Bebas. */
.ecml-dbs.ecml-dbs .hero h1,
.ecml-dbs.ecml-dbs h2,
.ecml-dbs.ecml-dbs .step h2,
.ecml-dbs.ecml-dbs .bn,
.ecml-dbs.ecml-dbs .dt,
.ecml-dbs.ecml-dbs .d-head .dt {
    font-weight: 400;
    letter-spacing: 1px;
}

/* ===== Photo upload block (added; not part of the client design) ===== */

.ecml-dbs.ecml-dbs .upl { margin-top: 6px; }

.ecml-dbs.ecml-dbs .upl-drop {
    border: 2px dashed var(--steel-200);
    border-radius: var(--r);
    padding: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--steel-500);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ecml-dbs.ecml-dbs .upl-drop:hover { border-color: var(--hivis); background: var(--hivis-wash); }
.ecml-dbs.ecml-dbs .upl-drop input[type="file"] { display: none; }
.ecml-dbs.ecml-dbs .upl-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.ecml-dbs.ecml-dbs .upl-item { position: relative; width: 72px; }
.ecml-dbs.ecml-dbs .upl-item img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--steel-200); display: block; }
.ecml-dbs.ecml-dbs .upl-item button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--steel-900); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.ecml-dbs.ecml-dbs .upl-item button:hover { background: var(--hivis); }
.ecml-dbs.ecml-dbs .upl-err { color: var(--hivis-deep); font-size: 12px; margin-top: 6px; }


/* ===== Theme armor =====
   Shoptimizer/Elementor global styles reach into embedded content. Every
   selector in this file carries a doubled scope class for specificity, and
   the block below pins properties the design leaves at browser defaults. */

.ecml-dbs.ecml-dbs input,
.ecml-dbs.ecml-dbs select,
.ecml-dbs.ecml-dbs textarea {
    max-width: 100%;
    margin: 0;
    min-height: 0;
    height: auto;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}

.ecml-dbs.ecml-dbs button {
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

.ecml-dbs.ecml-dbs p {
    margin-top: 0;
}

.ecml-dbs.ecml-dbs label {
    margin: 0;
}

.ecml-dbs.ecml-dbs h1,
.ecml-dbs.ecml-dbs h2,
.ecml-dbs.ecml-dbs h3 {
    margin-top: 0;
    padding: 0;
    border: none;
}

.ecml-dbs.ecml-dbs a {
    text-decoration: none;
    box-shadow: none;
}

.ecml-dbs.ecml-dbs svg {
    max-width: none;
}

.ecml-dbs.ecml-dbs img,
.ecml-dbs.ecml-dbs canvas {
    max-width: 100%;
}

/* Fonts: the Elementor kit and Shoptimizer style h1-h3, p, label, the form
   controls and buttons directly, which outranks anything inherited from the
   scope root. Re-assert each role's stack with force (same treatment as the
   custom checkout). Mono roles come after the body roles: .kicker/.eyebrow
   are <p> elements and must win that tie. */

.ecml-dbs.ecml-dbs,
.ecml-dbs.ecml-dbs p,
.ecml-dbs.ecml-dbs label,
.ecml-dbs.ecml-dbs input,
.ecml-dbs.ecml-dbs select,
.ecml-dbs.ecml-dbs textarea,
.ecml-dbs.ecml-dbs button:not(.btn) {
    font-family: var(--fb) !important;
}

.ecml-dbs.ecml-dbs h1,
.ecml-dbs.ecml-dbs h2,
.ecml-dbs.ecml-dbs h3,
.ecml-dbs.ecml-dbs .btn {
    font-family: var(--fd) !important;
}

.ecml-dbs.ecml-dbs .kicker,
.ecml-dbs.ecml-dbs .eyebrow,
.ecml-dbs.ecml-dbs .hero .meta,
.ecml-dbs.ecml-dbs .rail .node,
.ecml-dbs.ecml-dbs .suffix .u,
.ecml-dbs.ecml-dbs .p3-head .ph,
.ecml-dbs.ecml-dbs .p3-dims,
.ecml-dbs.ecml-dbs .open-grid .oh,
.ecml-dbs.ecml-dbs .open-grid .na,
.ecml-dbs.ecml-dbs .docket {
    font-family: var(--fm) !important;
}

/* Headings rely on inherited colour, so a theme h1-h3 colour rule lands on
   them: force them back to the local cascade (hero h1 stays white, step h2
   stays ink). */

.ecml-dbs.ecml-dbs h1,
.ecml-dbs.ecml-dbs h2,
.ecml-dbs.ecml-dbs h3 {
    color: inherit !important;
}


/* Step rail footing: the design overlapped the shell 22px into the hero,
   relying on exact standalone geometry to keep the step labels below the
   dark edge. Inside a WP page that shifts a few px and the labels land
   half on the hero (dark on dark). Start the shell below the hero
   instead: the rail always sits on the paper background. */

.ecml-dbs.ecml-dbs .shell {
    margin-top: 18px;
}


/* Colour swatch chip: the design gives an empty inline <span> a height,
   which inline elements ignore (rendered as a thin border line, in the
   original file too). Block display makes the 32px chip real. */

.ecml-dbs.ecml-dbs .sw .chip {
    display: block;
}