/* ==========================================================================
   PEARL Products — shared header / mobile-menu / footer
   SINGLE SOURCE OF TRUTH for site header, mobile menu, and footer across
   every products.pearlorganisation.com page. Every rule here is scoped
   under header / footer / .mobile-menu so it can NEVER affect page body
   content (h1, .btn, .card, etc. on the page itself are untouched).
   ========================================================================== */
:root{
  --hp-brand:#3161E8;
  --hp-brand-dark:#1F44B0;
  --hp-brand-soft:#5F86EA;
  --hp-gold:#B7862E;
  --hp-ink:#101828;
  --hp-text:#344054;
  --hp-text-dim:#667085;
  --hp-text-faint:#98A2B3;
  --hp-paper:#FFFFFF;
  --hp-paper-alt:#F9FAFB;
  --hp-line:#E4E7EC;
  --hp-radius-sm:8px;
  --hp-mono:'IBM Plex Mono', ui-monospace, monospace;
  --hp-sans:'Inter', -apple-system, sans-serif;
  --hp-display:'Public Sans', 'Inter', -apple-system, sans-serif;
}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap{ padding:0 18px; } }

header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--hp-line); transition:box-shadow .2s ease, border-color .2s ease; }
header::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--hp-brand),#5B8DEF,var(--hp-gold)); opacity:0.9;}
header.is-scrolled{ box-shadow:0 1px 0 rgba(16,24,40,0.04), 0 4px 16px -8px rgba(16,24,40,0.12); }
header .nav-row{ display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px;}
header .brand, footer .brand{ display:flex; align-items:center; gap:10px; font-family:var(--hp-display); font-weight:800; font-size:1.12rem; color:var(--hp-ink); text-decoration:none; }
footer .brand{ color:#fff; font-size:15px; }
header .brand-logo, footer .brand-logo{ height:52px; width:auto; flex-shrink:0; display:block; }
header .nav-links{ display:flex; gap:26px; font-size:0.9rem; color:var(--hp-text-dim); font-weight:500; list-style:none;}
header .nav-links a{ position:relative; padding:4px 0; transition:color .15s ease; color:var(--hp-text-dim); text-decoration:none; }
header .nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--hp-brand); transition:right .2s ease; }
header .nav-links a:hover::after{ right:0; }
header .nav-links a:hover{ color:var(--hp-brand); }
header .nav-actions{ display:flex; align-items:center; gap:10px; }

