/*
 * product-v2.css
 * Norman Canada – Product Page V2 (2026 redesign)
 * Namespace: nwf-prod-*
 * Loaded conditionally on product pages via dw_enqueue_product_v2_assets()
 *
 * Design tokens:
 *   --norman-brass:  #AD8546
 *   --norman-black:  #28282B
 *   --norman-white:  #F4F5F0
 *   --norman-linen:  #FAF0E6
 */

/* ====================================================================
   FONT FACES
   ==================================================================== */

@font-face {
  font-family: 'Canela Light';
  src: url('../fonts/Canela-Light-Web.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../../../../uploads/2026/06/ProximaNova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../../../../uploads/2026/06/ProximaNova-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../../../../uploads/2026/06/ProximaNova-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avenir Next';
  src: url('../../../../uploads/2026/06/AvenirNext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ====================================================================
   0. CSS Custom Properties
   ==================================================================== */

:root {
    --norman-brass:       #AD8546;
    --norman-black:       #28282B;
    --norman-white:       #F4F5F0;
    --norman-linen:       #FAF0E6;
    --norman-linen-dark:  #efe8dd;
    --norman-brass-hover: #9a8d38;
    --norman-text-light:  #f5f5f0;
    --norman-text-muted:  #8a8a8a;
    --norman-black-70:    rgba(40, 40, 43, 0.70);
    --norman-black-55:    rgba(40, 40, 43, 0.55);
    --norman-black-28:    rgba(40, 40, 43, 0.28);
    --norman-black-18:    rgba(40, 40, 43, 0.18);
    --norman-black-15:    rgba(40, 40, 43, 0.15);
    --norman-black-13:    rgba(40, 40, 43, 0.13);
    --norman-black-12:    rgba(40, 40, 43, 0.12);
    --norman-white-90:    rgba(244, 245, 240, 0.90);
    --norman-brass-06:    rgba(173, 133, 70, 0.06);

    --nwf-container:  1280px;
    --nwf-gap:        2rem;
    --nwf-radius:     2px;
    --nwf-transition: 0.25s ease;

    --font-heading : 'Canela Light', 'Cormorant Garamond', Georgia, serif;
    --font-title   : 'Proxima Nova', 'Avenir Next', Aptos, sans-serif;
    --font-label   : 'Proxima Nova', 'Avenir Next', Aptos, sans-serif;
    --font-bold    : 'Proxima Nova', 'Avenir Next', Aptos, sans-serif;
    --font-body    : 'Avenir Next', Aptos, Arial, sans-serif;
}

/* ====================================================================
   0.1. Shared – Brass Slick Arrows (.nwf-prod-arrow)
   ==================================================================== */

.nwf-prod-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--norman-white-90);
    border:          1px solid var(--norman-black-18);
    padding:         0;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      border-color var(--nwf-transition), background var(--nwf-transition);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.nwf-prod-arrow:hover {
    border-color: var(--norman-brass);
    background:   var(--norman-brass-06);
}
.nwf-prod-arrow:focus { outline: none; }
.nwf-prod-arrow:focus-visible {
    outline:        2px solid var(--norman-brass);
    outline-offset: 2px;
}
.nwf-prod-arrow--prev { left:  -52px; }
.nwf-prod-arrow--next { right: -52px; }
.nwf-prod-arrow svg   { display: block; flex-shrink: 0; }

/* ====================================================================
   1. Breadcrumbs (.nwf-prod-breadcrumbs)
   ==================================================================== */

.nwf-prod-breadcrumbs {
    background:  #fff;
    padding:     0.75rem 0;
    font-family: var(--font-title);
    font-size:   0.875rem;
    font-weight: 400;
    color:       var(--norman-text-muted);
}
.nwf-prod-breadcrumbs .container {
    max-width: var(--nwf-container);
    margin:    0 auto;
    padding:   0 1.5rem;
}
.nwf-prod-breadcrumbs a {
    color:           var(--norman-black);
    text-decoration: none;
    transition:      color var(--nwf-transition);
}
.nwf-prod-breadcrumbs a:hover { color: var(--norman-brass); }
.nwf-breadcrumb {
    list-style:  none;
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.375rem;
    margin:      0;
    padding:     0;
}
.nwf-breadcrumb__separator    { color: var(--norman-black-28); user-select: none; }
.nwf-breadcrumb__item--current { color: var(--norman-black); font-family: var(--font-label); font-weight: 500; }

/* ====================================================================
   2. Hero (.nwf-prod-hero)
   ==================================================================== */

.nwf-prod-hero {
    display:               grid;
    grid-template-columns: 1fr 2fr;
    min-height:            calc(100vh - 78px);
    background:            #fff;
    color:                 var(--norman-black);
    overflow:              hidden;
    margin-top:            78px;
    padding:               0;
}
.nwf-prod-hero__content {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         4rem 4rem 4rem 5vw;
    gap:             1.25rem;
}
.nwf-prod-hero__breadcrumbs {
    font-family:   var(--font-title);
    font-size:     0.875rem;
    font-weight:   400;
    color:         var(--norman-black-55);
    margin-bottom: 0.25rem;
}
.nwf-prod-hero__breadcrumbs a {
    color:           var(--norman-black-55);
    text-decoration: none;
    transition:      color var(--nwf-transition);
}
.nwf-prod-hero__breadcrumbs a:hover { color: var(--norman-brass); }

.nwf-prod-hero__eyebrow {
    display:        block;
    font-family:    var(--font-label);
    font-size:      0.875rem;
    font-weight:    500;
    letter-spacing: 0.18em;
    color:          var(--norman-brass);
    padding-bottom: 0.6rem;
    position:       relative;
}
.nwf-prod-hero__eyebrow::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    width:      2rem;
    height:     1.5px;
    background: var(--norman-brass);
}
.nwf-prod-hero__heading {
    font-family:    var(--font-heading);
    letter-spacing: 2px;
    font-size:      clamp(1.75rem, 2.5vw, 2.5rem);
    line-height:    1.15;
    font-weight:    300;
    margin:         0;
    color:          var(--norman-black);
}
.nwf-prod-hero__body {
    font-family: var(--font-body);
    font-size:   0.875rem;
    font-weight: 400;
    line-height: 1.7;
    color:       var(--norman-black-70);
    max-width:   520px;
    margin:      0;
}
.nwf-prod-hero__ctas {
    display:    flex;
    flex-wrap:  wrap;
    gap:        1rem;
    margin-top: 0.5rem;
}
.nwf-prod-hero__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.75rem 1.75rem;
    font-family:     var(--font-label);
    font-size:       0.875rem;
    font-weight:     500;
    letter-spacing:  0.1em;
    text-decoration: none;
    border:          1px solid var(--norman-brass);
    transition:      background var(--nwf-transition), color var(--nwf-transition);
    cursor:          pointer;
    white-space:     nowrap;
}
.nwf-prod-hero__btn--primary { background: transparent; color: var(--norman-black); }
.nwf-prod-hero__btn--primary:hover { background: var(--norman-brass); color: var(--norman-black); border-color: var(--norman-brass); }
.nwf-prod-hero__btn--ghost   { background: transparent; color: var(--norman-black); border-color: var(--norman-brass); }
.nwf-prod-hero__btn--ghost:hover { background: var(--norman-black); color: var(--norman-white); }
.nwf-prod-hero__btn-icon     { width: 20px; height: 20px; object-fit: contain; }
.nwf-prod-hero__media {
    position:   relative;
    overflow:   hidden;
    min-height: 400px;
    max-height: calc(100vh - 78px);
}
.nwf-prod-hero__img,
.nwf-prod-hero__video {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

/* ====================================================================
   3. See It In Your Home (.nwf-prod-see-it)
   ==================================================================== */

.nwf-prod-see-it { background: #fff; padding: 2.5rem 0 0; }
.nwf-prod-see-it__inner {
    margin:                0 auto;
    padding:               0 5vw;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   3rem;
    align-items:           start;
}
.nwf-prod-see-it--no-visualizer .nwf-prod-see-it__inner { grid-template-columns: 1fr; }
.nwf-prod-see-it--no-visualizer .nwf-prod-see-it__left  { display: none; }
.nwf-prod-see-it__panel { display: flex; flex-direction: column; gap: 1.5rem; }
.nwf-prod-see-it__title {
    margin:         0 auto 1.5rem;
    font-family:    var(--font-title);
    font-size:      1rem;
    font-weight:    400;
    color:          var(--norman-black);
    letter-spacing: -0.01em;
    width:          100%;
}
.nwf-prod-see-it__tabs {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0;
    border-bottom:   1px solid var(--norman-black-15);
    margin:          0;
    padding:         0;
    list-style:      none;
    justify-content: start;
}
section.nwf-prod-see-it .nwf-prod-see-it__tabs .nav-item  { margin: 0; }
section.nwf-prod-see-it .nwf-prod-see-it__tabs .nav-link {
    display:         block;
    padding:         0.625rem 1.25rem;
    font-family:     var(--font-label);
    font-size:       0.875rem;
    font-weight:     500;
    letter-spacing:  0.08em;
    color:           var(--norman-text-muted);
    border:          none;
    border-bottom:   2px solid transparent;
    border-radius:   0;
    transition:      color var(--nwf-transition), border-color var(--nwf-transition);
    text-decoration: none;
    white-space:     nowrap;
    background:      none;
}
section.nwf-prod-see-it .nwf-prod-see-it__tabs .nav-link:hover  { color: var(--norman-brass); border-color: var(--norman-brass) !important; background: none; box-shadow: none; }
section.nwf-prod-see-it .nwf-prod-see-it__tabs .nav-link.active { color: var(--norman-brass) !important; border-color: var(--norman-brass) !important; background: none !important; box-shadow: none; }
.nwf-prod-see-it__tab-content { min-height: 200px; max-height: 630px; overflow-y: scroll; overflow-x: hidden; margin-bottom: 70px; }
.nwf-prod-see-it__tab-body    { padding: 1.5rem 0; }
.nwf-prod-see-it__mob-title   { display: none; }
.nwf-prod-see-it__tab-content h5 { font-family: var(--font-body); font-weight: 400; }

/* Left column — sticky on desktop so the viewer pins while tabs scroll */
.nwf-prod-see-it__left {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
    position:       sticky;
    top:            96px;          /* fixed header (~78px) + breathing room */
    align-self:     start;         /* required: prevents stretching to row height */
}

/* Viewer wrapper */
.nwf-prod-see-it__viewer {
    position:   relative;
    min-height: 480px;
}

/* Target div — VirtuRoom injects its 3D viewer here via wp_footer.
   Override the plugin's own inline position:sticky / float:left so
   it fills the container naturally. */
.nwf-prod-see-it__viewer #virturoom {
    position:    static  !important;
    float:       none    !important;
    width:       100%    !important;
    margin-left: 0       !important;
    margin-top:  0       !important;
    left:        auto    !important;
    top:         auto    !important;
    height:      auto    !important;
    min-height:  480px;
}

.nwf-prod-see-it__viewer-target,
.nwf-prod-see-it__viewer-placeholder {
    width:      100%;
    min-height: 480px;
}

/* VirtuRoom external controls ("View in My Room" / "Sample Rooms")
   Hidden unless VirtuRoom is active on this product.             */
#virturoom-external-controls {
    display:  none;
}
.nwf-prod-see-it--virturoom #virturoom-external-controls {
    display:     flex;
    flex-wrap:   wrap;
    gap:         1rem;
    margin-top:  1.25rem;
}

