/* ==================================================================
   DELTA — PRODUCT PAGE DESIGN SYSTEM
   Shared by every product detail page (nova-aluminium-mat.php,
   cushion-loop-mat.php, carpet-mat-super.php, ...).
   Upload to:  css/delta-product.css
   Link after style.css / responsive.css.

   Type   : Roboto only (300 display · 400 body · 500/700 UI)
   Colour : red #ed3237 · ink #14161a · white
   Prefix : .dp-  (delta product) — everything is scoped to .dp-page
   ================================================================== */

:root{
  --dp-red:#ed3237;
  --dp-red-dk:#c92329;
  --dp-ink:#14161a;
  --dp-ink-2:#1b1e23;
  --dp-body:#5c626c;
  --dp-muted:#9aa0a8;
  --dp-line:#e5e6e9;
  --dp-hair:#eff0f2;
  --dp-soft:#f6f6f7;
  --dp-header-h:70px;          /* site sticky-header height */
}

/* sticky needs a non-clipping ancestor */
.page-wrapper{ overflow:visible; }
html{ scroll-behavior:smooth; }

.dp-page{
  font-family:'Roboto', sans-serif;
  color:var(--dp-body);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
.dp-page *{ box-sizing:border-box; }
.dp-wrap{ max-width:1280px; margin:0 auto; padding:0 34px; }
.dp-wrap--narrow{ max-width:1100px; }

/* ------------------------------------------------------------------
   TYPE
------------------------------------------------------------------ */
.dp-page .dp-eyebrow{
  display:block; font-family:'Roboto',sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--dp-red); margin:0 0 18px;
}
.dp-page .dp-eyebrow--muted{ color:var(--dp-muted); }
.dp-page .dp-h1{
  font-family:'Roboto',sans-serif; font-weight:300; color:var(--dp-ink);
  font-size:clamp(32px,4.4vw,56px); line-height:1.08; letter-spacing:-.035em;
  margin:0; max-width:16ch;
}
.dp-page .dp-h2{
  font-family:'Roboto',sans-serif; font-weight:300; color:var(--dp-ink);
  font-size:clamp(26px,3.4vw,42px); line-height:1.12; letter-spacing:-.032em;
  margin:0; max-width:18ch;
}
.dp-page .dp-h3{
  font-family:'Roboto',sans-serif; font-weight:500; color:var(--dp-ink);
  font-size:19px; line-height:1.35; letter-spacing:-.012em; margin:0 0 9px;
}
.dp-page .dp-h1 em,
.dp-page .dp-h2 em{ font-style:normal; font-weight:700; color:var(--dp-red); }
.dp-page .dp-h1 .dot,
.dp-page .dp-h2 .dot{ color:var(--dp-red); }
.dp-rule{ display:block; width:54px; height:2px; background:var(--dp-red); margin:24px 0; }
.dp-body{ font-size:15.5px; line-height:1.8; margin:0 0 16px; max-width:52ch; }
.dp-body:last-child{ margin-bottom:0; }
.dp-lead{ font-size:16.5px; line-height:1.8; margin:0; max-width:56ch; }

