.elementor-2489 .elementor-element.elementor-element-7c4bc52{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2489 .elementor-element.elementor-element-1d0860f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2489 .elementor-element.elementor-element-6c96e43{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2489 .elementor-element.elementor-element-c444fe3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2489 .elementor-element.elementor-element-ab86c17{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2489 .elementor-element.elementor-element-4c1f374{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2489 .elementor-element.elementor-element-20f0e5f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-af8fb34 *//* ============================================================
   PERTH DOUBLE GLAZING — Colours Page CSS
   Generated: 24 July 2026
   Paste into: WordPress → Elementor → Site Settings → Custom CSS
               (or Page Settings → Custom CSS if you prefer it
                to load on the Colours page only)

   ⚠ SCOPING NOTE — READ THIS FIRST
   Every rule below is scoped under ".pdg-colours". Nothing here
   can touch the rest of the site. That is deliberate: this is a
   PAGE component stylesheet, not a site-wide theme reset. It does
   NOT restyle your existing buttons, forms, nav menu or headings
   anywhere else, and it does NOT lock any Elementor Style-tab
   colours on your existing widgets.

   The only unscoped rules are:
     - the Google Fonts @import (section 0)
     - the :root design tokens (all prefixed --pdg-, no collisions)
     - html{scroll-behavior} (section 2 — safe to delete)
     - the .pdg-widget helper (section 12)

   ⚠ EVERY CLASS NAME IS PREFIXED pdg- ON PURPOSE
   .pdg-btn, .pdg-wrap, .pdg-chip, .pdg-tag and so on. It looks
   verbose, and it is there for a reason: scoping a SELECTOR does
   not save you when the class NAME collides. If your theme has
      .btn{background:#ff0 !important}
   it beats  .pdg-colours .btn-red{...}  and the buttons come out
   the theme's colour. Prefixed names cannot collide at all.
   If you rename a class here, rename it in the HTML block too —
   and in the filter script inside Block 3.

   SECTIONS
     0.  Font import
     1.  Design tokens (:root)          ← swatch image URLs live here
     2.  Scoped base
     3.  Layout wrap
     4.  Buttons
     5.  Hero + trust strip
     6.  Section shells
     7.  Intro / answer-first
     8.  Filter chips + swatch grid
     9.  Choosing guide
     10. Spec table
     11. FAQ accordion
     12. CTA band + Elementor widget helper
     13. Responsive
   ============================================================ */


/* ============================================================
   0. FONT IMPORT
   Mulish is already the live site's body font, so this may be
   redundant. Harmless either way. Delete if your theme already
   loads Mulish (check with DevTools → Network → Font).
   MUST stay as the very first line of the Custom CSS box.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700;800;900&display=swap');


/* ============================================================
   1. DESIGN TOKENS
   All prefixed --pdg- so they cannot collide with your theme
   or with Elementor's own variables.
   ============================================================ */
:root{
  /* --- Brand colours (scraped from perthdoubleglazing.com.au) --- */
  --pdg-navy:        #1F3789;
  --pdg-navy-2:      #182c6e;   /* hover / gradient mid */
  --pdg-navy-3:      #12225a;   /* gradient deep */
  --pdg-red:         #E31837;
  --pdg-red-dark:    #c1122c;   /* red button hover, ~12% darker */
  --pdg-ink:         #22262b;   /* headings */
  --pdg-charcoal:    #373C40;   /* body copy */
  --pdg-muted:       #5c636b;   /* secondary copy */
  --pdg-line:        #e4e6ea;   /* borders */
  --pdg-bg:          #ffffff;
  --pdg-bg-soft:     #f3f4f6;   /* alternating section background */

  /* --- Shape & depth --- */
  --pdg-radius:      14px;
  --pdg-shadow:      0 10px 30px rgba(18,34,90,.10);
  --pdg-shadow-lg:   0 20px 50px rgba(18,34,90,.16);

  /* --- Type --- */
  --pdg-font: 'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* --- Hero photo (already on your server, no upload needed) --- */
  --pdg-hero-photo: url('https://perthdoubleglazing.com.au/wp-content/uploads/2025/12/windows-edit-1765935052946-1024x765.jpg');

  /* ==========================================================
     ⚠ PLACEHOLDER — SWATCH IMAGE URLS — EDIT THESE 13 LINES
     ==========================================================
     1. Upload the 13 JPGs from pdg-colour-swatches.zip to
        Media Library (Media → Add New → drag the whole folder).
     2. Click any one of them, copy the "File URL" field.
     3. Replace the /2026/07/ date folder below with whatever
        your URL shows — then all 13 lines are correct.

     ⚠ If a file of the same name already exists in your Media
       Library, WordPress silently appends -1 (e.g.
       pdg-colour-white-1.jpg). Check one URL before trusting
       the pattern. If the swatches come up blank, this is why.
     ========================================================== */
  --pdg-img-white:       url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-white.jpg');
  --pdg-img-cream:       url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-cream.jpg');
  --pdg-img-lightgrey:   url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-light-grey.jpg');
  --pdg-img-signalgrey:  url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-signal-grey.jpg');
  --pdg-img-basaltgrey:  url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-basalt-grey.jpg');
  --pdg-img-slategrey:   url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-slate-grey.jpg');
  --pdg-img-anthracite:  url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-anthracite-grey.jpg');
  --pdg-img-kitami:      url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-mattex-kitami-dark.jpg');
  --pdg-img-smoothblack: url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-smooth-black.jpg');
  --pdg-img-ceylon:      url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-ceylon.jpg');
  --pdg-img-goldenoak:   url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-golden-oak.jpg');
  --pdg-img-toffee:      url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-woodec-turner-oak-toffee.jpg');
  --pdg-img-malt:        url('https://perthdoubleglazing.com.au/wp-content/uploads/2026/07/pdg-colour-woodec-turner-oak-malt.jpg');
}


/* ============================================================
   2. SCOPED BASE
   Replaces the demo's global reset. Applies only inside
   .pdg-colours, so your theme's own resets are untouched.
   ============================================================ */

/* Smooth scroll for the on-page anchor links (#quote, #faq).
   This is the ONE global rule in this file. Safe to delete if
   your theme already sets it or you don't want it. */
html{scroll-behavior:smooth}

.pdg-colours,
.pdg-colours *,
.pdg-colours *::before,
.pdg-colours *::after{box-sizing:border-box}

.pdg-colours *{margin:0;padding:0;border:0}

.pdg-colours{
  font-family:var(--pdg-font);
  color:var(--pdg-ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ⚠ The !important below is deliberate. Do not remove it.
   A theme rule like  h2{font-family:Georgia}  is an ELEMENT
   .elementor-2489 .elementor-element.elementor-element-af8fb34, and an element .elementor-2489 .elementor-element.elementor-element-af8fb34 beats inheritance — inherited
   values only apply when no rule matches the element at all.
   So setting the font on .pdg-colours alone is not enough: every
   heading inside would still render in the theme's font.

   This is safe. It only reaches elements inside .pdg-colours,
   i.e. the HTML you pasted into the HTML widgets. It never touches
   an Elementor widget whose Style tab you'd want to keep control
   of, and it never leaves this section. */
.pdg-colours,
.pdg-colours *{font-family:var(--pdg-font) !important}

.pdg-colours img{max-width:100%;display:block}
.pdg-colours a{color:inherit;text-decoration:none}
.pdg-colours ul{list-style:none}


/* ============================================================
   3. LAYOUT WRAP
   Reproduces the demo's 1200px centred column.
   ⚠ Set each Elementor container holding these HTML widgets to
     Content Width: Full Width, and padding 0 — otherwise you get
     double gutters and the coloured hero/CTA backgrounds will not
     reach the edge of the screen.
   ============================================================ */
.pdg-colours .pdg-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}


/* ============================================================
   4. BUTTONS
   Scoped — does NOT affect .elementor-button anywhere on the site.
   Hover colours come from tokens, never hardcoded.
   ============================================================ */
.pdg-colours .pdg-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:800;font-size:15px;letter-spacing:.2px;line-height:1;
  padding:14px 26px;border-radius:999px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.pdg-colours .pdg-btn svg{width:17px;height:17px}

/* Primary — red, used for the main conversion action */
.pdg-colours .pdg-btn-red{background:var(--pdg-red);color:#fff;box-shadow:0 8px 20px rgba(227,24,55,.28)}
.pdg-colours .pdg-btn-red:hover{background:var(--pdg-red-dark);transform:translateY(-2px)}

/* Ghost — for use on the navy hero / CTA backgrounds */
.pdg-colours .pdg-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.pdg-colours .pdg-btn-ghost:hover{background:#fff;color:var(--pdg-navy);border-color:#fff;transform:translateY(-2px)}

/* Navy solid + navy outline — spares, used if you add more CTAs */
.pdg-colours .pdg-btn-navy{background:var(--pdg-navy);color:#fff}
.pdg-colours .pdg-btn-navy:hover{background:var(--pdg-navy-2);transform:translateY(-2px)}
.pdg-colours .pdg-btn-outline{background:#fff;color:var(--pdg-navy);border-color:var(--pdg-navy)}
.pdg-colours .pdg-btn-outline:hover{background:var(--pdg-navy);color:#fff}


/* ============================================================
   5. HERO + TRUST STRIP
   ============================================================ */
.pdg-colours .pdg-hero{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,var(--pdg-navy-3) 0%,var(--pdg-navy) 55%,var(--pdg-navy-2) 100%);
}
.pdg-colours .pdg-hero::after{
  content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 62%);pointer-events:none;
}
.pdg-colours .pdg-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  padding:64px 24px 70px;
}
.pdg-colours .pdg-crumbs{font-size:13px;color:rgba(255,255,255,.72);font-weight:600;margin-bottom:18px;letter-spacing:.3px}
.pdg-colours .pdg-crumbs a:hover{color:#fff}
.pdg-colours .pdg-eyebrow{
  display:inline-block;font-size:13px;font-weight:800;letter-spacing:2.5px;
  text-transform:uppercase;color:#9fb3ff;margin-bottom:14px;
}
/* colour:#fff is stated explicitly, not inherited from .pdg-hero.
   A theme rule like  h1{color:#900}  would otherwise win and put a
   dark headline on the navy hero. Same reason on .pdg-cta h2. */
.pdg-colours .pdg-hero h1{font-size:clamp(34px,4.4vw,52px);line-height:1.08;font-weight:900;letter-spacing:-.5px;margin-bottom:18px;color:#fff}
.pdg-colours .pdg-hero h1 em{color:#ff6b81;font-style:normal}
.pdg-colours .pdg-hero .pdg-lead{font-size:18px;color:rgba(255,255,255,.9);max-width:560px;margin-bottom:28px}
.pdg-colours .pdg-hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.pdg-colours .pdg-hero-photo{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--pdg-shadow-lg);border:1px solid rgba(255,255,255,.12);
  background-color:#0e1c4d;
  background-image:var(--pdg-hero-photo);
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.pdg-colours .pdg-hero-tag{
  position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.95);
  color:var(--pdg-navy);font-weight:800;font-size:13px;padding:9px 14px;
  border-radius:10px;box-shadow:var(--pdg-shadow);
}

/* Trust strip along the bottom of the hero */
.pdg-colours .pdg-trust{border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.10)}
.pdg-colours .pdg-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 24px}
.pdg-colours .pdg-trust-row .pdg-ti{display:flex;align-items:center;gap:12px;color:#fff}
.pdg-colours .pdg-trust-row .pdg-ti b{display:block;font-size:20px;font-weight:900;line-height:1;color:#fff}
.pdg-colours .pdg-trust-row .pdg-ti small{font-size:12.5px;color:rgba(255,255,255,.72);font-weight:600}
.pdg-colours .pdg-trust-row .pdg-ti .pdg-ic{flex:0 0 40px;height:40px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.pdg-colours .pdg-trust-row .pdg-ti .pdg-ic svg{width:20px;height:20px;stroke:#9fb3ff}


/* ============================================================
   6. SECTION SHELLS
   ============================================================ */
.pdg-colours section{padding:64px 0}
.pdg-colours .pdg-section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.pdg-colours .pdg-section-head .pdg-eyebrow{color:var(--pdg-red)}
.pdg-colours .pdg-section-head h2{
  font-size:clamp(27px,3vw,38px);font-weight:900;letter-spacing:-.4px;
  color:var(--pdg-ink);margin-bottom:12px;line-height:1.12;
}
.pdg-colours .pdg-section-head p{color:var(--pdg-muted);font-size:17px}

/* Soft-grey alternating background */
.pdg-colours .pdg-bg-soft{background:var(--pdg-bg-soft)}


/* ============================================================
   7. INTRO / ANSWER-FIRST BLOCK
   ============================================================ */
.pdg-colours .pdg-intro-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:start}
.pdg-colours .pdg-answer p{font-size:18px;color:var(--pdg-charcoal);margin-bottom:16px}
.pdg-colours .pdg-answer p:first-child{font-size:20px;color:var(--pdg-ink);font-weight:600}
.pdg-colours .pdg-answer strong{color:var(--pdg-navy)}

/* Key Takeaway callout — the AI-extraction summary box */
.pdg-colours .pdg-takeaway{
  background:#fff;border:1px solid var(--pdg-line);border-left:5px solid var(--pdg-red);
  border-radius:12px;padding:22px 24px;box-shadow:var(--pdg-shadow);
}
.pdg-colours .pdg-takeaway h4{
  font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--pdg-red);margin-bottom:10px;font-weight:800;
}
.pdg-colours .pdg-takeaway p{font-size:15.5px;color:var(--pdg-charcoal)}


/* ============================================================
   8. FILTER CHIPS + SWATCH GRID
   ============================================================ */
.pdg-colours .pdg-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
.pdg-colours .pdg-chip{
  border:1.5px solid var(--pdg-line);background:#fff;color:var(--pdg-charcoal);
  font-family:var(--pdg-font);font-weight:700;font-size:14px;
  padding:10px 20px;border-radius:999px;cursor:pointer;transition:all .15s;
}
.pdg-colours .pdg-chip:hover{border-color:var(--pdg-navy);color:var(--pdg-navy)}
.pdg-colours .pdg-chip.pdg-active{background:var(--pdg-navy);border-color:var(--pdg-navy);color:#fff;box-shadow:0 8px 18px rgba(31,55,137,.25)}
.pdg-colours .pdg-chip small{opacity:.7;font-weight:700}

/* Group heading rows inside the grid */
.pdg-colours .pdg-group-label{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin:14px 0 2px}
.pdg-colours .pdg-group-label h3{font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pdg-navy);font-weight:800;white-space:nowrap}
.pdg-colours .pdg-group-label span{height:1px;background:var(--pdg-line);flex:1}

/* The 4-up grid */
.pdg-colours .pdg-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pdg-colours .pdg-swatch{
  position:relative;border:1px solid var(--pdg-line);border-radius:var(--pdg-radius);
  overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(18,34,90,.05);
  transition:transform .18s ease,box-shadow .18s ease;
}
.pdg-colours .pdg-swatch:hover{transform:translateY(-5px);box-shadow:var(--pdg-shadow-lg)}

/* Colour tile — background image set per colour below */
.pdg-colours .pdg-chipcolor{
  height:150px;position:relative;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--pdg-bg-soft);
}
/* Subtle diagonal highlight so flat colours read as a surface */
.pdg-colours .pdg-chipcolor .pdg-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%);
}

/* --- The 13 swatch photos. URLs are set in section 1. --- */
.pdg-colours .pdg-cc-white{background-image:var(--pdg-img-white)}
.pdg-colours .pdg-cc-cream{background-image:var(--pdg-img-cream)}
.pdg-colours .pdg-cc-lightgrey{background-image:var(--pdg-img-lightgrey)}
.pdg-colours .pdg-cc-signalgrey{background-image:var(--pdg-img-signalgrey)}
.pdg-colours .pdg-cc-basaltgrey{background-image:var(--pdg-img-basaltgrey)}
.pdg-colours .pdg-cc-slategrey{background-image:var(--pdg-img-slategrey)}
.pdg-colours .pdg-cc-anthracite{background-image:var(--pdg-img-anthracite)}
.pdg-colours .pdg-cc-kitami{background-image:var(--pdg-img-kitami)}
.pdg-colours .pdg-cc-smoothblack{background-image:var(--pdg-img-smoothblack)}
.pdg-colours .pdg-cc-ceylon{background-image:var(--pdg-img-ceylon)}
.pdg-colours .pdg-cc-goldenoak{background-image:var(--pdg-img-goldenoak)}
.pdg-colours .pdg-cc-toffee{background-image:var(--pdg-img-toffee)}
.pdg-colours .pdg-cc-malt{background-image:var(--pdg-img-malt)}

/* Card text */
.pdg-colours .pdg-swatch .pdg-meta{padding:15px 16px 17px}
.pdg-colours .pdg-swatch .pdg-cname{font-weight:800;font-size:16.5px;color:var(--pdg-ink);line-height:1.2}
.pdg-colours .pdg-swatch .pdg-cdesc{font-size:13px;color:var(--pdg-muted);margin-top:5px;min-height:34px}

/* Finish tags */
.pdg-colours .pdg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.pdg-colours .pdg-tag{font-size:11px;font-weight:800;letter-spacing:.3px;padding:4px 9px;border-radius:6px;text-transform:uppercase}
.pdg-colours .pdg-tag.pdg-wood{background:#fbf1e6;color:#a5641f}
.pdg-colours .pdg-tag.pdg-matt{background:#eef0f2;color:#485058}
.pdg-colours .pdg-tag.pdg-smooth{background:#eef2ff;color:#3550c7}

/* "New" corner badge */
.pdg-colours .pdg-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--pdg-red);color:#fff;font-size:11px;font-weight:900;
  letter-spacing:.4px;text-transform:uppercase;padding:6px 11px;border-radius:7px;
  box-shadow:0 6px 14px rgba(227,24,55,.35);
}
.pdg-colours .pdg-badge.pdg-new{background:var(--pdg-navy);box-shadow:0 6px 14px rgba(31,55,137,.35)}

/* Legend under the grid */
.pdg-colours .pdg-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:34px;font-size:13.5px;color:var(--pdg-muted)}
.pdg-colours .pdg-legend b{color:var(--pdg-charcoal)}
.pdg-colours .pdg-legend .pdg-k{display:inline-flex;align-items:center;gap:7px}
.pdg-colours .pdg-legend .pdg-dot{width:13px;height:13px;border-radius:4px}


/* ============================================================
   9. CHOOSING GUIDE (3 cards)
   ============================================================ */
.pdg-colours .pdg-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pdg-colours .pdg-gcard{
  background:#fff;border:1px solid var(--pdg-line);border-radius:var(--pdg-radius);
  padding:26px 24px;box-shadow:0 4px 14px rgba(18,34,90,.05);
}
.pdg-colours .pdg-gcard .pdg-gic{width:46px;height:46px;border-radius:12px;background:var(--pdg-navy);display:grid;place-items:center;margin-bottom:16px}
.pdg-colours .pdg-gcard .pdg-gic svg{width:23px;height:23px;stroke:#fff}
.pdg-colours .pdg-gcard h3{font-size:19px;font-weight:800;margin-bottom:8px;color:var(--pdg-ink)}
.pdg-colours .pdg-gcard p{font-size:15px;color:var(--pdg-muted)}
.pdg-colours .pdg-gcard p strong{color:var(--pdg-navy)}


/* ============================================================
   10. SPEC TABLE
   ============================================================ */
.pdg-colours .pdg-spec-wrap{max-width:900px;margin:0 auto}
.pdg-colours table.pdg-spec{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--pdg-line);border-radius:var(--pdg-radius);
  overflow:hidden;box-shadow:var(--pdg-shadow);
}
/* background and colour are stated on BOTH th and td, not just th.
   Plenty of themes set  th,td{background:#f5f5f5}  — without an
   explicit value here that grey bleeds into the table. */
.pdg-colours table.pdg-spec th,
.pdg-colours table.pdg-spec td{
  text-align:left;padding:16px 22px;border-bottom:1px solid var(--pdg-line);
  font-size:15.5px;vertical-align:top;background:#fff;color:var(--pdg-charcoal);
}
.pdg-colours table.pdg-spec th{width:34%;background:var(--pdg-bg-soft);color:var(--pdg-navy);font-weight:800}
.pdg-colours table.pdg-spec tr:last-child th,
.pdg-colours table.pdg-spec tr:last-child td{border-bottom:0}
.pdg-colours table.pdg-spec td strong{color:var(--pdg-ink)}


/* ============================================================
   11. FAQ ACCORDION
   Native <details>/<summary> — no JavaScript needed.
   ============================================================ */
.pdg-colours details.pdg-q{
  background:#fff;border:1px solid var(--pdg-line);border-radius:12px;
  margin-bottom:14px;overflow:hidden;box-shadow:0 3px 10px rgba(18,34,90,.04);
}
.pdg-colours details.pdg-q summary{
  list-style:none;cursor:pointer;padding:20px 24px;
  font-weight:800;font-size:17px;color:var(--pdg-ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.pdg-colours details.pdg-q summary::-webkit-details-marker{display:none}

/* The + / × toggle. Fixed 26px circle; rotates 45° when open.
   flex/width/min-width are all pinned so a flex parent can't
   squash it into an oval. */
.pdg-colours details.pdg-q summary .pdg-plus{
  flex:0 0 26px;width:26px;min-width:26px;height:26px;box-sizing:border-box;
  border-radius:50%;background:var(--pdg-bg-soft);
  display:grid;place-items:center;
  color:var(--pdg-navy);font-weight:900;font-size:18px;line-height:1;
  transition:transform .2s;
}
.pdg-colours details.pdg-q[open] summary .pdg-plus{transform:rotate(45deg);background:var(--pdg-navy);color:#fff}
.pdg-colours details.pdg-q .pdg-a{padding:0 24px 22px;color:var(--pdg-charcoal);font-size:15.5px}
.pdg-colours .pdg-faq{max-width:860px;margin:0 auto}


/* ============================================================
   12. CTA BAND + ELEMENTOR WIDGET HELPER
   ============================================================ */
.pdg-colours .pdg-cta{
  background:linear-gradient(120deg,var(--pdg-navy-3),var(--pdg-navy) 70%);
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
.pdg-colours .pdg-cta::before{
  content:"";position:absolute;left:-100px;bottom:-140px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(227,24,55,.28),transparent 62%);
}
.pdg-colours .pdg-cta h2{font-size:clamp(28px,3.2vw,40px);font-weight:900;letter-spacing:-.4px;margin-bottom:14px;position:relative;color:#fff}
.pdg-colours .pdg-cta p{font-size:18px;color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 28px;position:relative}
.pdg-colours .pdg-cta .pdg-hero-cta{justify-content:center;position:relative}

/* --- Elementor helper ---
   Add the class "pdg-widget" to each HTML widget in
   Advanced → CSS Classes. This strips Elementor's default widget
   margin so the sections butt together exactly as in the demo.
   The .elementor-element prefix is required to beat Elementor's
   per-widget generated .elementor-2489 .elementor-element.elementor-element-af8fb34s. */
.elementor-element.pdg-widget > .elementor-widget-container{margin:0 !important;padding:0 !important}
.elementor-widget-html.pdg-widget{margin-bottom:0 !important}


/* ============================================================
   13. RESPONSIVE
   Breakpoints match the demo, not Elementor's defaults —
   they are content-driven (when the grid stops fitting).
   ============================================================ */

/* Tablet — 4-up grid drops to 3-up, side-by-side layouts stack */
@media(max-width:1000px){
  .pdg-colours .pdg-swatches{grid-template-columns:repeat(3,1fr)}
  .pdg-colours .pdg-hero-grid{grid-template-columns:1fr;gap:32px;padding:44px 24px 50px}
  .pdg-colours .pdg-hero-photo{max-width:480px}
  .pdg-colours .pdg-intro-grid{grid-template-columns:1fr;gap:24px}
  .pdg-colours .pdg-guide-grid{grid-template-columns:1fr;gap:16px}
}

/* Small tablet — trust strip goes 2-up */
@media(max-width:820px){
  .pdg-colours .pdg-trust-row{grid-template-columns:1fr 1fr;gap:18px}
}

/* Mobile — 2-up swatch grid, shorter tiles, tighter sections */
@media(max-width:600px){
  .pdg-colours .pdg-swatches{grid-template-columns:repeat(2,1fr);gap:14px}
  .pdg-colours .pdg-chipcolor{height:118px}
  .pdg-colours section{padding:48px 0}
  .pdg-colours .pdg-legend{gap:12px}
}

.pdg-colours .pdg-chip{
  background:#fff !important;
  border-color:var(--pdg-line) !important;
  color:var(--pdg-charcoal) !important;
}
.pdg-colours .pdg-chip:hover,
.pdg-colours .pdg-chip:focus,
.pdg-colours .pdg-chip:focus-visible,
.pdg-colours .pdg-chip:active{
  background:#fff !important;
  border-color:var(--pdg-navy) !important;
  color:var(--pdg-navy) !important;
}
.pdg-colours .pdg-chip.pdg-active,
.pdg-colours .pdg-chip.pdg-active:hover,
.pdg-colours .pdg-chip.pdg-active:focus,
.pdg-colours .pdg-chip.pdg-active:focus-visible,
.pdg-colours .pdg-chip.pdg-active:active{
  background:var(--pdg-navy) !important;
  border-color:var(--pdg-navy) !important;
  color:#fff !important;
}
.pdg-colours .pdg-chip:focus{outline:none !important}
.pdg-colours .pdg-chip:focus-visible{
  outline:3px solid rgba(31,55,137,.35) !important;
  outline-offset:2px !important;
}

/* ============================================================
   DESIGN SUMMARY
   ------------------------------------------------------------
   Token            Value      Used for
   ------------------------------------------------------------
   --pdg-navy       #1F3789    Headings accent, chips, hero,
                               CTA, group labels, spec table th
   --pdg-red        #E31837    Primary CTA buttons, eyebrows,
                               Key Takeaway rule, badges
   --pdg-ink        #22262b    H1–H3, colour names
   --pdg-charcoal   #373C40    Body copy, FAQ answers
   --pdg-muted      #5c636b    Descriptions, legend, card copy
   --pdg-bg-soft    #f3f4f6    Alternating section background
   --pdg-radius     14px       Cards, table, swatch tiles
   Font             Mulish     400/600/700/800/900
   Container        1200px     .pdg-wrap
   ------------------------------------------------------------
   Grid: 4-up desktop → 3-up ≤1000px → 2-up ≤600px
   Accordion: native <details>, no JS
   Filter chips: 12 lines of vanilla JS, inside the grid widget
   ============================================================ *//* End custom CSS */