/* Style the plugin's buttons to match the Norman brass button system */
#virturoom-external-controls .btn.btn-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.75rem 1.75rem;
    font-family:     var(--font-label);
    font-size:       0.875rem;
    font-weight:     500;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          1px solid var(--norman-brass);
    background:      transparent;
    color:           var(--norman-black);
    transition:      background var(--nwf-transition), color var(--nwf-transition);
    cursor:          pointer;
    white-space:     nowrap;
    border-radius:   0;
    box-shadow:      none;
    line-height:     1;
    height:          auto;
}
#virturoom-external-controls .btn.btn-primary:hover {
    background:    var(--norman-brass);
    color:         var(--norman-black);
    border-color:  var(--norman-brass);
}

/* ====================================================================
   4. Personalize (.nwf-prod-personalize)
   ==================================================================== */

.nwf-prod-personalize { background: #fff; padding: 0; }
.nwf-prod-personalize__inner { margin: 0 auto; padding: 0 5vw; }
.nwf-prod-personalize__head  { margin-bottom: 2rem; }
.nwf-prod-personalize__title { font-family: var(--font-title); font-size: 1rem; font-weight: 400; color: var(--norman-black); margin: 0; letter-spacing: 0.03em; }
.nwf-prod-personalize__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 4 * 1.25rem) / 5), 1fr));
    gap:                   1.25rem;
    align-items:           stretch;
}
.nwf-prod-personalize-card { background: transparent; border: none; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.nwf-prod-personalize-card:hover { box-shadow: none; }
.nwf-prod-personalize-card__img { aspect-ratio: 4 / 3; min-height: 150px; overflow: hidden; flex-shrink: 0; }
.nwf-prod-personalize-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.nwf-prod-personalize-card:hover .nwf-prod-personalize-card__img img { transform: scale(1.04); }
.nwf-prod-personalize-card__body  { display: block !important; padding: 1.25rem 1rem 0; flex: 1 1 auto; }
.nwf-prod-personalize-card__title { display: block !important; font-family: var(--font-bold); font-size: 0.875rem; font-weight: 700; color: var(--norman-black); margin: 0 0 0.5rem; }
.nwf-prod-personalize-card__desc  { display: block !important; font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.6; color: var(--norman-text-muted); margin: 0; }
.nwf-prod-personalize-card__footer { flex-shrink: 0; margin-top: auto; padding: 0.875rem 1rem 1.25rem; }
.nwf-prod-personalize-card__cta {
    display:         inline-block;
    font-family:     var(--font-label);
    font-size:       0.875rem;
    font-weight:     500;
    letter-spacing:  0.1em;
    color:           var(--norman-brass);
    text-decoration: none;
    border-bottom:   1px solid var(--norman-brass);
    padding-bottom:  1px;
    transition:      color var(--nwf-transition), border-color var(--nwf-transition);
}
.nwf-prod-personalize-card__cta:hover { color: var(--norman-brass-hover); border-color: var(--norman-brass-hover); }
.nwf-prod-personalize__slider-wrap { position: relative; padding: 0 5vw; }
.nwf-prod-personalize--slider .nwf-prod-personalize__inner { padding: 0; }
.nwf-prod-personalize--slider .nwf-prod-personalize__head  { padding: 0 5vw; }
.nwf-prod-personalize__slider              { margin: 0 -0.375rem; }
.nwf-prod-personalize__slider .slick-slide { padding: 0 0.375rem; }
.nwf-prod-personalize--slider .slick-track       { display: flex; }
.nwf-prod-personalize--slider .slick-slide        { display: flex; height: auto; }
.nwf-prod-personalize--slider .slick-slide > div  { display: flex; width: 100%; }
.nwf-prod-personalize--slider .nwf-prod-personalize-card { width: 100%; }
.nwf-prod-personalize__slider-wrap .nwf-prod-arrow { top: calc(90vw / 5 * 3 / 8); }

/* ====================================================================
   5. Inspiration (.nwf-prod-inspiration)
   ==================================================================== */

.nwf-prod-inspiration { background: #fff; padding: 2.5rem 0; }
.nwf-prod-inspiration__head { margin: 0 auto 1.75rem; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.nwf-prod-inspiration__title { font-family: var(--font-title); font-size: 1rem; font-weight: 400; color: var(--norman-black); margin: 0; letter-spacing: 0.03em; }
.nwf-prod-inspiration__gallery-link { font-family: var(--font-label); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--norman-brass); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--norman-brass); padding-bottom: 1px; transition: opacity var(--nwf-transition); }
.nwf-prod-inspiration__gallery-link:hover { opacity: 0.75; }
.nwf-prod-inspiration__slider-wrap { position: relative; padding: 0 5vw; }
.nwf-prod-inspiration__slider              { margin: 0 -0.375rem; }
.nwf-prod-inspiration__slider .slick-slide { padding: 0 0.375rem; }
.nwf-prod-inspiration__slide { position: relative; aspect-ratio: 4 / 3; min-height: 200px; overflow: hidden; }
.nwf-prod-inspiration__slide-link { display: block; width: 100%; height: 100%; }
.nwf-prod-inspiration__slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, opacity 0.3s ease; }
.nwf-prod-inspiration__slide:hover img { transform: scale(1.04); }
.nwf-prod-inspiration__slide-link--video { position: relative; }
.nwf-prod-inspiration__play-icon { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 2; pointer-events: none; }
.nwf-prod-inspiration__play-icon img { width: 3.5rem; height: 3.5rem; }

