/* ============================================================
   Widex brand skin — scoped to .widex-skin only.
   Source: docs/design-widex.md (observed from www.widex.com/en-gb).
   Warm, editorial, monochrome: stone bg, espresso ink, light
   Montserrat display + Noto Sans body, SQUARE ghost buttons,
   no accent colour. Sits below the Wickersley header/footer.
   ============================================================ */
.widex-skin{
  --wx-stone:#EFEDEC; --wx-surface:#F7F6F5; --wx-white:#fff;
  --wx-espresso:#2A2826; --wx-ink2:#5B554F; --wx-taupe:#7B756F; --wx-taupe-d:#4E4B48;
  --wx-edge:#E0DCD8;
  background:var(--wx-stone);
  font-family:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--wx-espresso);
}
.widex-skin .container{max-width:1280px;}
.widex-skin .section{background:transparent;padding:clamp(4rem,8vw,7.5rem) 0;}

/* Typography — Montserrat display (light), Noto Sans body */
.widex-skin h1,.widex-skin h2,.widex-skin h3,.widex-skin .modeltag{font-family:"Montserrat",sans-serif;color:var(--wx-espresso);letter-spacing:normal;}
.widex-skin h1{font-weight:400;font-size:clamp(2.6rem,5vw,3.75rem);line-height:1.14;}
.widex-skin h2{font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.2;}
.widex-skin h3{font-weight:500;font-size:1.2rem;}
.widex-skin p,.widex-skin .lead{color:var(--wx-ink2);}
.widex-skin .lead{font-size:1.08rem;font-weight:400;}

/* Hero — warm stone, big light headline */
.widex-skin .pagehero{background:var(--wx-stone);color:var(--wx-espresso);padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--wx-edge);}
.widex-skin .pagehero::before{display:none;}
.widex-skin .pagehero h1{color:var(--wx-espresso);font-weight:400;}
.widex-skin .pagehero p.sub{color:var(--wx-ink2);}
.widex-skin .crumbs{color:var(--wx-taupe);}
.widex-skin .crumbs a{color:var(--wx-espresso);}
.widex-skin .eyebrow{background:transparent!important;color:var(--wx-taupe)!important;border:none;box-shadow:none;padding:0;margin-bottom:20px;letter-spacing:.14em;font-size:.76rem;text-transform:uppercase;font-weight:600;}
.widex-skin .eyebrow img{filter:none!important;height:15px!important;}

