/* ====================================================================
   site.css — single stylesheet for waves.com.pk (built 7 Sep 2026 from
   YOUR latest main.css + cms.css + skin.css, in that load order).
   Edit THIS file from now on. Brand accent colour: --gold (section 1)
   and --wpx-gold (section 3) — keep them the same value.
   ==================================================================== */

/* ======================= 1. main.css ======================= */
/* Waves corporate site — Design A: Blue-Chip Ledger -- gold color value #C9A227 */
:root{
  --navy:#0B2545; --navy-2:#123061; --ink:#1C2B3A; --paper:#FFF;
  --mist:#F2F5F9; --line:#D8E0EA; --gold:#1A8FC1 ; --slate:#41536B; --dim:#6B7B90;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Libre Franklin',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;color:var(--navy)}
h1{font-size:46px;line-height:1.12} h2{font-size:32px} h3{font-size:20px}
h1 em{font-style:italic;color:var(--gold)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:16px}
section{padding:64px 0}
.lead{font-size:17px;color:var(--slate);max-width:60ch}

/* strip + header */
.strip{background:var(--navy);color:#B9C7DB;font-size:12.5px}
.strip .wrap{display:flex;justify-content:space-between;padding:8px 24px;gap:12px;flex-wrap:wrap}
.strip b{color:#fff}
header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px;max-width:1180px;margin:0 auto}
.logo{height:44px}
.menu{display:flex;gap:24px;list-style:none;font-size:14.5px;font-weight:500}
.menu a{padding-bottom:4px}
.menu a:hover,.menu .ir-link{border-bottom:2px solid var(--navy)}
.ir-link{color:var(--navy);font-weight:700}
.menu-btn{display:none;font-size:22px;background:none;border:0;color:var(--blue);cursor:pointer}
.btn{display:inline-block;background:#1A8FC1;color:#fff;font-weight:700;font-size:14px;padding:11px 22px;border-radius:3px;border:0;cursor:pointer}
.btn:hover{background:var(--navy)}
.btn-o{background:transparent;border:1.5px solid var(--navy);color:var(--navy)}
.btn-o:hover{background:var(--navy);color:#fff}

/* hero + ledger */
.hero{background:linear-gradient(180deg,#fff,var(--mist));border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;padding:64px 24px 72px;align-items:center}
.hero p.lead{margin:20px 0 28px}
.ledger{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);box-shadow:0 18px 44px rgba(11,37,69,.10);border-radius:6px;overflow:hidden}
.ledger h3{padding:18px 22px 4px}
.ledger .sub{font-size:12.5px;color:var(--dim);padding:0 22px 12px;border-bottom:1px solid var(--line)}
.ledger table{width:100%;border-collapse:collapse;font-size:13.5px}
.ledger td{padding:12px 22px;border-bottom:1px solid var(--mist)}
.ledger td.t{font-weight:600;color:var(--navy)}
.ledger td.co{color:var(--dim);font-size:12px;white-space:nowrap}
.ledger td.pdf{text-align:right}
.ledger td.pdf a{color:var(--gold);font-weight:700;font-size:12.5px}
.ledger .foot{padding:14px 22px;background:var(--mist);font-size:13px}
.ledger .foot a{color:var(--navy);font-weight:600;border-bottom:1px solid var(--gold)}

/* page head band */
.pagehead{background:var(--navy);color:#fff;padding:46px 0}
.pagehead h1{color:#fff;font-size:38px}
.pagehead .crumbs{font-size:13px;color:#B9C7DB;margin-bottom:10px}
.pagehead .crumbs a{color:#fff;border-bottom:1px solid var(--gold)}

/* cards & grids */
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.sec-h a{font-size:14px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--gold)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{border:1px solid var(--line);border-radius:6px;background:#fff;transition:.2s;overflow:hidden}
.card:hover{box-shadow:0 14px 34px rgba(11,37,69,.12);transform:translateY(-3px)}
.card .ph{background:var(--mist);height:190px;display:flex;align-items:center;justify-content:center;padding:16px}
.card .ph img{max-height:160px;object-fit:contain}
.card .cb{padding:16px 20px 20px}
.card h4{font-size:16px;color:var(--navy)}
.card span{font-size:12.5px;color:var(--dim)}

/* IR band + entity cards */
.ir-band{background:var(--navy);color:#fff}
.ir-band h2{color:#fff}
.ir-band p.note{color:#B9C7DB;max-width:64ch;margin-bottom:32px}
.entity{background:var(--navy-2);border:1px solid #24457E;border-radius:6px;padding:28px;color:#fff}
.entity .sym{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;font-size:12px;letter-spacing:.1em;padding:4px 10px;border-radius:3px;margin-bottom:14px}
.entity h3{color:#fff;margin-bottom:8px}
.entity p{font-size:14px;color:#B9C7DB;margin-bottom:18px}
.entity a.go{color:var(--gold);font-weight:700;font-size:14px}

/* document lists */
.doclist{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:36px}
.doclist .dl-h{background:var(--mist);padding:14px 20px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.doclist .dl-h span{font-weight:500;color:var(--dim);font-size:13px}
.docrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 20px;border-bottom:1px solid var(--mist);font-size:14.5px}
.docrow:last-child{border-bottom:none}
.docrow:hover{background:#FBFCFE}
.docrow .dt{font-weight:600;color:var(--navy)}
.docrow .dm{color:var(--dim);font-size:12.5px}
.docrow a.dl{color:var(--gold);font-weight:700;font-size:13px;white-space:nowrap}
.yeargroup{margin-bottom:8px}

/* hub tiles */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hubtile{border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:6px;padding:24px;transition:.2s}
.hubtile:hover{box-shadow:0 12px 30px rgba(11,37,69,.12)}
.hubtile h3{margin-bottom:6px;font-size:18px}
.hubtile p{font-size:13.5px;color:var(--dim)}

/* tables (network) */
table.data{width:100%;border-collapse:collapse;font-size:14px;border:1px solid var(--line)}
table.data th{background:var(--navy);color:#fff;text-align:left;padding:10px 14px;font-weight:600;font-size:13px}
table.data td{padding:10px 14px;border-bottom:1px solid var(--mist)}

/* forms */
.form{max-width:640px}
.form label{display:block;font-weight:600;font-size:13.5px;margin:16px 0 6px;color:var(--navy)}
.form input,.form textarea,.form select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:4px;font:inherit;font-size:14.5px}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.notice-ok{background:#E7F4E4;border:1px solid #B7DCA8;color:#2F6627;padding:14px 18px;border-radius:4px;margin-bottom:20px}
.notice-err{background:#FDECEA;border:1px solid #F5B7B1;color:#922B21;padding:14px 18px;border-radius:4px;margin-bottom:20px}
.hp{position:absolute;left:-9999px;opacity:0}

/* timeline (about) */
.timeline{border-left:2px solid var(--gold);margin:28px 0 0 8px;padding-left:28px}
.timeline .tl{margin-bottom:22px;position:relative}
.timeline .tl::before{content:'';position:absolute;left:-35px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--gold)}
.timeline .yr{font-family:'Fraunces',serif;font-size:18px;color:var(--navy);font-weight:600}
.timeline p{color:var(--slate);font-size:14.5px}

/* footer */
footer{background:#081B33;color:#8FA3BC;font-size:13.5px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1.4fr 1fr;gap:38px;padding:52px 24px 38px;max-width:1180px;margin:0 auto}
footer h5{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
footer li{list-style:none;margin-bottom:10px}
footer a:hover{color:var(--gold)}
.legal{border-top:1px solid #16304F;padding:18px 24px;text-align:center;font-size:12.5px}

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/FrauncesSoft-Black.woff2') format('woff2');
    font-weight: 500;
}

@media(max-width:900px){
  h1{font-size:34px}
  .hero .wrap,.grid2,.hub{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr 1fr}
  .menu{display:none}
  body.nav-open .menu{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;border-bottom:1px solid var(--line);gap:16px}
  .menu-btn{display:block}
  footer .cols{grid-template-columns:1fr 1fr}
  .docrow{flex-wrap:wrap}
}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ======================= 2. cms.css ======================== */
/* cms.css — styles for admin-created pages and (optional) sub-menus.
   Separate file so main.css stays byte-identical. Only NEW classes here. */

/* dynamic page body */
.cms-page{max-width:860px}
.cms-featured{width:100%;height:auto;border-radius:8px;margin-bottom:28px;border:1px solid var(--line,#D8E0EA)}
.cms-content{font-size:16px;line-height:1.75;color:var(--ink,#1C2B3A)}
.cms-content h2{font-size:26px;margin:30px 0 12px}
.cms-content h3{font-size:20px;margin:24px 0 10px}
.cms-content p{margin:0 0 16px}
.cms-content ul,.cms-content ol{margin:0 0 16px 22px}
.cms-content li{margin-bottom:6px}
.cms-content a{color:var(--navy,#0B2545);text-decoration:underline}
.cms-content img{max-width:100%;height:auto;border-radius:6px;margin:16px 0}
.cms-content blockquote{border-left:3px solid var(--gold,#C9A227);margin:16px 0;padding:6px 18px;color:var(--slate,#41536B)}
.cms-content table{width:100%;border-collapse:collapse;margin:16px 0}
.cms-content th,.cms-content td{border:1px solid var(--line,#D8E0EA);padding:8px 12px;text-align:left}
.cms-content th{background:var(--mist,#F2F5F9)}
.cms-children{margin-top:40px;padding-top:24px;border-top:1px solid var(--line,#D8E0EA)}
.cms-children ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.cms-children a{display:inline-block;padding:8px 16px;border:1px solid var(--line,#D8E0EA);border-radius:4px;color:var(--navy,#0B2545);font-weight:600}
.cms-children a:hover{border-color:var(--gold,#C9A227)}

/* optional dropdown — only activates when a menu item HAS children.
   With no children (current state) the header is visually unchanged. */
.menu li.has-sub{position:relative}
.menu li.has-sub > a::after{content:" \25BE";font-size:10px}
.menu .submenu{display:none;position:absolute;top:100%;left:0;min-width:200px;background:#fff;
  border:1px solid var(--line,#D8E0EA);border-radius:0 0 6px 6px;box-shadow:0 12px 30px rgba(11,37,69,.12);
  padding:8px 0;z-index:60;list-style:none}
.menu li.has-sub:hover .submenu,.menu li.has-sub:focus-within .submenu{display:block}
.menu .submenu li{display:block}
.menu .submenu a{display:block;padding:9px 18px;white-space:nowrap;border:0}
.menu .submenu a:hover{background:var(--mist,#F2F5F9)}
@media(max-width:900px){
  .menu .submenu{position:static;box-shadow:none;border:0;padding:4px 0 4px 16px}
  .menu li.has-sub:hover .submenu{display:block}
}

/* documents auto-list on CMS pages (mirrors the investor doclist look) */
.cms-docs{margin-top:36px}
.cms-docs .doclist{list-style:none;padding:0;margin:12px 0 0}
.cms-docs .doclist li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:12px 4px;border-bottom:1px solid var(--line,#D8E0EA)}
.cms-docs .doclist a{color:var(--navy,#0B2545);font-weight:600;text-decoration:none}
.cms-docs .doclist a:hover{text-decoration:underline}
.cms-docs .doc-meta{font-size:12.5px;color:var(--slate,#41536B);white-space:nowrap}

/* ======================= 3. skin.css ======================= */
/* skin.css — waves.net.pk design replica for waves.com.pk
   Loads AFTER main.css and restyles the global chrome (header/footer) and the
   homepage. Interior page content keeps main.css styling. All classes wpx-*. */

:root{
  /* Waves design tokens — derived from the approved hero artwork */
  --wpx-navy:#0E284B;      /* primary: headings, footer, dark bands (AC brand panel) */
  --wpx-navy-d:#08192F;    /* footer bottom bar */
  --wpx-blue:#1B4B8F;      /* secondary */
  --wpx-acc:#1A8FC1;       /* accent: links, CTAs (from wave-mark cyan) */
  --wpx-cyan:#20789C;      /* hover / highlight */
  --wpx-ink:#1C2430; --wpx-mut:#5C6470;
  --wpx-line:#E4E8EE; --wpx-bg:#FFFFFF; --wpx-soft:#F5F7FA;
  --wpx-r:10px;            /* card radius */
  --wpx-r-btn:6px;         /* button radius */
}

/* ============ HEADER (logo · dropdown nav · social · Buy Now) ============ */
.wpx-head{background:#fff;border-bottom:1px solid var(--wpx-line);position:sticky;top:0;z-index:80}
.wpx-nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:10px 20px}
.wpx-nav .logo img{height:36px;width:auto;display:block}
.wpx-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.wpx-menu>li{position:relative}
.wpx-menu>li>a{display:block;padding:12px 14px;color:var(--wpx-ink);font-weight:600;font-size:15px;text-decoration:none;border-radius:6px}
.wpx-menu>li>a:hover{color:var(--wpx-acc)}
.wpx-menu .dd{display:none;position:absolute;top:100%;left:0;min-width:230px;background:#fff;border:1px solid var(--wpx-line);
  border-radius:0 0 8px 8px;box-shadow:0 14px 34px rgba(12,32,60,.14);padding:8px 0;list-style:none;margin:0;z-index:90}
.wpx-menu li:hover>.dd,.wpx-menu li:focus-within>.dd{display:block}
.wpx-menu .dd li{position:relative}
.wpx-menu .dd a{display:block;padding:9px 18px;color:var(--wpx-ink);font-size:14px;text-decoration:none;white-space:nowrap}
.wpx-menu .dd a:hover{background:var(--wpx-soft);color:var(--wpx-acc)}
.wpx-menu .dd .dd{top:0;left:100%;border-radius:8px}
.wpx-menu .caret::after{content:" \25BE";font-size:10px;color:var(--wpx-mut)}
.wpx-social{display:flex;gap:10px;margin-left:8px}
.wpx-social a{width:32px;height:32px;border-radius:50%;background:var(--wpx-soft);display:grid;place-items:center;
  color:var(--wpx-navy);text-decoration:none;font-size:13px;font-weight:700;border:1px solid var(--wpx-line)}
.wpx-social a:hover{background:var(--wpx-blue);color:#fff}
.wpx-buy{background:var(--wpx-acc);color:#fff !important;font-weight:700;padding:10px 22px;border-radius:6px;text-decoration:none;font-size:14px;margin-left:6px}
.wpx-buy:hover{background:var(--wpx-navy)}
.wpx-burger{display:none;margin-left:auto;background:none;border:1px solid var(--wpx-line);border-radius:6px;font-size:20px;padding:4px 12px;color:var(--wpx-navy)}
@media(max-width:1020px){
  .wpx-burger{display:block}
  .wpx-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--wpx-line);
    flex-direction:column;align-items:stretch;padding:8px 12px 16px;box-shadow:0 20px 40px rgba(12,32,60,.15)}
  body.wpx-open .wpx-menu{display:flex}
  .wpx-menu .dd{position:static;display:block;border:0;box-shadow:none;padding-left:16px}
  .wpx-menu .dd .dd{padding-left:16px}
  .wpx-social{display:none}
}

/* ============ HOMEPAGE ============ */
/* hero slider */
.wpx-slider{position:relative;overflow:hidden;background:#0d1522}
.wpx-slides{display:flex;transition:transform .6s ease}
.wpx-slide{min-width:100%}
.wpx-slide img{width:100%;height:auto;display:block}
.wpx-sbtn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.85);color:var(--wpx-blue);font-size:20px;cursor:pointer;z-index:5}
.wpx-sbtn:hover{background:#fff}
.wpx-prev{left:16px}.wpx-next{right:16px}
.wpx-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:5}
.wpx-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer}
.wpx-dots button.on{background:#fff}

/* generic sections */
.wpx-sec{padding:64px 20px}
.wpx-wrap{max-width:1240px;margin:0 auto}
.wpx-eyebrow{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--wpx-mut);font-weight:700;text-align:center}
.wpx-h2{font-family:'Libre Franklin',Arial,sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.01em;color:var(--wpx-navy);text-align:center;margin:8px 0 18px}
.wpx-lead{max-width:820px;margin:0 auto;text-align:center;color:var(--wpx-ink);font-size:17px;line-height:1.7}
.wpx-lead+.wpx-lead{margin-top:14px;color:var(--wpx-mut)}

/* trusted logos */
.wpx-logos{display:flex;justify-content:center;align-items:center;gap:clamp(26px,6vw,72px);flex-wrap:wrap;margin-top:34px}
.wpx-logos img{height:56px;width:auto;filter:grayscale(1);opacity:.75;transition:.2s}
.wpx-logos img:hover{filter:none;opacity:1}

/* product range cards */
.wpx-range{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
@media(max-width:900px){.wpx-range{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wpx-range{grid-template-columns:1fr}}
.wpx-rcard{position:relative;border:1px solid var(--wpx-line);border-radius:10px;background:linear-gradient(160deg,#fff, #f2f6fb);
  padding:26px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s}
.wpx-rcard:hover{box-shadow:0 16px 36px rgba(12,32,60,.12);transform:translateY(-3px)}
.wpx-rcard h3{font-size:20px;color:var(--wpx-navy);margin:0}
.wpx-rcard small{color:var(--wpx-mut)}
.wpx-rcard .see{align-self:flex-start;margin-top:16px;color:var(--wpx-acc);font-weight:700;text-decoration:none;font-size:14px}
.wpx-rcard .see:hover{text-decoration:underline}

/* wide banner strip */
.wpx-banner{background:var(--wpx-navy);color:#fff;text-align:center}
.wpx-banner .wpx-h2{color:#fff}
.wpx-banner img{max-width:520px;width:80%;height:auto;margin:6px auto 22px;display:block}
.wpx-cta{display:inline-block;background:#fff;color:var(--wpx-navy);font-weight:700;padding:13px 30px;border-radius:6px;text-decoration:none}
.wpx-cta:hover{background:var(--wpx-acc);color:#fff}

/* about */
.wpx-about{background:var(--wpx-soft)}
.wpx-about p{max-width:960px;margin:0 auto;font-size:16.5px;line-height:1.85;color:var(--wpx-ink);text-align:center}

/* additional products grid */
.wpx-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
@media(max-width:1000px){.wpx-prods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wpx-prods{grid-template-columns:1fr}}
.wpx-pcard{border:1px solid var(--wpx-line);border-radius:10px;overflow:hidden;background:#fff;text-decoration:none;transition:.18s}
.wpx-pcard:hover{box-shadow:0 16px 36px rgba(12,32,60,.12);transform:translateY(-3px)}
.wpx-pcard .im{aspect-ratio:37/30;background:#f2f5f9 center/cover no-repeat;display:grid;place-items:center;color:#9aa6b5;font-size:13px}
.wpx-pcard .im img{width:100%;height:100%;object-fit:cover;display:block}
.wpx-pcard .tx{padding:14px 16px}
.wpx-pcard .cat{font-size:12px;color:var(--wpx-mut);text-transform:lowercase}
.wpx-pcard h4{margin:4px 0 8px;font-size:16px;color:var(--wpx-navy)}
.wpx-pcard .rm{font-size:13px;color:var(--wpx-acc);font-weight:700}

/* ============ FOOTER ============ */
.wpx-foot{background:var(--wpx-navy);color:#c9d5e4;margin-top:0}
.wpx-fgrid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;padding:56px 20px 30px}
@media(max-width:900px){.wpx-fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.wpx-fgrid{grid-template-columns:1fr}}
.wpx-foot h5{color:#fff;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px}
.wpx-foot ul{list-style:none;margin:0;padding:0}
.wpx-foot li{margin-bottom:9px}
.wpx-foot a{color:#c9d5e4;text-decoration:none;font-size:14.5px}
.wpx-foot a:hover{color:#fff;text-decoration:underline}
.wpx-flogo img{height:36px;width:auto;margin-bottom:14px}
.wpx-foot .tag{color:#e8eef6;font-weight:600;margin:0 0 14px}
.wpx-foot .adr{font-size:14.5px;line-height:1.8;margin:0}
.wpx-fsoc{display:flex;gap:10px;margin-top:16px}
.wpx-fsoc a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:13px;font-weight:700}
.wpx-fsoc a:hover{background:var(--wpx-acc);text-decoration:none}
.wpx-fbar{background:var(--wpx-navy-d);border-top:1px solid rgba(255,255,255,.10);text-align:center;padding:18px 20px;font-size:13.5px;color:#9fb0c4}

/* blog cards */
.wpx-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
@media(max-width:960px){.wpx-blog{grid-template-columns:1fr}}
.wpx-bcard{border:1px solid var(--wpx-line);border-radius:10px;overflow:hidden;background:#fff;text-decoration:none;display:flex;flex-direction:column;transition:.18s}
.wpx-bcard:hover{box-shadow:0 16px 36px rgba(12,32,60,.12);transform:translateY(-3px)}
.wpx-bcard .im{aspect-ratio:16/9;background:#e8edf3}
.wpx-bcard .im img{width:100%;height:100%;object-fit:cover;display:block}
.wpx-bcard .tx{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.wpx-bcard .chip{align-self:flex-start;background:var(--wpx-soft);border:1px solid var(--wpx-line);color:var(--wpx-acc);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.wpx-bcard h3{margin:0;font-size:18px;line-height:1.4;color:var(--wpx-navy)}
.wpx-bcard .dt{font-size:12.5px;color:var(--wpx-mut)}
.wpx-bcard p{margin:0;font-size:14px;line-height:1.6;color:var(--wpx-ink)}
.wpx-bcard .rm{color:var(--wpx-acc);font-weight:700;font-size:14px}

/* stay in touch */
.wpx-stay{text-align:center}
.wpx-sub{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.wpx-sub input[type=email]{width:min(420px,86vw);padding:13px 16px;border:1px solid var(--wpx-line);border-radius:6px;font-size:15px}
.wpx-sub button{background:var(--wpx-acc);color:#fff;border:0;border-radius:6px;padding:13px 30px;font-weight:700;font-size:15px;cursor:pointer}
.wpx-sub button:hover{background:var(--wpx-navy)}
.wpx-subok{color:#1c7c3d;font-weight:700;margin-top:14px}
.wpx-suberr{color:#b03030;font-weight:700;margin-top:14px}

/* client-provided hero image */
.wpx-hero{background:linear-gradient(90deg,#121416 0%,#15181b 20%,#1d1e1e 50%,#2b261f 80%,#3d352b 100%);text-align:center;overflow:hidden}
.wpx-hwrap{position:relative;width:100%}
.wpx-himg{display:block;width:100%;height:auto}
.wpx-hh1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wpx-hshop{position:absolute;left:13.3%;top:77.5%;width:18.7%;height:6.3%;border-radius:999px;display:block}
.wpx-hshop:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ================= DESIGN A — expert redesign (v2) ================= */
:root{--wpx-gold:#1A8FC1;--wpx-deep:#071A33}
body{font-family:'Libre Franklin',Arial,sans-serif}
/* utility bar */
.wpx-ut{background:var(--wpx-deep);color:#B9C6D6;font-size:12.5px} .wpx-utw{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:36px;gap:20px}
.wpx-ut .tk{display:flex;gap:22px} .wpx-ut .tk b{color:#fff} .wpx-ut .tk i{font-style:normal;color:var(--wpx-gold);font-weight:600} .wpx-ut .ln{display:flex;gap:22px} .wpx-ut .ln a{color:#B9C6D6} .wpx-ut .ln a:hover{color:#fff}
@media(max-width:860px){.wpx-ut .ln{display:none}}
/* header refinements */
.wpx-head{border-bottom:1px solid var(--wpx-line)} .wpx-nav{height:80px;padding:0 20px}
.wpx-menu>li>a{padding:10px 14px;border-bottom:2px solid transparent;border-radius:0;color:var(--wpx-ink)} .wpx-menu>li>a:hover{color:var(--wpx-navy);border-color:var(--wpx-navy)}

.wpx-buy{
        background:#1A8FC1;color:#fff !important;border-radius:3px;padding:11px 22px} 
.wpx-buy:hover{background: var(--navy) ; color:#fff !important;}

/* slider v2 */
.wpx-slider.v2{background:#0B2545} .wpx-slider.v2 .wpx-slide img{filter:none}
.wpx-slider.v2 .wpx-sbtn{position:static;transform:none;width:44px;height:44px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);font-size:18px} .wpx-slider.v2 .wpx-sbtn:hover{background:#fff;color:var(--wpx-navy)}
.wpx-ctl{position:absolute;right:28px;bottom:28px;display:flex;align-items:center;gap:12px;z-index:5} .wpx-cnt{color:#fff;font-size:13px;letter-spacing:.1em} .wpx-cnt b{font-family:'Fraunces',Georgia,serif;font-size:22px;margin-right:4px}
.wpx-slider.v2 .wpx-dots{left:28px;right:auto;bottom:38px;gap:8px} .wpx-slider.v2 .wpx-dots button{width:26px;height:2px;border-radius:0;background:rgba(255,255,255,.4)} .wpx-slider.v2 .wpx-dots button.on{background:#fff;width:44px}
.wpx-pb{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15);z-index:5} .wpx-pb i{display:block;height:100%;width:0;background:var(--wpx-gold)}
@media(max-width:640px){.wpx-ctl{right:16px;bottom:16px}.wpx-slider.v2 .wpx-dots{left:16px;bottom:24px}}
/* facts */
.wpx-facts{background:#fff;border-bottom:1px solid var(--wpx-line)} .wpx-facts .wpx-wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.wpx-facts div{padding:24px 26px;border-right:1px solid var(--wpx-line)} .wpx-facts div:first-child{padding-left:0} .wpx-facts div:last-child{border-right:0}
.wpx-facts b{display:block;font-family:'Fraunces',Georgia,serif;font-size:30px;color:var(--wpx-navy);line-height:1.1;font-weight:600} .wpx-facts span{font-size:13px;color:var(--wpx-mut)}
@media(max-width:760px){.wpx-facts .wpx-wrap{grid-template-columns:1fr 1fr}.wpx-facts div{padding:18px 14px}.wpx-facts div:nth-child(2){border-right:0}.wpx-facts div:nth-child(-n+2){border-bottom:1px solid var(--wpx-line)}}
/* section system */
.wpx-sec{padding:84px 20px} .wpx-sec.alt{background:var(--wpx-soft)} @media(max-width:768px){.wpx-sec{padding:56px 20px}}
.wpx-lbl{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wpx-mut);margin-bottom:22px} .wpx-lbl::after{content:"";flex:1;height:1px;background:var(--wpx-line)} .wpx-lbl b{color:var(--wpx-gold)}
.wpx-lbl.w{color:#8FA3BA} .wpx-lbl.w::after{background:rgba(255,255,255,.15)}
.wpx-h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1.15;letter-spacing:-.01em;color:var(--wpx-navy)} .wpx-h2.l{text-align:left;margin:0} .wpx-h2.w{color:#fff}
.wpx-hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.wpx-lnk{color:var(--wpx-navy);font-weight:600;font-size:14px;border-bottom:1px solid var(--wpx-gold);padding-bottom:2px;text-decoration:none;white-space:nowrap} .wpx-lnk:hover{border-color:var(--wpx-navy)}
.wpx-lead.l{text-align:left;margin:0 0 14px} .wpx-lead.big{font-size:21px;color:var(--wpx-navy);line-height:1.5} .wpx-lead+.wpx-lead{margin-top:0}
.wpx-split{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start} @media(max-width:860px){.wpx-split{grid-template-columns:1fr;gap:20px}}
/* trust strip */
.wpx-trust{border-top:1px solid var(--wpx-line);border-bottom:1px solid var(--wpx-line);padding:26px 20px;background:var(--wpx-soft)} .wpx-trust .wpx-wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center}
.wpx-trust span{font-size:13px;color:var(--wpx-mut);white-space:nowrap} .wpx-trust .wpx-logos{margin:0;gap:44px} .wpx-trust img{height:34px;filter:grayscale(1);opacity:.65} .wpx-trust img:hover{filter:none;opacity:1}
/* category grid */
.wpx-cg{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--wpx-line)} @media(max-width:1000px){.wpx-cg{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.wpx-cg{grid-template-columns:repeat(2,1fr)}}
.wpx-cg a{padding:30px 22px 26px;border-right:1px solid var(--wpx-line);border-bottom:1px solid var(--wpx-line);text-decoration:none;transition:.2s;position:relative} .wpx-cg a:hover{background:var(--wpx-soft)}
.wpx-cg a:nth-child(6n){border-right:0} @media(max-width:1000px){.wpx-cg a:nth-child(6n){border-right:1px solid var(--wpx-line)}.wpx-cg a:nth-child(3n){border-right:0}} @media(max-width:560px){.wpx-cg a:nth-child(3n){border-right:1px solid var(--wpx-line)}.wpx-cg a:nth-child(2n){border-right:0}}
.wpx-cg b{display:block;font-size:15px;color:var(--wpx-navy);font-weight:600} .wpx-cg small{color:var(--wpx-mut);font-size:12.5px} .wpx-cg .ar{display:block;margin-top:14px;color:var(--wpx-gold);font-size:13px;font-weight:600;opacity:0;transition:.2s} .wpx-cg a:hover .ar{opacity:1}
.wpx-cg .ic{display:block;width:36px;height:36px;margin-bottom:16px;background:var(--wpx-navy);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-fridge{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='14' y='4' width='20' height='40' rx='3'/%3E%3Cline x1='14' y1='20' x2='34' y2='20'/%3E%3Cline x1='29' y1='9' x2='29' y2='15'/%3E%3Cline x1='29' y1='25' x2='29' y2='33'/%3E%3C/svg%3E")}
.ic-freezer{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='14' width='40' height='26' rx='3'/%3E%3Cline x1='4' y1='22' x2='44' y2='22'/%3E%3Cline x1='20' y1='18' x2='28' y2='18'/%3E%3C/svg%3E")}
.ic-washer{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='8' y='4' width='32' height='40' rx='3'/%3E%3Ccircle cx='24' cy='27' r='10'/%3E%3Ccircle cx='24' cy='27' r='5'/%3E%3Cline x1='12' y1='10' x2='20' y2='10'/%3E%3C/svg%3E")}
.ic-ac{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='12' width='40' height='18' rx='4'/%3E%3Cline x1='10' y1='24' x2='38' y2='24'/%3E%3Cpath d='M14 36c2 3 6 3 8 0M26 36c2 3 6 3 8 0'/%3E%3C/svg%3E")}
.ic-micro{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='40' height='28' rx='3'/%3E%3Crect x='9' y='15' width='22' height='18' rx='2'/%3E%3Ccircle cx='37' cy='20' r='2'/%3E%3Ccircle cx='37' cy='28' r='2'/%3E%3C/svg%3E")}
.ic-heater{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='15' y='4' width='18' height='40' rx='9'/%3E%3Cline x1='20' y1='14' x2='28' y2='14'/%3E%3Ccircle cx='24' cy='34' r='3'/%3E%3C/svg%3E")}
/* perfect results band v2 */
.wpx-band2{background:var(--wpx-navy);color:#fff;padding:0 20px} .wpx-band2 .wpx-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;min-height:440px}
.wpx-band2 .tx{padding:64px 0} .wpx-band2 p{color:#C9D4E1;font-size:16px;margin:14px 0 26px;max-width:460px} .wpx-band2 .im img{width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(0,0,0,.35))}
.wpx-band2 .wpx-cta{border-radius:3px;background:var(--wpx-gold);color:var(--wpx-deep)} .wpx-band2 .wpx-cta:hover{background:#fff;color:var(--wpx-navy)}
@media(max-width:860px){.wpx-band2 .wpx-wrap{grid-template-columns:1fr}.wpx-band2 .tx{padding:48px 0 8px}.wpx-band2 .im{padding-bottom:40px}}
/* about v2 */
.wpx-about2{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start} @media(max-width:900px){.wpx-about2{grid-template-columns:1fr;gap:28px}}
.wpx-about2 .im img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--wpx-line)} .wpx-about2 .q{font-family:'Fraunces',Georgia,serif;font-size:22px;color:var(--wpx-navy);line-height:1.4;margin:20px 0 0;border-left:3px solid var(--wpx-gold);padding-left:16px}
.wpx-about2 p{font-size:16px;line-height:1.8;color:var(--wpx-ink);margin:16px 0 0}
.wpx-tl{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .wpx-tl span{border:1px solid var(--wpx-line);padding:8px 14px;font-size:13px;color:var(--wpx-mut)} .wpx-tl b{font-family:'Fraunces',Georgia,serif;color:var(--wpx-navy);margin-right:8px;font-size:15px}
/* product cards v2 */
.wpx-pcard{border-radius:0;border:1px solid var(--wpx-line)} .wpx-pcard:hover{transform:none;box-shadow:0 12px 30px rgba(11,37,69,.08)} .wpx-pcard .im{background:#fff;padding:16px} .wpx-pcard .im img{object-fit:contain} .wpx-pcard .cat{text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;font-weight:600}
.wpx-pcard h4{font-size:16px} .wpx-pcard .rm{color:var(--wpx-navy);border-bottom:1px solid var(--wpx-gold);padding-bottom:1px;font-size:13px}
/* blog v2 */
.wpx-bcard{border-radius:0} .wpx-bcard:hover{transform:none;box-shadow:0 12px 30px rgba(11,37,69,.08)} .wpx-bcard .chip{border-radius:0;background:transparent;border:0;padding:0;color:var(--wpx-acc);letter-spacing:.1em;text-transform:uppercase;font-size:11.5px} .wpx-bcard h3{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600} .wpx-bcard .rm{color:var(--wpx-navy);border-bottom:1px solid var(--wpx-acc);padding-bottom:1px;align-self:flex-start;font-size:13px}
/* stay in touch v2 */
.wpx-stay2{background:var(--wpx-deep);color:#fff;padding:72px 20px} .wpx-stay2 .wpx-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center} @media(max-width:860px){.wpx-stay2 .wpx-wrap{grid-template-columns:1fr}}
.wpx-stay2 p{color:#B9C6D6;margin:12px 0 0;max-width:460px} .wpx-stay2 .wpx-sub{margin-top:0;justify-content:flex-start} .wpx-stay2 .wpx-sub input[type=email]{border-radius:3px;background:#fff;border:0} .wpx-stay2 .wpx-sub button{border-radius:3px;background:var(--wpx-gold);color:var(--wpx-deep)} .wpx-stay2 .wpx-sub button:hover{background:#fff;color:var(--wpx-navy)}
.wpx-stay2 small{display:block;color:#8FA3BA;margin-top:12px;font-size:12.5px} .wpx-stay2 .wpx-subok{color:#7BE2A0} .wpx-stay2 .wpx-suberr{color:#F3A7A7}
/* footer refinements */
.wpx-foot h5{color:#fff} .wpx-fbar{background:#050f1f}

/* ================= Freya-style floating pill header + full-screen hero ================= */
.wpx-ut,.wpx-head{display:block}
.wpx-pillbar{position:fixed;top:18px;left:0;right:0;z-index:90;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.wpx-pill{pointer-events:auto;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-radius:999px;padding:6px 10px 6px 8px;box-shadow:0 10px 34px rgba(0,0,0,.22);max-width:1180px;width:100%;height:auto}
.wpx-pill .logo img{height:34px;width:auto;display:block;margin:0 8px 0 4px}
.wpx-pill .wpx-menu{margin:0 auto 0 0;gap:0} .wpx-pill .wpx-menu>li>a{padding:9px 13px;font-size:13px;font-weight:600;border:0}
.wpx-pill .wpx-menu .dd{border-radius:14px;top:calc(100% + 8px)} .wpx-pill .wpx-menu .dd .dd{top:0}
.wpx-pill .wpx-social{margin:0 4px 0 auto} .wpx-pill .wpx-social a{width:30px;height:30px;font-size:12px;background:transparent;border:0} .wpx-pill .wpx-social a:hover{background:var(--wpx-soft);color:var(--wpx-navy)}
.wpx-pill .wpx-buy{border-radius:999px;padding:9px 18px;font-size:12.5px;margin:0}
.wpx-pill .wpx-burger{margin-left:auto;border:0;background:transparent}
.wpx-pillspace{height:96px}
@media(max-width:1020px){
  .wpx-pill{border-radius:22px} .wpx-pill .wpx-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.2);padding:8px 12px 14px}
  .wpx-pill{position:relative} .wpx-pill .wpx-buy{display:none} .wpx-pillspace{height:80px}
}
.wpx-fhero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:#0d1019}
.wpx-fhero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.wpx-fhero-shop{position:absolute;border-radius:999px;display:block}
.wpx-fhero-shop:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:640px){.wpx-fhero{height:72vh;min-height:420px}.wpx-fhero img{object-position:52% center}}
.dl.soon{color:var(--wpx-mut);border:1px dashed var(--wpx-line);padding:2px 8px;font-size:12px;cursor:default}
/* product detail */
.pd{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start} @media(max-width:860px){.pd{grid-template-columns:1fr}}
.pd-im img{width:100%;height:auto;background:#F4F6F9;padding:24px;border:1px solid var(--wpx-line,#DDE3EA)}
.pd-tx h2{font-size:22px;color:var(--wpx-navy,#0B2545);margin:0 0 12px} .pd-tx h2+h2{margin-top:26px}
.pd-attrs{width:100%;border-collapse:collapse;margin-bottom:26px;font-size:14.5px} .pd-attrs th,.pd-attrs td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--wpx-line,#DDE3EA)} .pd-attrs th{width:40%;color:var(--wpx-mut,#5B6B7C);font-weight:600}