/* ====================================================================
   6. Norman Difference (.nwf-prod-difference)
   ==================================================================== */

.nwf-prod-difference { background: #fff; padding: 2.5rem 0; }
.nwf-prod-difference__container { margin: 0 auto; padding: 0 5vw; }
.nwf-prod-difference__title { font-family: var(--font-title); font-size: 1rem; font-weight: 400; color: var(--norman-black); margin: 0 0 2rem; letter-spacing: 0.03em; }
.nwf-prod-difference__items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.nwf-prod-difference-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.625rem; padding: 0 1.5rem; }
.nwf-prod-difference-item::after { content: ''; position: absolute; top: calc(48px + 1.5rem); bottom: 0.75rem; right: 0; width: 1px; background: transparent; box-shadow: 1px 0 0 0 #AD8546; transform: translateZ(0); }
.nwf-prod-difference-item:last-child::after { display: none; }
.nwf-prod-difference-item__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; }
.nwf-prod-difference-item__icon img { width: 100%; height: 100%; object-fit: contain; }
.nwf-prod-difference-item__title { font-family: var(--font-bold); font-size: 0.875rem; font-weight: 700; color: var(--norman-black); margin: 0; }
.nwf-prod-difference-item__text  { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.55; color: var(--norman-text-muted); margin: 0; }

