/* ============================================================================
   DIY Off Road — Design System  (engineering-blueprint)
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for the brand's visual language. Grounded in the
   product itself: precision DXF/CAD cut files for race-truck fabrication.
   The look is a technical drawing — deep CAD-navy, faint graph grid, corner
   registration ticks, condensed Oswald headings, monospaced "// " CAD-layer
   labels, hairline rules, and the site's brand blue (#1979c3).

   HOW TO USE
   - Consume the CSS custom properties below (var(--diy-*)) instead of hardcoding
     colors, fonts, or spacing. New components should never invent a new blue.
   - Reusable building blocks live here: .diy-section, .diy-section__title,
     .diy-eyebrow, .diy-rule, .diy-panel--blueprint, .diy-datalist.
   - Full written guideline + do/don't: app/design/frontend/Hos/diy/DESIGN-SYSTEM.md
   - Loaded site-wide via Jadog_StructuredData/view/frontend/layout/default.xml
     (theme layout files do not merge on this install — module-loaded by design).
   ========================================================================== */

@font-face {
    font-family: 'Oswald DIY';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/oswald/oswald-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Oswald DIY';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/oswald/oswald-600.woff2') format('woff2');
}

:root {
    /* ── Ink / dark surfaces (the "blueprint sheet") ──────────────────────── */
    --diy-ink:        #0a1326;            /* deep CAD-navy (footer, spec band) */
    --diy-ink-2:      #0f1d38;            /* lifted navy for nested panels      */
    --diy-grid:       rgba(122,162,224,.13);   /* graph-paper grid lines on ink */
    --diy-ink-edge:   rgba(122,162,224,.22);   /* hairline border on ink        */

    /* ── Brand blues (do not introduce new blues) ────────────────────────── */
    --diy-brand:      #1979c3;            /* primary brand blue = Add-to-Cart   */
    --diy-brand-deep: #006bb4;            /* gradient end / pressed             */
    --diy-bright:     #4da3e0;            /* bright accent (hover, on-ink links)*/
    --diy-navy:       #00008b;            /* legacy @diy_blue (existing H1-H5)  */

    /* ── Light surfaces (most of the site / PDP body) ────────────────────── */
    --diy-paper:      #ffffff;
    --diy-paper-2:    #f6f8fc;            /* faint blueprint-paper tint         */
    --diy-hair:       #e3e8f0;            /* hairline rule on light             */
    --diy-hair-2:     #cdd6e4;            /* stronger hairline                  */

    /* ── Text ────────────────────────────────────────────────────────────── */
    --diy-text:       #1b2436;            /* body / headings on light           */
    --diy-muted:      #5b6678;            /* secondary text, labels             */
    --diy-faint:      #8a93a6;            /* captions, meta                     */
    --diy-on-ink:     #aeb9cf;            /* body text on ink                   */
    --diy-on-ink-head:#f3f6fc;            /* headings on ink                    */
    --diy-on-ink-mono:#748bb0;            /* mono labels on ink                 */

    /* ── Typography roles ────────────────────────────────────────────────── */
    --diy-font-display: 'Oswald DIY', 'Arial Narrow', sans-serif; /* condensed, UPPERCASE, tracked */
    --diy-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* eyebrows + data */
    --diy-font-body:    inherit;          /* theme base (Arial/Helvetica)       */

    /* ── Spacing rhythm (4px base) ───────────────────────────────────────── */
    --diy-space-1: 4px;  --diy-space-2: 8px;  --diy-space-3: 12px;
    --diy-space-4: 16px; --diy-space-5: 24px; --diy-space-6: 32px;
    --diy-space-7: 48px;
    --diy-section-gap: 44px;              /* vertical gap between PDP sections   */

    /* ── Shape ───────────────────────────────────────────────────────────── */
    --diy-radius:    6px;                 /* cards / panels (kept tight)        */
    --diy-radius-sm: 4px;
    --diy-tick:      var(--diy-brand);    /* registration-tick color            */
}

/* ============================================================================
   COMPONENTS
   ========================================================================== */

/* ── Eyebrow — monospaced "// CAD-layer" kicker ───────────────────────────── */
.diy-eyebrow {
    font-family: var(--diy-font-mono);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--diy-brand); font-weight: 400;
}
.diy-eyebrow::before { content: "// "; }

/* ── Hairline rule ────────────────────────────────────────────────────────── */
.diy-rule { border: 0; border-top: 1px solid var(--diy-hair); margin: var(--diy-space-5) 0; }

/* ── Section — the unified "engineering sheet" rhythm ─────────────────────── */
.diy-section { margin: 0 0 var(--diy-section-gap); }
.diy-section__title {
    font-family: var(--diy-font-display);
    font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    font-size: 21px; line-height: 1.1; color: var(--diy-text);
    margin: 0 0 var(--diy-space-5); padding: 0 0 var(--diy-space-3);
    border-bottom: 1px solid var(--diy-hair);
}
.diy-section__title::before {
    content: "// ";
    font-family: var(--diy-font-mono); font-weight: 400;
    font-size: .82em; color: var(--diy-brand); letter-spacing: 0;
}

/* ── Blueprint panel — the one dark "spec band" moment ────────────────────── */
.diy-panel--blueprint {
    position: relative; overflow: hidden;
    border-radius: var(--diy-radius);
    border: 1px solid var(--diy-ink-edge);
    background-color: var(--diy-ink);
    background-image:
        linear-gradient(var(--diy-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--diy-grid) 1px, transparent 1px);
    background-size: 26px 26px;
    color: var(--diy-on-ink);
    padding: 28px 30px;
    -webkit-font-smoothing: antialiased;
}
/* corner registration ticks — technical-drawing frame */
.diy-panel--blueprint::before,
.diy-panel--blueprint::after {
    content: ""; position: absolute; top: 14px;
    width: 12px; height: 12px; border: 2px solid var(--diy-brand); opacity: .85;
}
.diy-panel--blueprint::before { left: 14px;  border-right: 0; border-bottom: 0; }
.diy-panel--blueprint::after  { right: 14px; border-left: 0;  border-bottom: 0; }
.diy-panel--blueprint .diy-section__title { color: var(--diy-on-ink-head); border-bottom-color: var(--diy-ink-edge); }

/* ── Data list — label/value rows (specs, meta) ───────────────────────────── */
.diy-datalist { width: 100%; border-collapse: collapse; margin: 0; }
.diy-datalist th, .diy-datalist td {
    text-align: left; padding: 11px 4px; font-size: 14px; line-height: 1.4;
    vertical-align: top; border-bottom: 1px solid var(--diy-hair);
}
.diy-datalist th {
    width: 38%; font-family: var(--diy-font-mono); font-weight: 400;
    font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--diy-muted); white-space: nowrap; padding-top: 13px;
}
.diy-datalist td { color: var(--diy-text); font-weight: 600; }
.diy-datalist tr:last-child th, .diy-datalist tr:last-child td { border-bottom: 0; }
/* on the blueprint panel */
.diy-panel--blueprint .diy-datalist th { color: var(--diy-on-ink-mono); }
.diy-panel--blueprint .diy-datalist td { color: var(--diy-on-ink-head); }
.diy-panel--blueprint .diy-datalist th,
.diy-panel--blueprint .diy-datalist td { border-bottom-color: var(--diy-ink-edge); }

@media (max-width: 480px) {
    .diy-section__title { font-size: 19px; }
    .diy-panel--blueprint { padding: 24px 20px; }
    .diy-datalist th { width: 44%; white-space: normal; }
}