/* Buttons — square, ghost-first, no shadow/gradient */
.widex-skin .btn{border-radius:0;box-shadow:none!important;font-family:"Noto Sans",sans-serif;font-weight:500;letter-spacing:.01em;text-transform:none;transition:.18s ease;}
.widex-skin .btn-cta{background:var(--wx-espresso);color:#fff;border:2px solid var(--wx-espresso);}
.widex-skin .btn-cta:hover{background:var(--wx-taupe-d);border-color:var(--wx-taupe-d);color:#fff;transform:none;}
.widex-skin .btn-outline{background:transparent;border:2px solid var(--wx-espresso);color:var(--wx-espresso);}
.widex-skin .btn-outline:hover{background:var(--wx-espresso);color:#fff;transform:none;}
.widex-skin .btn-lg{padding:15px 28px;font-size:1rem;}
.widex-skin .floatbook{display:none;}

/* Simple surfaces (intro + feature tiles) — flat, square, hairline */
.widex-skin .pf,.widex-skin .ft{background:var(--wx-surface);border:1px solid var(--wx-edge);border-radius:0;box-shadow:none;}
.widex-skin .pf{border-top:none;}
.widex-skin .pf h3,.widex-skin .ft b{color:var(--wx-espresso);}
.widex-skin .ft .ic{background:#E6E1DC;color:var(--wx-espresso);border-radius:0;}
.widex-skin .ft .ic svg{color:var(--wx-espresso);}
.widex-skin .ft span{color:var(--wx-ink2);}

/* ===== Product line-up: horizontal cards + floating detail drawer ===== */
.widex-skin .lineup-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;}
.widex-skin .pcard{background:var(--wx-surface);border:1px solid var(--wx-edge);cursor:pointer;display:flex;flex-direction:column;text-align:left;transition:.18s ease;}
.widex-skin .pcard:hover{background:var(--wx-white);}
.widex-skin .pcard.active{background:var(--wx-white);box-shadow:inset 0 0 0 2px var(--wx-espresso);}
.widex-skin .pcard .pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e7e3df;}
.widex-skin .pcard .pbody{padding:22px 22px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
.widex-skin .pcard h3{font-family:"Montserrat";font-weight:600;font-size:1.1rem;margin:0;color:var(--wx-espresso);}
.widex-skin .pcard p{font-size:.9rem;color:var(--wx-ink2);margin:0;line-height:1.55;}
.widex-skin .pcard .arrow{margin-top:auto;padding-top:14px;font-size:1.25rem;color:var(--wx-espresso);transition:transform .18s ease;}
.widex-skin .pcard.active .arrow{transform:rotate(90deg);}

.widex-skin .lineup-detail{margin-top:18px;background:var(--wx-white);border:1px solid var(--wx-edge);display:none;}
.widex-skin .lineup-detail.open{display:block;animation:wxfade .26s ease;}
@keyframes wxfade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.widex-skin .lineup-detail .inner{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;padding:38px 40px;align-items:center;}
.widex-skin .lineup-detail .shotwrap2{min-height:300px;border:none;background:var(--wx-stone);border-radius:0;box-shadow:none;}
.widex-skin .lineup-detail .modeltag{display:inline-block;background:transparent;color:var(--wx-taupe);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:0;margin-bottom:10px;}
.widex-skin .lineup-detail h3{font-family:"Montserrat";font-weight:400;font-size:1.9rem;margin:0 0 12px;}
.widex-skin .lineup-detail p{color:var(--wx-ink2);font-size:1.02rem;margin:0 0 14px;}
.widex-skin .lineup-detail .closex{float:right;border:none;background:transparent;font-size:1.4rem;line-height:1;color:var(--wx-taupe);cursor:pointer;padding:0 0 0 12px;}
.widex-skin .lineup-detail .closex:hover{color:var(--wx-espresso);}
.widex-skin .specrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.widex-skin .spec{background:var(--wx-stone);border:1px solid var(--wx-edge);color:var(--wx-espresso);border-radius:0;font-weight:500;font-size:.78rem;}
.widex-skin .spec svg{color:var(--wx-taupe);}
.widex-skin .subchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.widex-skin .subchips span{font-size:.74rem;font-weight:600;color:var(--wx-espresso);background:var(--wx-stone);border:1px solid var(--wx-edge);padding:5px 11px;}

/* CTA band — deep espresso */
.widex-skin .ctaband{background:var(--wx-espresso);}
.widex-skin .ctaband h2{color:#fff;}
.widex-skin .ctaband p{color:#d8d2cc;}
.widex-skin .ctaband .btn-cta{background:#fff;color:var(--wx-espresso);border-color:#fff;}
.widex-skin .ctaband .btn-cta:hover{background:var(--wx-stone);color:var(--wx-espresso);border-color:var(--wx-stone);}
.widex-skin .ctaband .btn-outline{border-color:rgba(255,255,255,.7);color:#fff;}
.widex-skin .ctaband .btn-outline:hover{background:#fff;color:var(--wx-espresso);}

@media (max-width:980px){
  .widex-skin .lineup-cards{grid-template-columns:1fr 1fr;}
  .widex-skin .lineup-detail .inner{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:560px){
  .widex-skin .lineup-cards{grid-template-columns:1fr;}
}

  /* card image fill + placeholder */
  .widex-skin .pcard .pic .cardimg{width:100%;height:100%;object-fit:cover;display:block;}
  .widex-skin .pcard .pic .ph{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;padding:14px;text-align:center;}
  .widex-skin .pcard .pic.noimg .cardimg{display:none;}
  .widex-skin .pcard .pic.noimg .ph{display:flex;}
  .widex-skin .pcard .pic .ph img{height:30px;width:auto;max-width:130px;opacity:.4;}
  .widex-skin .pcard .pic .ph small{font-size:.66rem;font-family:ui-monospace,Menlo,Consolas,monospace;background:#fff;border:1px dashed var(--wx-edge);padding:2px 7px;color:var(--wx-taupe);}

  /* ===================== Immersive brand-landing components (Widex) ===================== */
  /* Full-bleed hero — warm, with image + scrim, light Montserrat */
  .widex-skin .pk-hero{position:relative;min-height:clamp(460px,66vh,660px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(160deg,#3a342e 0%,#2A2826 75%);}
  .widex-skin .pk-hero .bg{position:absolute;inset:0;z-index:0;}
  .widex-skin .pk-hero .bg img,.widex-skin .pk-hero .bg video{width:100%;height:100%;object-fit:cover;display:block;}
  .widex-skin .pk-hero .bg.noimg img{display:none;}
  .widex-skin .pk-hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,24,22,.35),rgba(28,24,22,.62));}
  .widex-skin .pk-hero .inner{position:relative;z-index:2;max-width:860px;padding:60px 48px;background:rgba(42,40,38,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px;border:1px solid rgba(255,255,255,.08);}
  .widex-skin .pk-hero .eyebrow{color:var(--wx-espresso)!important;justify-content:center;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.95)!important;padding:7px 16px 7px 10px!important;border-radius:999px!important;box-shadow:0 6px 18px rgba(0,0,0,.22)!important;border:none!important;margin-bottom:22px!important;}
  .widex-skin .pk-hero .eyebrow img{filter:none!important;height:18px!important;width:auto!important;}
  .widex-skin .pk-hero h1{color:#fff;font-weight:400;font-size:clamp(2.7rem,6vw,4.6rem);line-height:1.06;margin:0 0 14px;}
  .widex-skin .pk-hero .tagline{font-family:"Montserrat",sans-serif;font-weight:400;font-size:clamp(1.3rem,3vw,2rem);color:#fff;margin:0 0 16px;}
  .widex-skin .pk-hero p.sub{color:#ece8e4;max-width:62ch;margin:0 auto 26px;font-size:1.1rem;}
  .widex-skin .pk-hero .cta-row{justify-content:center;}
  .widex-skin .pk-hero .btn-cta{background:#fff;color:var(--wx-espresso);border-color:#fff;}
  .widex-skin .pk-hero .btn-cta:hover{background:var(--wx-stone);border-color:var(--wx-stone);color:var(--wx-espresso);}
  .widex-skin .pk-hero .btn-outline{background:transparent;border-color:rgba(255,255,255,.75);color:#fff;}
  .widex-skin .pk-hero .btn-outline:hover{background:#fff;color:var(--wx-espresso);}
  .widex-skin .pk-hero .phslot{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;}
  .widex-skin .pk-hero .phslot small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;background:rgba(255,255,255,.12);border:1px dashed rgba(255,255,255,.4);padding:4px 10px;color:#efe;}

  /* Quick-nav row — minimal, stone circles, espresso icons */
  .widex-skin .pk-quicknav{display:flex;justify-content:center;gap:clamp(22px,5vw,68px);flex-wrap:wrap;padding:38px 24px;background:var(--wx-white);border-bottom:1px solid var(--wx-edge);}
  .widex-skin .pk-quicknav a{display:flex;flex-direction:column;align-items:center;gap:11px;color:var(--wx-espresso);font-weight:600;font-size:.9rem;text-decoration:none;text-align:center;line-height:1.25;}
  .widex-skin .pk-quicknav .circle{width:76px;height:76px;border-radius:50%;background:var(--wx-surface);border:1px solid var(--wx-edge);display:flex;align-items:center;justify-content:center;transition:.18s ease;}
  .widex-skin .pk-quicknav a:hover .circle{transform:translateY(-3px);border-color:var(--wx-taupe);}
  .widex-skin .pk-quicknav .circle svg{width:34px;height:34px;color:var(--wx-espresso);}

  /* Generic split */
  .widex-skin .pk-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,60px);align-items:center;}
  .widex-skin .pk-split.alt .copy{order:2;}
  .widex-skin .pk-bullets{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:15px;}
  .widex-skin .pk-bullets li{display:flex;gap:12px;align-items:flex-start;color:var(--wx-ink2);font-size:1.02rem;line-height:1.55;}
  .widex-skin .pk-bullets li .dot{width:22px;height:22px;border-radius:50%;background:var(--wx-espresso);flex:none;margin-top:2px;display:flex;align-items:center;justify-content:center;}
  .widex-skin .pk-bullets li .dot svg{width:13px;height:13px;color:#fff;}
  .widex-skin .pk-bullets li strong{color:var(--wx-espresso);}

  /* Product media block + placeholder */
  .widex-skin .pk-media{position:relative;border-radius:0;overflow:hidden;min-height:380px;display:flex;align-items:center;justify-content:center;background:var(--wx-surface);border:1px solid var(--wx-edge);}
  .widex-skin .pk-media.dark{background:linear-gradient(150deg,#3a342e,#2A2826);border-color:transparent;}
  .widex-skin .pk-media img.pk-prodimg{max-width:82%;max-height:340px;object-fit:contain;filter:drop-shadow(0 16px 28px rgba(0,0,0,.20));}
  .widex-skin .pk-media .phslot{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:16px;}
  .widex-skin .pk-media .phslot img{height:28px;opacity:.45;}
  .widex-skin .pk-media.dark .phslot img{filter:brightness(0) invert(1);opacity:.6;}
  .widex-skin .pk-media .phslot small{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.68rem;background:#fff;border:1px dashed var(--wx-edge);padding:3px 8px;color:var(--wx-taupe);}
  .widex-skin .pk-media.dark .phslot small{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#efe;}
  .widex-skin .pk-media.noimg img.pk-prodimg{display:none;}
  .widex-skin .pk-media:not(.noimg) .phslot{display:none;}

  /* Compact per-product video (contained to the media column, not full-section
     background) — Lee felt full-bleed section videos on every card were too
     distracting; this keeps the motion small and to the side instead. */
  .widex-skin .pk-media.pk-media-vid{padding:0;max-height:340px;}
  .widex-skin .pk-media-vid video.pk-prodimg{width:100%;height:100%;max-width:100%;max-height:340px;object-fit:cover;filter:none;border-radius:0;}

  /* Product section bands */
  .widex-skin .pk-prod{padding:clamp(3.5rem,7vw,6.5rem) 0;}
  .widex-skin .pk-prod.band{background:var(--wx-surface);}
  .widex-skin .pk-prod.dark{background:var(--wx-espresso);}
  .widex-skin .pk-prod.dark h2,.widex-skin .pk-prod.dark .lead{color:#fff;}
  .widex-skin .pk-prod.dark p{color:#d8d2cc;}
  .widex-skin .pk-prod .modeltag{display:inline-block;background:transparent;color:var(--wx-taupe);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:0;margin-bottom:12px;}
  .widex-skin .pk-prod.dark .modeltag{color:#cdbfae;}
  .widex-skin .pk-prod h2{margin:0 0 14px;}
  .widex-skin .pk-prod .pk-spec{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px;}
  .widex-skin .pk-prod .pk-spec span{display:inline-flex;align-items:center;gap:7px;background:var(--wx-stone);border:1px solid var(--wx-edge);color:var(--wx-espresso);border-radius:0;font-weight:500;font-size:.8rem;padding:7px 12px;}
  .widex-skin .pk-prod.dark .pk-spec span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}
  .widex-skin .pk-prod .pk-spec span svg{width:15px;height:15px;color:var(--wx-taupe);}
  .widex-skin .pk-prod.dark .pk-spec span svg{color:#cdbfae;}
  .widex-skin .pk-prod.dark .pk-media.dark{background:linear-gradient(150deg,#4a4239,#241f1d);}
  .widex-skin .pk-prod.dark .subchips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;}
  .widex-skin .pk-prod.dark .btn-cta{background:#fff;color:var(--wx-espresso);border-color:#fff;}
  .widex-skin .pk-prod.dark .btn-cta:hover{background:var(--wx-stone);color:var(--wx-espresso);border-color:var(--wx-stone);}
  .widex-skin .pk-prod.dark .btn-outline{background:transparent;border-color:rgba(255,255,255,.7);color:#fff;}
  .widex-skin .pk-prod.dark .btn-outline:hover{background:#fff;color:var(--wx-espresso);}

  /* PDF download chips */
  .widex-skin .pdf-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
  .widex-skin .pdf-dl{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--wx-edge);color:var(--wx-espresso);background:transparent;padding:9px 15px;font-size:.86rem;font-weight:500;text-decoration:none;transition:.18s ease;}
  .widex-skin .pdf-dl svg{width:15px;height:15px;flex:none;}
  .widex-skin .pdf-dl:hover{background:var(--wx-espresso);color:#fff;border-color:var(--wx-espresso);}
  .widex-skin .pk-prod.dark .pdf-dl{color:#fff;border-color:rgba(255,255,255,.4);}
  .widex-skin .pk-prod.dark .pdf-dl:hover{background:#fff;color:var(--wx-espresso);border-color:#fff;}

  /* Per-product hero video backgrounds (same pattern as ReSound's Savi/Enzo sections) */
  .widex-skin .pk-prod.vid-bg{position:relative;overflow:hidden;}
  .widex-skin .pk-prod.vid-bg .sect-video{position:absolute;inset:0;z-index:0;}
  .widex-skin .pk-prod.vid-bg .sect-video video{width:100%;height:100%;object-fit:cover;display:block;}
  .widex-skin .pk-prod.vid-bg .sect-video .scrim{position:absolute;inset:0;background:rgba(24,20,18,.72);}
  .widex-skin .pk-prod.vid-bg .container{position:relative;z-index:1;}
  .widex-skin .pk-prod.vid-bg .pk-media.dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);}

  @media (max-width:900px){
    .widex-skin .pk-split{grid-template-columns:1fr;gap:26px;}
    .widex-skin .pk-split.alt .copy{order:0;}
    .widex-skin .pk-media{min-height:280px;}
  }