/* ====================================================================
   7. Testimonials (.nwf-cat-testimonials)
   ==================================================================== */

.nwf-cat-container { width: min(1240px, calc(100% - 96px)); margin: 0 auto; }
.nwf-cat-testimonials { padding: 24px 0; background: linear-gradient(90deg, var(--norman-linen-dark) 0%, var(--norman-white) 100%); }
.nwf-cat-testimonials__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px 42px; gap: 28px; align-items: center; min-height: 150px; }
.nwf-cat-quote-mark { position: static; color: var(--norman-black); font-family: Georgia, "Times New Roman", serif; font-size: 2.625rem; line-height: 1; transform: translateY(-4px); }
.nwf-cat-quote-mark--close { justify-self: center; align-self: center; transform: translateY(-4px); }
.nwf-cat-testimonial { display: none; }
.nwf-cat-testimonial.is-active { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 42px; align-items: center; min-height: 110px; }
.nwf-cat-testimonial__quote { margin: 0; font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.42; color: var(--norman-black); text-align: left; letter-spacing: -0.015em; border: none !important; padding: 0 !important; background: none !important; }
.nwf-cat-testimonial__meta { font-family: var(--font-bold); text-align: left; color: var(--norman-black); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.5; }
.nwf-cat-testimonial__meta::before { content: "\2014"; margin-right: 8px; color: var(--norman-black); }
.nwf-cat-testimonial__meta span { display: block; margin-top: 3px; padding-left: 20px; font-family: var(--font-body); font-weight: 400; color: var(--norman-text-muted); letter-spacing: 0.12em; }
.nwf-cat-testimonial__date { display: block; margin-top: 4px; padding-left: 20px; font-family: var(--font-body); color: var(--norman-text-muted); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.10em; }
.nwf-cat-testimonial-dots { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 0; justify-self: end; align-self: center; }
.nwf-cat-testimonial-dot { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: var(--norman-black-28); cursor: pointer; outline: none; }
.nwf-cat-testimonial-dot:focus,
.nwf-cat-testimonial-dot:focus-visible { outline: none !important; box-shadow: none !important; }
.nwf-cat-testimonial-dot.is-active { background: var(--norman-black); }