header .btn, footer .btn, .mobile-menu .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--hp-radius-sm);font-weight:700;font-size:0.95rem;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:var(--hp-sans);
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
header .btn:active, footer .btn:active, .mobile-menu .btn:active{ transform:translateY(1px); }
header .btn .arrow, .mobile-menu .btn .arrow{ display:inline-block; transition:transform .18s ease; line-height:1; }
header .btn:hover .arrow, .mobile-menu .btn:hover .arrow{ transform:translateX(4px); }
header .btn-primary, .mobile-menu .btn-primary{ background:var(--hp-brand); color:#fff; border-color:var(--hp-brand-dark); box-shadow:0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px -6px rgba(49,97,232,0.55); }
header .btn-primary:hover, .mobile-menu .btn-primary:hover{ background:var(--hp-brand-dark); }
header .btn-ghost, .mobile-menu .btn-ghost{ background:#fff; color:var(--hp-ink); border-color:var(--hp-brand-soft); box-shadow:0 1px 2px rgba(16,24,40,0.04); }
header .btn-ghost:hover, .mobile-menu .btn-ghost:hover{ border-color:var(--hp-brand); color:var(--hp-brand); }
header .nav-actions .btn{ padding:9px 16px; font-size:0.87rem; }

.nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; border:1px solid var(--hp-line); border-radius:8px; background:#fff; cursor:pointer; padding:0; flex-shrink:0; }
.nav-burger span{ display:block; width:16px; height:2px; background:var(--hp-ink); margin:0 auto; transition:transform .2s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-backdrop{ position:fixed; top:64px; right:0; bottom:0; left:0; z-index:98; background:rgba(16,24,40,.45); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.mobile-backdrop.open{ opacity:1; pointer-events:auto; }

.mobile-menu{ position:fixed; top:64px; right:0; bottom:0; z-index:99; width:min(300px,84vw); background:#fff; border-left:1px solid var(--hp-line); display:flex; flex-direction:column; overflow-y:auto; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); }
.mobile-menu.open{ box-shadow:-20px 0 50px -20px rgba(16,24,40,.3); }
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu-links{ display:flex; flex-direction:column; padding:10px 8px; flex-shrink:0; }
.mobile-menu-links a{ padding:14px 12px; border-radius:9px; color:var(--hp-text); font-weight:500; font-size:0.96rem; text-decoration:none; display:block; }
.mobile-menu-links a:hover{ background:var(--hp-paper-alt); color:var(--hp-brand); }
.mobile-menu-actions{ display:flex; flex-direction:column; gap:10px; padding:14px 16px 22px; border-top:1px solid var(--hp-line); flex-shrink:0; }
.mobile-menu-actions .btn{ width:100%; justify-content:center; padding:11px 18px; font-size:0.9rem; }

.mobile-quickbuy{ padding:14px 16px 4px; border-top:1px solid var(--hp-line); flex:1; }
.mobile-quickbuy-label{ display:block; font-size:0.72rem; font-weight:700; color:var(--hp-text-faint); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.mobile-quickbuy-row{ display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:10px; transition:background .15s ease; }
.mobile-quickbuy-row:hover{ background:var(--hp-paper-alt); }
.mobile-quickbuy-icon{ width:34px; height:34px; border-radius:9px; background:#EDF2FE; color:var(--hp-brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mobile-quickbuy-icon svg{ width:17px; height:17px; }
.mobile-quickbuy-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.mobile-quickbuy-text .name{ font-size:0.88rem; font-weight:600; color:var(--hp-ink); }
.mobile-quickbuy-text .price{ font-size:0.76rem; color:var(--hp-text-faint); font-family:var(--hp-mono); margin-top:1px; }
.mobile-quickbuy-arrow{ color:var(--hp-text-faint); flex-shrink:0; }

@media (max-width:900px){
  header .nav-links{display:none;}
  header .nav-actions{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width:600px){
  .mobile-backdrop, .mobile-menu{ top:70px; }
  header .nav-row{ height:70px; }
  header .brand{ font-size:19px; gap:8px; }
  header .brand-logo{ height:54px; }
}

footer{ background:linear-gradient(180deg, #0b1f4d 0%, #081538 100%); border-top:3px solid #2563eb; color:#98A2C0; padding:56px 0 28px; margin-top:56px; position:relative; overflow:hidden;}
footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--hp-brand),#5B8DEF,var(--hp-gold)); }
footer .foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid #232D45;}
footer .foot-brand p{ max-width:34ch; font-size:0.88rem; margin-top:12px; color:#8992B0; }
footer .foot-social{ display:flex; gap:10px; margin-top:18px; }
footer .foot-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease, transform .15s ease; color:rgba(255,255,255,.75); }
footer .foot-social a:hover{ background:var(--hp-brand); border-color:var(--hp-brand); color:#fff; transform:translateY(-2px); }
footer .foot-social svg{ width:16px; height:16px; }
footer .foot-logo-chip{ display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:#fff; border:1px solid #fff; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.18); overflow:hidden; }
footer .foot-logo-chip img{ height:54px; width:54px; object-fit:cover; }
footer .foot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding:32px 0; border-bottom:1px solid #232D45;}
footer .foot-grid h5{ color:#fff; font-family:var(--hp-display); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:14px;}
footer .foot-grid ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; font-size:0.87rem;}
footer .foot-grid a{ color:#8992B0; transition:color .15s ease; text-decoration:none; }
footer .foot-grid a:hover{ color:#fff; }
footer .foot-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-size:0.79rem; flex-wrap:wrap; gap:10px; color:#6B7599;}
footer .foot-bottom a{ color:#8992B0; text-decoration:none; }
footer .foot-bottom a:hover{ color:#fff; }
@media (max-width:760px){ footer .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ footer .foot-grid{grid-template-columns:1fr;} }

.back-to-top-btn{ position:fixed; right:24px; bottom:24px; z-index:80; width:46px; height:46px; border-radius:50%; background:#3161E8; color:#fff; border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(49,97,232,.55); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.back-to-top-btn.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top-btn:hover{ background:#1F44B0; }
@media (max-width:600px){ .back-to-top-btn{ right:16px; bottom:16px; width:40px; height:40px; } }

.brand-accent{ color:#3161E8; }
footer .brand-accent{color:#fff}