/* on dark */
.dp-on-dark, .dp-on-dark .dp-body, .dp-on-dark .dp-lead{ color:rgba(255,255,255,.72); }
.dp-on-dark .dp-h1, .dp-on-dark .dp-h2, .dp-on-dark .dp-h3{ color:#fff; }
.dp-on-dark .dp-h1 em, .dp-on-dark .dp-h2 em{ color:#fff; font-weight:700; }

/* ------------------------------------------------------------------
   BREADCRUMB
------------------------------------------------------------------ */
.dp-crumbs{ border-bottom:1px solid var(--dp-line); }
.dp-page ul.dp-crumbs__list{ margin:0; padding:16px 0; font-size:11.5px; letter-spacing:.08em; }
.dp-page ul.dp-crumbs__list li{ display:inline-block; text-transform:uppercase; color:var(--dp-muted); }
.dp-page ul.dp-crumbs__list li + li:before{ content:"/"; margin:0 9px; color:#d4d6da; }
.dp-page ul.dp-crumbs__list a{ color:var(--dp-body); }
.dp-page ul.dp-crumbs__list a:hover{ color:var(--dp-red); }

/* ------------------------------------------------------------------
   HERO — split: full-bleed media + panel
   .dp-hero--light  → white/soft panel instead of charcoal
   .dp-hero--flip   → panel on the left, media on the right
------------------------------------------------------------------ */
.dp-hero{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(460px,72vh,720px); }
.dp-hero__media{ position:relative; background:var(--dp-soft) center/cover no-repeat; overflow:hidden; }
.dp-hero__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.dp-hero__caption{
  position:absolute; left:0; bottom:0; z-index:2; padding:16px 22px;
  font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.dp-hero__panel{
  background:var(--dp-ink); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(34px,4.6vw,74px);
}
.dp-hero--light .dp-hero__panel{ background:var(--dp-soft); }
.dp-hero--flip .dp-hero__media{ order:2; }
.dp-hero__foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-top:auto; padding-top:34px;
  font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.dp-hero--light .dp-hero__foot{ color:var(--dp-muted); }

/* 3-up hairline spec strip (used in every hero — keeps pages consistent) */
.dp-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,34px); margin-top:clamp(30px,4vw,56px); }
.dp-strip__i{ border-top:1px solid rgba(255,255,255,.22); padding-top:13px; }
.dp-hero--light .dp-strip__i, .dp-section .dp-strip__i{ border-top-color:var(--dp-line); }
.dp-strip__k{ display:block; font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:7px; }
.dp-hero--light .dp-strip__k, .dp-section .dp-strip__k{ color:var(--dp-muted); }
.dp-strip__v{ display:block; font-size:15px; font-weight:400; color:#fff; line-height:1.45; }
.dp-hero--light .dp-strip__v, .dp-section .dp-strip__v{ color:var(--dp-ink); }

/* ------------------------------------------------------------------
   SECTIONS
------------------------------------------------------------------ */
.dp-section{ padding:clamp(56px,7vw,96px) 0; }
.dp-section--soft{ background:var(--dp-soft); }
.dp-section--dark{ background:var(--dp-ink); }
.dp-sectionhead{ margin-bottom:clamp(28px,4vw,52px); }
.dp-sectionhead--split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:end; }

/* running footer, like a printed page */
.dp-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:clamp(30px,4vw,54px); padding-top:16px; border-top:1px solid var(--dp-hair);
  font-size:9.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--dp-muted);
}
.dp-foot b{ color:var(--dp-ink); }
.dp-section--dark .dp-foot{ border-top-color:rgba(255,255,255,.14); color:rgba(255,255,255,.42); }
.dp-section--dark .dp-foot b, .dp-section--dark .dp-foot .dp-foot__no{ color:#fff; }
.dp-foot__no{ color:var(--dp-ink); letter-spacing:.14em; }

/* ------------------------------------------------------------------
   ANATOMY — large image + numbered feature grid
------------------------------------------------------------------ */
.dp-anatomy__media{ position:relative; overflow:hidden; background:var(--dp-ink-2); border:1px solid rgba(255,255,255,.08); }
.dp-section:not(.dp-section--dark) .dp-anatomy__media{ background:var(--dp-soft); border-color:var(--dp-line); }
.dp-anatomy__media img{ display:block; width:100%; height:clamp(280px,44vw,600px); object-fit:cover; }
.dp-anatomy__cap{
  position:absolute; right:0; bottom:0; padding:14px 20px;
  font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.dp-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,38px); margin-top:clamp(28px,4vw,50px); }