/* ====================================================================
   8. FAQ Accordion (.nwf-cat-faq)
   ==================================================================== */

.nwf-cat-faq { padding: 24px 0 30px; background: #fff; }
.nwf-cat-faq__head { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 18px; }
.nwf-cat-faq__title { margin: 0; font-family: var(--font-title); font-size: 1rem; font-weight: 400; letter-spacing: -0.025em; }
.nwf-cat-faq__view  { font-family: var(--font-label); color: var(--norman-black); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.14em; text-decoration: none; white-space: nowrap; }
.nwf-cat-faq__view:hover { color: var(--norman-brass); text-decoration: none; }
.nwf-cat-faq-list { width: 100%; }
.nwf-cat-faq-item            { border-top:    1px solid var(--norman-black-13); }
.nwf-cat-faq-item:last-child { border-bottom: 1px solid var(--norman-black-13); }
.nwf-cat-faq-question { width: 100%; padding: 17px 0; border: 0; background: transparent; display: flex; justify-content: space-between; gap: 24px; align-items: center; font-family: var(--font-body); color: var(--norman-black); font-size: 0.875rem; font-weight: 400; text-align: left; cursor: pointer; outline: none; }
.nwf-cat-faq-question:focus,
.nwf-cat-faq-question:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; }
.nwf-cat-faq-plus  { flex: 0 0 auto; font-size: 1.125rem; line-height: 1; transition: transform 0.25s ease; }
.nwf-cat-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; font-family: var(--font-body); color: var(--norman-text-muted); font-size: 0.875rem; font-weight: 400; line-height: 1.7; }
.nwf-cat-faq-answer p,
.nwf-cat-faq-answer ul,
.nwf-cat-faq-answer ol { margin: 0 0 16px; }
.nwf-cat-faq-answer p:last-child,
.nwf-cat-faq-answer ul:last-child,
.nwf-cat-faq-answer ol:last-child { margin-bottom: 18px; }