.dp-feat{ border-top:1px solid rgba(255,255,255,.16); padding-top:18px; }
.dp-section:not(.dp-section--dark) .dp-feat{ border-top-color:var(--dp-line); }
.dp-feat__n{ display:block; font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--dp-red); margin-bottom:11px; }
.dp-feat h3{ font-size:15px; font-weight:500; letter-spacing:.01em; color:#fff; margin:0 0 7px; line-height:1.35; }
.dp-section:not(.dp-section--dark) .dp-feat h3{ color:var(--dp-ink); }
.dp-feat p{ font-size:13.5px; line-height:1.7; margin:0; color:rgba(255,255,255,.6); }
.dp-section:not(.dp-section--dark) .dp-feat p{ color:var(--dp-body); }

/* ------------------------------------------------------------------
   VARIANT CARDS (HD / LD, duty levels, formats)
------------------------------------------------------------------ */
.dp-variants{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,28px); }
.dp-variant{
  position:relative; background:#fff; border:1px solid var(--dp-line);
  border-left:4px solid #d7d9dd; padding:clamp(22px,2.6vw,34px);
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(18px,2.4vw,34px); align-items:start;
}
.dp-section--dark .dp-variant{ background:var(--dp-ink-2); border-color:rgba(255,255,255,.1); border-left-color:rgba(255,255,255,.22); }
.dp-variant--primary{ border-left-color:var(--dp-red); }
.dp-variant h3{ font-size:21px; font-weight:500; letter-spacing:-.018em; color:var(--dp-ink); margin:0 0 4px; line-height:1.25; }
.dp-section--dark .dp-variant h3{ color:#fff; }
.dp-variant h3 em{ font-style:normal; font-weight:700; color:var(--dp-red); }
.dp-variant__sub{ font-size:13px; line-height:1.6; margin:0 0 14px; }
.dp-chip{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 11px; border-radius:3px; background:var(--dp-red); color:#fff;
}
.dp-chip--mute{ background:#eceef0; color:var(--dp-ink); }
.dp-section--dark .dp-chip--mute{ background:rgba(255,255,255,.12); color:#fff; }
.dp-variant__specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dp-variant__specs div{ border-top:1px solid var(--dp-line); padding-top:11px; }
.dp-section--dark .dp-variant__specs div{ border-top-color:rgba(255,255,255,.16); }
.dp-variant__specs span{ display:block; font-size:9px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--dp-muted); margin-bottom:5px; }
.dp-variant__specs b{ display:block; font-size:13.5px; font-weight:400; color:var(--dp-ink); line-height:1.45; }
.dp-section--dark .dp-variant__specs b{ color:#fff; }

/* ------------------------------------------------------------------
   COLOUR SWATCHES
------------------------------------------------------------------ */
.dp-swatches{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.6vw,22px); }
.dp-swatch__tile{
  position:relative; overflow:hidden; border-radius:3px;
  height:clamp(150px,15vw,215px); background:#d9dbde center/cover no-repeat;
  border:1px solid rgba(20,22,26,.08);
}
.dp-swatch__tile img{ display:block; width:100%; height:100%; object-fit:cover; }
.dp-swatch__meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:12px; padding-top:11px; border-top:1px solid var(--dp-line);
}
.dp-swatch__name{ font-size:13.5px; font-weight:500; color:var(--dp-ink); }
.dp-swatch__code{ font-size:11px; font-weight:400; letter-spacing:.08em; color:var(--dp-muted); }

/* ------------------------------------------------------------------
   METRIC CARDS
------------------------------------------------------------------ */
.dp-metrics{ display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vw,16px); margin-top:clamp(24px,3vw,36px); }
.dp-metric{ background:#fff; border:1px solid var(--dp-line); padding:18px 22px; min-width:128px; }
.dp-metric b{ font-size:28px; font-weight:700; letter-spacing:-.03em; color:var(--dp-ink); line-height:1; }
.dp-metric i{ font-style:normal; font-size:12px; font-weight:500; color:var(--dp-muted); margin-left:4px; }
.dp-metric span{ display:block; margin-top:9px; font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--dp-muted); }

/* ------------------------------------------------------------------
   SPECIFICATION PANEL (dark card)
------------------------------------------------------------------ */
.dp-specpanel{ background:var(--dp-ink); padding:clamp(28px,3.4vw,46px); }
.dp-specpanel .dp-eyebrow{ margin-bottom:22px; }
.dp-specgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,3vw,48px); }
.dp-specgrid div{ border-top:1px solid rgba(255,255,255,.16); padding:14px 0 15px; }
.dp-specgrid span{ display:block; font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:6px; }
.dp-specgrid b{ display:block; font-size:15px; font-weight:400; color:#fff; line-height:1.5; }
.dp-specpanel p{ font-size:13.5px; line-height:1.75; color:rgba(255,255,255,.6); margin:24px 0 0; }
.dp-specpanel p em{ font-style:normal; color:rgba(255,255,255,.38); }

/* light variant of the same panel */
.dp-specpanel--light{ background:var(--dp-soft); }
.dp-specpanel--light .dp-specgrid div{ border-top-color:var(--dp-line); }
.dp-specpanel--light .dp-specgrid span{ color:var(--dp-muted); }
.dp-specpanel--light .dp-specgrid b{ color:var(--dp-ink); }
.dp-specpanel--light p{ color:var(--dp-body); }

/* ------------------------------------------------------------------
   WHERE TO USE
------------------------------------------------------------------ */
.dp-apply{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--dp-line); }
.dp-apply__i{ padding:26px clamp(18px,2.4vw,34px) 26px 0; border-bottom:1px solid var(--dp-line); }
.dp-apply__i + .dp-apply__i{ padding-left:clamp(18px,2.4vw,34px); border-left:1px solid var(--dp-line); }
.dp-apply__n{ display:block; font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--dp-red); margin-bottom:12px; }
.dp-apply__i h3{ font-size:16px; font-weight:500; color:var(--dp-ink); margin:0 0 8px; line-height:1.35; }
.dp-apply__i p{ font-size:13.5px; line-height:1.7; margin:0; }
.dp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(24px,3vw,36px); }
.dp-tag{
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dp-ink); background:#fff; border:1px solid var(--dp-line);
  padding:9px 15px; border-radius:100px;
}