/* ====================================================================
   9. Resources & Support (.nwf-prod-resources)
   ==================================================================== */

.nwf-prod-resources { background: #fff; padding: 2.5rem 0; }
.nwf-prod-resources__inner { max-width: var(--nwf-container); margin: 0 auto; padding: 0 1.5rem; }
.nwf-prod-resources__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.nwf-prod-resources__title    { font-family: var(--font-title); font-size: 1rem; font-weight: 400; color: var(--norman-black); margin: 0; }
.nwf-prod-resources__view-all { font-family: var(--font-label); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--norman-brass); text-decoration: none; border-bottom: 1px solid var(--norman-brass); white-space: nowrap; transition: opacity var(--nwf-transition); }
.nwf-prod-resources__view-all:hover { opacity: 0.75; }
.nwf-prod-resources__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.nwf-prod-resources__item { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 0; border-bottom: 1px solid var(--norman-black-12); text-decoration: none; gap: 1rem; transition: color var(--nwf-transition); }
.nwf-prod-resources__item:not(:nth-child(3n))   { padding-right: 2rem; border-right: 1px solid var(--norman-black-12); }
.nwf-prod-resources__item:not(:nth-child(3n+1)) { padding-left: 2rem; }
.nwf-prod-resources__label { font-family: var(--font-title); font-size: 0.875rem; font-weight: 400; color: var(--norman-black); transition: color var(--nwf-transition); }
.nwf-prod-resources__item:hover .nwf-prod-resources__label { color: var(--norman-brass); }
.nwf-prod-resources__plus { flex-shrink: 0; font-size: 1.5rem; font-weight: 300; color: var(--norman-brass); line-height: 1; }

/* ====================================================================
   11. App Promo Banner (.nwf-prod-app-promo)
   ==================================================================== */

.nwf-prod-app-promo { background: #fff; overflow: hidden; }

.nwf-prod-app-promo__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    min-height:            200px;        /* ← reduced further from 260px */
    align-items:           stretch;
}

.nwf-prod-app-promo__img-right { display: none !important; }

.nwf-prod-app-promo__img-left,
.nwf-prod-app-promo__img-right { position: relative; overflow: hidden; }

.nwf-prod-app-promo__img-left  img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.nwf-prod-app-promo__img-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }

/* App-store badge row */
.nwf-prod-app-promo__badges      { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.nwf-prod-app-promo__badge       { display: inline-flex; flex-shrink: 0; transition: opacity var(--nwf-transition), transform var(--nwf-transition); }
.nwf-prod-app-promo__badge:hover { opacity: 0.85; transform: translateY(-2px); }
.nwf-prod-app-promo__badge img   { height: 52px; width: auto; display: block; }
.nwf-prod-app-promo__badge:empty { display: none; }

/* Content column — pushed significantly right */
.nwf-prod-app-promo__content  { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem 4rem 2rem 8rem; gap: 1rem; }  /* ← left padding pushed to 8rem */
.nwf-prod-app-promo__eyebrow  { font-family: var(--font-label); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; color: var(--norman-black); text-transform: uppercase; margin: 0; text-align: left; }
.nwf-prod-app-promo__heading  { font-family: var(--font-heading); font-size: clamp(1.75rem, 2.5vw, 2.5rem); font-weight: 300; line-height: 1.15; color: var(--norman-black); margin: 0; letter-spacing: 0.01em; text-align: left; }
.nwf-prod-app-promo__body     { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.7; color: var(--norman-black-70); margin: 0; max-width: 400px; text-align: left; }



/* ====================================================================
   12. Inspiration Banner (.nwf-prod-insp-banner)
   ==================================================================== */

.nwf-prod-insp-banner { background: var(--norman-linen-dark); overflow: hidden; }
.nwf-prod-insp-banner__inner {
    display:               grid;
    grid-template-columns: 1fr 1.75fr;
    min-height:            300px;
    align-items:           stretch;
}
.nwf-prod-insp-banner__content { display: flex; flex-direction: column; justify-content: center; padding: 3rem 3rem 3rem 5vw; gap: 1rem; }
.nwf-prod-insp-banner__heading { font-family: var(--font-bold); font-size: clamp(1.5rem, 2.2vw, 2.25rem); font-weight: 600; line-height: 1.2; color: var(--norman-black); margin: 0; letter-spacing: -0.01em; }
.nwf-prod-insp-banner__body    { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.7; color: var(--norman-black-70); margin: 0; max-width: 340px; }
.nwf-prod-insp-banner__btn {
    display:         inline-flex;
    align-items:     center;
    align-self:      flex-start;
    padding:         0.75rem 1.75rem;
    font-family:     var(--font-label);
    font-size:       0.875rem;
    font-weight:     500;
    letter-spacing:  0.08em;
    color:           var(--norman-white);
    background:      var(--norman-black);
    border:          1px solid var(--norman-black);
    text-decoration: none;
    margin-top:      0.5rem;
    transition:      background var(--nwf-transition), color var(--nwf-transition), border-color var(--nwf-transition);
    white-space:     nowrap;
}
.nwf-prod-insp-banner__btn:hover { background: var(--norman-brass); border-color: var(--norman-brass); color: var(--norman-black); }
.nwf-prod-insp-banner__img { position: relative; overflow: hidden; min-height: 300px; }
.nwf-prod-insp-banner__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* ====================================================================
   10. Responsive Breakpoints
   ==================================================================== */

@media (max-width: 1400px) {
    .nwf-prod-personalize__slider-wrap .nwf-prod-arrow { top: calc(90vw / 4 * 3 / 8); }
}

@media (max-width: 1200px) {
    .nwf-prod-hero__heading { font-size: 2rem; }
    .nwf-prod-see-it__inner { gap: 2rem; }
    .nwf-prod-personalize__slider-wrap .nwf-prod-arrow { top: calc(90vw / 3 * 3 / 8); }
}

@media (max-width: 992px) {
    .nwf-prod-hero                  { grid-template-columns: 1fr; min-height: auto; }
    .nwf-prod-hero__media           { order: -1; aspect-ratio: 16 / 9; min-height: 220px; max-height: 380px; }
    .nwf-prod-hero__content         { padding: 2.5rem 1.5rem; }
    .nwf-prod-hero__heading         { font-size: 1.75rem; }
    .nwf-prod-see-it__inner         { grid-template-columns: 1fr; }
    .nwf-prod-see-it__left          { position: static; }
    .nwf-prod-see-it__tabs          { display: none; }
    .nwf-prod-see-it__mob-title     { display: block; padding: 1rem 0; font-family: var(--font-label); font-size: 0.875rem; font-weight: 500; color: var(--norman-black); cursor: pointer; border-bottom: 1px solid var(--norman-black-12); }
    .nwf-prod-resources__grid       { grid-template-columns: 1fr; }
    .nwf-prod-resources__item:not(:nth-child(3n))   { padding-right: 0; border-right: none; }
    .nwf-prod-resources__item:not(:nth-child(3n+1)) { padding-left: 0; }
    .nwf-prod-difference__items     { grid-template-columns: repeat(2, 1fr); }
    .nwf-prod-difference-item::after { display: none; }
    .nwf-prod-personalize__grid     { grid-template-columns: repeat(auto-fit, minmax(calc((100% - 2 * 1.25rem) / 3), 1fr)); }
    .nwf-prod-arrow--prev           { left:  -40px; }
    .nwf-prod-arrow--next           { right: -40px; }
    /* App Promo */
    .nwf-prod-app-promo__inner      { grid-template-columns: 1fr 2fr; }
    .nwf-prod-app-promo__img-right  { display: none; }
    /* Inspiration Banner */
    .nwf-prod-insp-banner__inner    { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .nwf-prod-hero__heading         { font-size: 1.5rem; }
    .nwf-prod-hero__content         { padding: 2rem 1.25rem; }
    .nwf-prod-hero__ctas            { flex-direction: column; }
    .nwf-prod-hero__btn             { justify-content: center; }
    .nwf-prod-personalize__grid     { grid-template-columns: repeat(auto-fit, minmax(calc((100% - 1.25rem) / 2), 1fr)); }
    .nwf-prod-inspiration__slider-wrap,
    .nwf-prod-personalize__slider-wrap  { padding: 0 56px; }
    .nwf-prod-personalize__slider-wrap .nwf-prod-arrow { top: calc((100vw - 112px) / 2 * 3 / 8); }
    .nwf-cat-testimonials__inner    { grid-template-columns: 1fr; gap: 14px; padding: 0 20px; }
    .nwf-cat-quote-mark             { font-size: 2.375rem; opacity: 0.25; transform: none; }
    .nwf-cat-quote-mark--close      { display: none; }
    .nwf-cat-testimonial.is-active  { grid-template-columns: 1fr; gap: 18px; }
    .nwf-cat-testimonial__quote     { text-align: left; font-size: 0.875rem; }
    .nwf-cat-testimonial__meta      { text-align: left; }
    .nwf-cat-testimonial-dots       { justify-content: flex-start; }
    .nwf-cat-faq__head              { flex-direction: column; align-items: flex-start; }
    .nwf-prod-resources__head       { flex-direction: column; align-items: flex-start; }
    .nwf-prod-inspiration__head     { flex-direction: column; align-items: flex-start; }
    .nwf-prod-difference__items     { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    /* App Promo */
    .nwf-prod-app-promo__inner      { grid-template-columns: 1fr; }
    .nwf-prod-app-promo__img-left   { min-height: 260px; }
    .nwf-prod-app-promo__img-right  { display: none; }
    .nwf-prod-app-promo__content    { padding: 2.5rem 1.5rem; }
    .nwf-prod-app-promo__badges     { flex-direction: column; align-items: flex-start; }
    /* Inspiration Banner */
    .nwf-prod-insp-banner__inner    { grid-template-columns: 1fr; }
    .nwf-prod-insp-banner__img      { min-height: 220px; }
    .nwf-prod-insp-banner__content  { padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
    .nwf-prod-inspiration__slider-wrap,
    .nwf-prod-personalize__slider-wrap  { padding: 0 52px; }
    .nwf-prod-personalize__slider-wrap .nwf-prod-arrow { top: calc((100vw - 104px) * 3 / 8); }
    .nwf-prod-arrow--prev           { left:  -40px; }
    .nwf-prod-arrow--next           { right: -40px; }
    /* App Promo */
    .nwf-prod-app-promo__content    { padding: 2rem 1.25rem; }
    .nwf-prod-app-promo__heading    { font-size: 1.5rem; }
    /* Inspiration Banner */
    .nwf-prod-insp-banner__content  { padding: 1.75rem 1.25rem; }
    .nwf-prod-insp-banner__heading  { font-size: 1.4rem; }
}

/* overflow-x: clip does NOT create a scroll container (unlike hidden),
   so position:sticky on child elements still works correctly. */
.nwf-prod-page {
    display:    block;
    width:      100%;
    overflow-x: hidden;
}
.nwf-prod-see-it--visualizer-only .nwf-prod-see-it__stacked-viewer {
    width:      100%;
    min-height: 600px;
}

.nwf-prod-see-it--visualizer-only #virturoom {
    position:   static  !important;
    float:      none    !important;
    width:      100%    !important;
    margin:     0       !important;
    min-height: 600px;
}

@media (max-width: 768px) {
    .nwf-prod-see-it--visualizer-only .nwf-prod-see-it__stacked-viewer,
    .nwf-prod-see-it--visualizer-only #virturoom {
        min-height: 400px;
    }
}