/* ------------------------------------------------------------------
   BUTTONS / ENQUIRY BAR
------------------------------------------------------------------ */
.dp-actions{ display:flex; flex-wrap:wrap; gap:11px; align-items:center; }
.dp-page a.dp-btn, .dp-page button.dp-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Roboto',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.03em; line-height:1;
  padding:15px 27px; border-radius:100px; cursor:pointer;
  border:1px solid transparent; transition:all .28s ease; text-transform:none;
}
.dp-page a.dp-btn--solid, .dp-page button.dp-btn--solid{ background:var(--dp-red); color:#fff; border-color:var(--dp-red); }
.dp-page a.dp-btn--solid:hover, .dp-page button.dp-btn--solid:hover{ background:var(--dp-ink); border-color:var(--dp-ink); color:#fff; }
.dp-page a.dp-btn--ghost, .dp-page button.dp-btn--ghost{ background:transparent; color:var(--dp-ink); border-color:#d6d8dc; }
.dp-page a.dp-btn--ghost:hover, .dp-page button.dp-btn--ghost:hover{ background:var(--dp-ink); border-color:var(--dp-ink); color:#fff; }
.dp-page button.dp-btn--added{ background:var(--dp-soft); color:var(--dp-ink); border-color:var(--dp-line); cursor:default; }
.dp-on-dark a.dp-btn--ghost, .dp-on-dark button.dp-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.3); }
.dp-on-dark a.dp-btn--ghost:hover, .dp-on-dark button.dp-btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--dp-ink); }
.dp-btn img{ width:15px; height:auto; display:inline-block; }
.dp-page input.dp-hidden{ display:none !important; }

.dp-enquiry{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.dp-enquiry .dp-h2{ max-width:20ch; }

/* ------------------------------------------------------------------
   REVEAL
------------------------------------------------------------------ */
.dp-reveal{ opacity:0; transform:translateY(18px); }
.dp-reveal.is-in{ opacity:1; transform:none; transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .dp-reveal{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------------ */
@media (max-width:1199px){
  .dp-feats{ grid-template-columns:repeat(2,1fr); }
  .dp-swatches{ grid-template-columns:repeat(3,1fr); }
  .dp-variant{ grid-template-columns:1fr; }
}
@media (max-width:991px){
  .dp-hero{ grid-template-columns:1fr; min-height:0; }
  .dp-hero__media{ height:clamp(260px,52vw,420px); order:-1; }
  .dp-hero--flip .dp-hero__media{ order:-1; }
  .dp-hero__panel{ padding:34px 24px 40px; }
  .dp-sectionhead--split{ grid-template-columns:1fr; gap:18px; }
  .dp-variants{ grid-template-columns:1fr; }
  .dp-apply{ grid-template-columns:1fr; }
  .dp-apply__i + .dp-apply__i{ padding-left:0; border-left:0; }
  .dp-apply__i{ padding-right:0; }
  .dp-enquiry{ display:block; }
  .dp-enquiry .dp-actions{ margin-top:26px; }
}
@media (max-width:600px){
  .dp-wrap{ padding:0 20px; }
  .dp-strip{ grid-template-columns:1fr; gap:0; }
  .dp-strip__i{ padding:12px 0 0; }
  .dp-strip__i + .dp-strip__i{ margin-top:12px; }
  .dp-feats{ grid-template-columns:1fr; gap:0; }
  .dp-feat{ padding:16px 0; }
  .dp-swatches{ grid-template-columns:repeat(2,1fr); }
  .dp-specgrid{ grid-template-columns:1fr; }
  .dp-variant__specs{ grid-template-columns:1fr; gap:0; }
  .dp-variant__specs div{ padding:10px 0; }
  .dp-page a.dp-btn, .dp-page button.dp-btn{ width:100%; justify-content:center; }
  .dp-foot{ font-size:8.5px; letter-spacing:.16em; }
}