/* WFMA Portfolio Manager 0.1 — deliberately scoped to .wfma-pm only. */
.wfma-pm{--wfma-navy:#103c56;--wfma-sand:#ddc8a6;--wfma-ink:#232b32;--wfma-muted:#69737a;color:var(--wfma-ink);font-family:inherit;overflow:clip;max-width:none;width:100%;}
.wfma-pm *{box-sizing:border-box}
.wfma-pm h1,.wfma-pm h2,.wfma-pm p{margin-top:0}
.wfma-pm .wfma-pm-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
.wfma-pm .wfma-pm-kicker,.wfma-pm .wfma-pm-eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#917950}
.wfma-pm-hero{position:relative;isolation:isolate;min-height:450px;height:clamp(440px,49vw,760px);background:#045a67;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wfma-pm-hero picture{position:absolute;inset:0;display:block;z-index:-1}
.wfma-pm-hero__image{display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
.wfma-pm-hero--top .wfma-pm-hero__image{object-position:top}
.wfma-pm-hero--bottom .wfma-pm-hero__image{object-position:bottom}
.wfma-pm-hero__content{text-align:center;color:#fff;padding:36px 20px;max-width:min(92%,1050px)}
.wfma-pm-hero__content:empty{display:none}
.wfma-pm-hero__content .wfma-pm-eyebrow{color:#f7f2e6}
.wfma-pm-hero__logo{display:block;max-width:min(390px,60vw)!important;width:auto!important;height:auto!important;max-height:160px!important;margin:0 auto 30px}
.wfma-pm-hero h1{font-weight:500;font-size:clamp(25px,4.2vw,63px);letter-spacing:.12em;line-height:1.17;text-transform:uppercase;color:#fff;margin-bottom:0}
.wfma-pm-details{position:relative;z-index:5;margin:-64px auto 70px;max-width:1100px;padding:0 18px}
.wfma-pm-details__card{display:grid;grid-template-columns:minmax(200px,.9fr) 1.5fr;gap:clamp(22px,4vw,65px);padding:clamp(25px,4vw,48px);background:#fff;box-shadow:0 14px 38px rgba(21,43,55,.12)}
.wfma-pm-details__lead h2{font-size:clamp(23px,2.8vw,33px);line-height:1.2;margin:10px 0 18px;color:#232b32}
.wfma-pm-details__brand{display:block;color:#ae8c56;font-size:17px}
.wfma-pm-details__facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:23px 30px}
.wfma-pm-details__facts div{min-width:0}
.wfma-pm-details__facts dt{font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#869098;font-weight:700;margin:0 0 6px}
.wfma-pm-details__facts dd{margin:0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.wfma-pm-heading{text-align:center;max-width:850px;margin:54px auto 28px;padding:0 18px}
.wfma-pm-heading h2{font-size:clamp(26px,3vw,42px);line-height:1.2;margin:8px 0 0}
.wfma-pm-text{padding:42px 20px;margin:auto}
.wfma-pm-text__inner{max-width:900px;margin:auto;font-size:clamp(16px,1.35vw,19px);line-height:1.75}
.wfma-pm-text h2{font-size:clamp(27px,3vw,38px);margin-bottom:22px}
.wfma-pm-image{max-width:1100px;margin:32px auto 46px;padding:0 18px}
.wfma-pm-image--narrow{max-width:760px}
.wfma-pm-image--full{max-width:none;padding:0}
.wfma-pm-image img{display:block;width:100%;height:auto;max-width:100%}
.wfma-pm-image figcaption{text-align:center;color:var(--wfma-muted);font-size:13px;padding:12px}
.wfma-pm-gallery{padding:54px 18px 80px;text-align:center}
.wfma-pm-gallery--navy{background:var(--wfma-navy);color:#fff}
.wfma-pm-gallery--sand{background:var(--wfma-sand)}
.wfma-pm-gallery--white{background:#fff}
.wfma-pm-gallery h2{font-size:clamp(25px,3vw,40px);line-height:1.2;margin-bottom:28px;color:inherit}
.wfma-pm-gallery__grid{max-width:980px;display:grid;gap:5px;margin:0 auto}
.wfma-pm-gallery__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wfma-pm-gallery__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wfma-pm-gallery__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wfma-pm-gallery__item{overflow:hidden;aspect-ratio:1/1}
.wfma-pm-gallery__item img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.wfma-pm-reels{position:relative;padding:60px 20px 90px;overflow:hidden}
.wfma-pm-reels--sand{background:linear-gradient(to bottom,#fff 0,#fff 20%,var(--wfma-sand) 20%,var(--wfma-sand) 88%,#fff 88%)}
.wfma-pm-reels--white{background:#fff}
.wfma-pm-reels--navy{background:var(--wfma-navy);color:#fff}
.wfma-pm-reels__header{text-align:center;margin:0 auto 45px}
.wfma-pm-reels__header h2{font-size:clamp(26px,3vw,40px);color:inherit;margin-bottom:5px}
.wfma-pm-reels__header p{font-size:14px;color:inherit;opacity:.72}
.wfma-pm-reels__stage{position:relative;max-width:1120px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 12%;align-items:start;margin:0 auto}
.wfma-pm-reels__item{width:100%;position:relative;z-index:2;min-width:0}
.wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd){padding-top:75px}
.wfma-pm-reels__item .wfma-social-phone{max-width:min(var(--wfma-phone-max-width,390px),100%);margin:0 auto}
.wfma-pm-reels__decoration{position:absolute;font-size:clamp(38px,4.5vw,70px);pointer-events:none;z-index:1;line-height:1}
.wfma-pm-reels__decoration--1{top:5%;left:0}
.wfma-pm-reels__decoration--2{top:32%;right:1%}
.wfma-pm-reels__decoration--3{bottom:28%;left:3%}
.wfma-pm-reels__decoration--4{bottom:10%;right:4%}
.wfma-pm-reels__decoration--5{bottom:4%;left:39%}
.wfma-pm-reels__decoration--6{top:47%;left:47%}
.wfma-pm-reels__fallback{display:block;max-width:310px;margin:0 auto;color:#fff;background:#17252d;text-decoration:none}
.wfma-pm-reels__fallback img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover}
.wfma-pm-reels__fallback span{display:block;padding:12px}
.wfma-pm-cta{text-align:center;padding:70px 20px;background:#f6f7f6}
.wfma-pm-cta h2{font-size:clamp(25px,3vw,40px)}
.wfma-pm-cta p{max-width:680px;margin:0 auto 25px;line-height:1.6}
.wfma-pm-cta__link{display:inline-block;padding:13px 25px;background:#142f40;color:#fff!important;text-decoration:none;border-radius:3px}
@media(max-width:767px){
    .wfma-pm-hero{height:clamp(470px,110vw,650px)}
    .wfma-pm-hero__logo{max-width:70vw!important}
    .wfma-pm-details{margin:-28px auto 48px}
    .wfma-pm-details__card{grid-template-columns:1fr;gap:25px;padding:26px 22px}
    .wfma-pm-details__facts{gap:20px 12px}
    .wfma-pm-details__facts dd{font-size:13px}
    .wfma-pm-gallery{padding:42px 12px 55px}
    .wfma-pm-gallery__grid{gap:3px}
    .wfma-pm-reels{padding:42px 12px 60px}
    .wfma-pm-reels__stage{grid-template-columns:1fr;gap:26px}
    .wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd){padding-top:0}
    .wfma-pm-reels__item .wfma-social-phone{max-width:min(320px,88vw)}
    .wfma-pm-reels__decoration{font-size:clamp(34px,9vw,52px)}
    .wfma-pm-reels__decoration--1{left:0;top:8%}
    .wfma-pm-reels__decoration--2{right:0;top:34%}
    .wfma-pm-reels__decoration--3{left:1%;bottom:25%}
    .wfma-pm-reels__decoration--4{right:0;bottom:7%}
}

/* v0.7: FULL WIDTH WITHOUT VIEWPORT OFFSET.
 * The dedicated template handles layout itself. The legacy 100vw/left:50%/-50vw
 * rules fought the v0.6 template reset and moved the page 50vw to the left.
 * Keep the plugin's own wrapper at 100% of its containing full-width main.
 */
body.single-portfolio #wfma-pm-main.wfma-pm-template {
    display: block;
    clear: both;
    width: 100%;
    max-width: none;
    min-height: 1px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
}
body.single-portfolio #wfma-pm-main.wfma-pm-template > .wfma-pm--portfolio {
    display: block;
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box;
}
body.single-portfolio #wfma-pm-main.wfma-pm-template .wfma-pm-hero,
body.single-portfolio #wfma-pm-main.wfma-pm-template .wfma-pm-gallery,
body.single-portfolio #wfma-pm-main.wfma-pm-template .wfma-pm-reels {
    width: 100%;
    max-width: none;
}

/* v0.10: backgrounds are optional per section; styles are injected inline only
 * when a custom color or media-library background image is selected. */
.wfma-pm .wfma-pm-hero,
.wfma-pm .wfma-pm-gallery,
.wfma-pm .wfma-pm-reels,
.wfma-pm .wfma-pm-heading,
.wfma-pm .wfma-pm-text,
.wfma-pm .wfma-pm-cta,
.wfma-pm .wfma-pm-image,
.wfma-pm .wfma-pm-details__card { background-repeat:no-repeat; }

/* v0.11: unframed videos still use each Reel's selected width. */
.wfma-pm-reels__item > .wfma-social-video{max-width:min(var(--wfma-pm-video-width,285px),100%);margin-inline:auto}


/* v0.11.1: The Uncode site uses a dark body/page background. Its color was
 * showing through the transparent Portfolio Manager wrapper below the hero
 * and around the floating details card. Give opted-in portfolio content a
 * white base, independently of the theme's own color scheme.
 *
 * Existing per-section color/image backgrounds retain precedence because
 * they are painted by the section itself (or inline on the Details card).
 * Footer lives outside #wfma-pm-main and is intentionally untouched.
 */
body.single-portfolio #wfma-pm-main.wfma-pm-template {
    background-color: #fff;
}
body.single-portfolio #wfma-pm-main.wfma-pm-template > .wfma-pm--portfolio {
    display: flow-root !important;
    background-color: #fff;
}


/* v0.12: Opt-in PDF-inspired layout controls; defaults preserve v0.11.1. */
.wfma-pm .wfma-pm-hero--height-compact {height:clamp(300px,32vw,500px);min-height:300px}
.wfma-pm .wfma-pm-hero--height-full {height:min(100svh,920px);min-height:560px}
.wfma-pm .wfma-pm-details--large{max-width:1250px}
/* v0.12.1: A compact PDF-style card with three balanced visual columns:
   a wider title/logo lead + two facts columns. Scope changes to LARGE only. */
.wfma-pm .wfma-pm-details--large .wfma-pm-details__card{
  grid-template-columns:minmax(0,1.18fr) minmax(0,1.45fr);
  gap:clamp(20px,2.8vw,42px);
  padding:clamp(26px,2.8vw,40px) clamp(26px,3.2vw,46px);
  align-items:center;
}
.wfma-pm .wfma-pm-details--large .wfma-pm-details__lead{min-width:0}
.wfma-pm .wfma-pm-details--large .wfma-pm-details__lead h2{
  font-size:clamp(25px,2.1vw,33px);
  line-height:1.16;
  letter-spacing:-.015em;
  margin:8px 0 12px;
  overflow-wrap:normal;
}
.wfma-pm .wfma-pm-details--large .wfma-pm-details__facts{
  grid-template-columns:minmax(0,1fr) minmax(0,1.23fr);
  column-gap:clamp(18px,2.3vw,32px);
  row-gap:clamp(13px,1.35vw,19px);
  align-items:start;
}
.wfma-pm .wfma-pm-details--large .wfma-pm-details__facts dd{
  font-size:clamp(13px,1.05vw,15px);
  line-height:1.45;
  overflow-wrap:break-word;
}
/* Existing standard cards retain their existing logo sizing. In Large mode
   explicitly upscale the image rather than only setting a max-width. */
.wfma-pm .wfma-pm-details__brand-logo{display:block;object-fit:contain;object-position:left center;max-width:min(240px,100%);max-height:85px;width:auto;height:auto;margin-top:12px}
.wfma-pm .wfma-pm-details--large .wfma-pm-details__brand-logo{
  display:block;
  width:min(215px,100%)!important;
  max-width:100%!important;
  height:auto!important;
  max-height:82px!important;
  margin:8px 0 0;
  object-fit:contain!important;
  object-position:left center!important;
}
.wfma-pm .wfma-pm-gallery__grid{max-width:var(--wfma-pm-gallery-grid-width,980px)}
.wfma-pm .wfma-pm-gallery__grid--shadow-soft{box-shadow:0 12px 40px rgba(0,0,0,.18)}
.wfma-pm .wfma-pm-gallery__grid--shadow-strong{box-shadow:0 20px 60px rgba(0,0,0,.32)}
.wfma-pm .wfma-pm-gallery--transition{background:linear-gradient(to bottom,#fff 0,#fff var(--wfma-pm-gallery-transition,35%),var(--wfma-pm-gallery-lower,var(--wfma-navy)) var(--wfma-pm-gallery-transition,35%),var(--wfma-pm-gallery-lower,var(--wfma-navy)) 100%);color:#fff}
.wfma-pm .wfma-pm-gallery--transition h2{color:var(--wfma-ink)}
.wfma-pm .wfma-pm-reels__stage{max-width:var(--wfma-pm-stage-width,1120px);row-gap:var(--wfma-pm-reel-gap,50px)}
.wfma-pm .wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd){padding-top:var(--wfma-pm-stagger-offset,75px)}
.wfma-pm .wfma-pm-reels__asset{position:absolute;z-index:1;display:block;width:min(var(--wfma-pm-decor-size,100px),18%);pointer-events:none;line-height:0}
.wfma-pm .wfma-pm-reels__asset img{display:block;max-width:100%;width:100%;height:auto;object-fit:contain}
.wfma-pm .wfma-pm-reels__asset--top-left{top:0;left:0}
.wfma-pm .wfma-pm-reels__asset--top-right{top:0;right:0}
.wfma-pm .wfma-pm-reels__asset--middle-left{top:43%;left:0}
.wfma-pm .wfma-pm-reels__asset--middle-right{top:43%;right:0}
.wfma-pm .wfma-pm-reels__asset--bottom-left{bottom:0;left:0}
.wfma-pm .wfma-pm-reels__asset--bottom-right{bottom:0;right:0}
.wfma-pm .wfma-pm-reels__watermark{position:absolute;bottom:1%;left:1%;font-size:clamp(75px,15vw,240px);font-weight:800;letter-spacing:-.045em;line-height:1;color:rgba(255,255,255,.45);white-space:nowrap;max-width:100%;overflow:hidden;pointer-events:none;z-index:0}
@media(max-width:767px){
  .wfma-pm .wfma-pm-hero--height-compact{height:clamp(300px,72vw,460px);min-height:300px}
  .wfma-pm .wfma-pm-hero--height-full{height:90svh;min-height:440px}
  .wfma-pm .wfma-pm-details--large .wfma-pm-details__card{padding:26px 22px}
  .wfma-pm .wfma-pm-gallery__grid{max-width:100%}
  .wfma-pm .wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd){padding-top:0}
  .wfma-pm .wfma-pm-reels__watermark{font-size:clamp(50px,18vw,110px)}
  .wfma-pm .wfma-pm-reels__asset{width:min(var(--wfma-pm-decor-size,100px),22%)}
}

.wfma-pm .wfma-pm-gallery--sand.wfma-pm-gallery--transition{--wfma-pm-gallery-lower:var(--wfma-sand)}
.wfma-pm .wfma-pm-gallery--white.wfma-pm-gallery--transition{--wfma-pm-gallery-lower:#fff}

/* v0.12.1: permit longer titles and labels without overflow on tablets/phones.
   The standard card and all other sections are unchanged. */
@media (max-width:950px){
  .wfma-pm .wfma-pm-details--large .wfma-pm-details__card{
    grid-template-columns:minmax(0,1fr);
    gap:22px;
    align-items:start;
  }
  .wfma-pm .wfma-pm-details--large .wfma-pm-details__lead h2{
    font-size:clamp(26px,3.6vw,33px);
  }
}
@media (max-width:540px){
  .wfma-pm .wfma-pm-details--large .wfma-pm-details__card{
    padding:24px 20px;
    gap:20px;
  }
  .wfma-pm .wfma-pm-details--large .wfma-pm-details__facts{
    grid-template-columns:minmax(0,1fr);
    row-gap:13px;
  }
  .wfma-pm .wfma-pm-details--large .wfma-pm-details__brand-logo{
    width:min(185px,100%)!important;
  }
}


/* v0.13: opt-in decorative controls. Defaults preserve existing layouts. */
.wfma-pm .wfma-pm-reels--sand{
  background:linear-gradient(to bottom,
    #fff 0%,#fff var(--wfma-pm-sand-start,20%),
    var(--wfma-sand) var(--wfma-pm-sand-start,20%),
    var(--wfma-sand) var(--wfma-pm-sand-end,88%),
    #fff var(--wfma-pm-sand-end,88%),#fff 100%);
}
.wfma-pm .wfma-pm-reels__tiktok-logo{
  position:absolute;z-index:3;pointer-events:none;line-height:0;
  width:min(var(--wfma-pm-logo-width,130px),26%);
  left:var(--wfma-pm-logo-x,8%);top:var(--wfma-pm-logo-y,0%);
  transform:translate(-50%,-50%);
}
.wfma-pm .wfma-pm-reels__tiktok-logo img{
  display:block;width:100%;height:auto;max-width:none;object-fit:contain;
}
.wfma-pm .wfma-pm-reels__asset--custom{
  left:var(--wfma-pm-decor-x,50%)!important;right:auto!important;
  top:var(--wfma-pm-decor-y,50%)!important;bottom:auto!important;
  transform:translate(-50%,-50%);
}
.wfma-pm .wfma-pm-reels__watermark{
  left:var(--wfma-pm-watermark-x,1%);
  bottom:var(--wfma-pm-watermark-bottom,1%);
  font-size:clamp(40px,15vw,var(--wfma-pm-watermark-size,240px));
  color:rgba(255,255,255,var(--wfma-pm-watermark-opacity,.45));
}
.wfma-pm .wfma-pm-gallery{position:relative;isolation:isolate;overflow:hidden}
.wfma-pm .wfma-pm-gallery h2{position:relative;z-index:1}
.wfma-pm .wfma-pm-gallery__grid{position:relative;z-index:1}
.wfma-pm .wfma-pm-gallery__mark{
  position:absolute;z-index:0;pointer-events:none;line-height:0;
  width:min(var(--wfma-pm-gallery-mark-width,480px),90%);
  right:var(--wfma-pm-gallery-mark-right,2%);
  top:0;
  bottom:var(--wfma-pm-gallery-mark-bottom,5%);
  display:flex;align-items:flex-end;justify-content:flex-end;
  opacity:var(--wfma-pm-gallery-mark-opacity,.10);
}
/* In split galleries the mark stays below the white/navy boundary. */
.wfma-pm .wfma-pm-gallery--transition .wfma-pm-gallery__mark{
  top:var(--wfma-pm-gallery-transition,35%);
}
.wfma-pm .wfma-pm-gallery__mark img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;object-position:bottom right;
}
@media(max-width:767px){
  /* On mobile the logo becomes its own grid row: no title/phone overlap. */
  .wfma-pm .wfma-pm-reels__tiktok-logo{
    position:relative;left:auto;top:auto;transform:none;
    grid-column:1;justify-self:center;margin:0 auto 10px;
    width:min(var(--wfma-pm-logo-width,130px),42%);
  }
  .wfma-pm .wfma-pm-gallery__mark{width:min(var(--wfma-pm-gallery-mark-width,480px),72%)}
  .wfma-pm .wfma-pm-reels__asset--custom{width:min(var(--wfma-pm-decor-size,100px),24%)}
}


/* v0.14 — split background colors + opt-in full-bleed image options.
   The page stays full-width in the dedicated Uncode template. */
.wfma-pm .wfma-pm-reels--sand{
  background:linear-gradient(to bottom,
    var(--wfma-pm-stage-top,#fff) 0%,
    var(--wfma-pm-stage-top,#fff) var(--wfma-pm-sand-start,20%),
    var(--wfma-pm-stage-band,var(--wfma-sand)) var(--wfma-pm-sand-start,20%),
    var(--wfma-pm-stage-band,var(--wfma-sand)) var(--wfma-pm-sand-end,88%),
    #fff var(--wfma-pm-sand-end,88%),#fff 100%);
}
.wfma-pm .wfma-pm-reels--dark-top .wfma-pm-reels__header,
.wfma-pm .wfma-pm-reels--dark-top .wfma-pm-reels__header h2,
.wfma-pm .wfma-pm-reels--dark-top .wfma-pm-reels__header p{color:#fff}
/* Grid may occupy the full viewport/container width, not merely 1160px. */
.wfma-pm .wfma-pm-gallery--grid-full{padding-left:0;padding-right:0}
.wfma-pm .wfma-pm-gallery__grid--full{width:100%;max-width:100%;}
/* Existing single-image Full Width is also true 100% in the full-width template. */
.wfma-pm .wfma-pm-image--full{width:100%;max-width:none;margin-inline:0;padding-inline:0}
/* Large transparent decoration can be as wide as the viewport;
   its center is anchored to the stage and is clipped to the Portfolio. */
.wfma-pm .wfma-pm-reels__asset--full{
  width:100vw!important;max-width:none!important;
  left:50%!important;right:auto!important;
  transform:translateX(-50%);
}
.wfma-pm .wfma-pm-reels__asset--full.wfma-pm-reels__asset--custom{
  left:var(--wfma-pm-decor-x,50%)!important;
  transform:translate(-50%,-50%);
}
.wfma-pm .wfma-pm-reels__asset--full img{width:100%;max-width:none;height:auto;}
.wfma-pm .wfma-pm-reels__tiktok-logo--full{
  width:100vw!important;max-width:none!important;
  left:50%!important;transform:translate(-50%,-50%);
}
.wfma-pm .wfma-pm-gallery__mark--full{width:100%!important;max-width:none!important;right:0!important}
@media(max-width:767px){
  .wfma-pm .wfma-pm-gallery--grid-full{padding-left:0;padding-right:0}
  .wfma-pm .wfma-pm-reels__tiktok-logo--full{position:absolute;left:50%!important;top:var(--wfma-pm-logo-y,0%);grid-column:auto;margin:0}
}
.wfma-pm .wfma-pm-gallery__mark--full img{width:100%;height:auto;max-height:100%;object-fit:contain;}

/* v0.14.1 — FULL WIDTH stage: actual 100% of the Portfolio/viewport,
   not a fixed 1300px cap. Existing stage widths remain unchanged. */
.wfma-pm .wfma-pm-reels--stage-full{padding-inline:0}
.wfma-pm .wfma-pm-reels--stage-full > .wfma-pm-reels__header{padding-inline:20px}
.wfma-pm .wfma-pm-reels--stage-full > .wfma-pm-reels__stage{
  box-sizing:border-box;width:100%;max-width:none;
}
@media(max-width:767px){
  .wfma-pm .wfma-pm-reels--stage-full > .wfma-pm-reels__header{padding-inline:12px}
}


/* v0.15.0 — The Ads two-layer TikTok Studio architecture.
 * Background/colors/decorations: full-bleed 100% of the section.
 * Transparent phone layer: automatically matches Gallery grid and info card.
 * Old width settings in post meta are intentionally ignored, not deleted.
 */
.wfma-pm .wfma-pm-reels--layered {
  position:relative;
  isolation:isolate;
  padding-inline:0;
  width:100%;
}
.wfma-pm .wfma-pm-reels--layered > .wfma-pm-reels__header {
  position:relative;
  z-index:2;
  padding-inline:18px;
}
.wfma-pm .wfma-pm-reels__scene {
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
}
.wfma-pm .wfma-pm-reels__backdrop {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  max-width:none;
  pointer-events:none;
}
.wfma-pm .wfma-pm-reels__scene > .wfma-pm-reels__stage {
  box-sizing:border-box;
  position:relative;
  z-index:2;
  width:min(var(--wfma-pm-aligned-width,1160px),calc(100% - 36px));
  max-width:none;
  margin-inline:auto;
  padding:0;
  background:transparent;
}
/* Preserve the card's padding while matching the visible card to the gallery.
   E.g. Gallery 1160px -> card outer 1196px (18px padding each side). */
.wfma-pm.wfma-pm--layered-layout .wfma-pm-details {
  max-width:calc(var(--wfma-pm-aligned-width,1160px) + 36px);
}
/* Legacy full-width decoration class now uses the true backdrop width,
   not 100vw plus a scrollbar or the narrow phone-grid coordinate space. */
.wfma-pm .wfma-pm-reels__backdrop .wfma-pm-reels__asset--full,
.wfma-pm .wfma-pm-reels__backdrop .wfma-pm-reels__tiktok-logo--full {
  width:100%!important;
  max-width:none!important;
}
@media(max-width:767px){
  .wfma-pm .wfma-pm-reels--layered > .wfma-pm-reels__header{padding-inline:12px}
  .wfma-pm .wfma-pm-reels__scene > .wfma-pm-reels__stage{
    width:calc(100% - 24px);
    max-width:none;
  }
  /* Unlike the old phone-grid logo rule, the logo stays in the background layer. */
  .wfma-pm .wfma-pm-reels__backdrop .wfma-pm-reels__tiktok-logo{
    position:absolute;
    grid-column:auto;
    left:var(--wfma-pm-logo-x,8%);
    top:var(--wfma-pm-logo-y,0%);
    transform:translate(-50%,-50%);
    margin:0;
    width:min(var(--wfma-pm-logo-width,130px),42%);
  }
  .wfma-pm .wfma-pm-reels__backdrop .wfma-pm-reels__tiktok-logo--full{
    width:100%!important;
    left:50%!important;
  }
}
/* Keep mobile visible card aligned with the 12px Gallery and phone-layer gutters. */
@media(max-width:767px){
  .wfma-pm.wfma-pm--layered-layout .wfma-pm-details{
    padding-inline:12px;
    max-width:calc(var(--wfma-pm-aligned-width,1160px) + 24px);
  }
}

/* v0.16 — Social Media Showcase: opt-in, PDF-inspired, no per-item positioning.
 * The decorative layer is full bleed; the transparent phone grid matches the
 * Gallery/card width. Existing classic Reels keep v0.15 styles untouched.
 */
.wfma-pm .wfma-pm-reels--showcase{
  --wfma-pm-showcase-split:29%;
  padding:clamp(52px,5vw,82px) 0 clamp(72px,6vw,105px);
  background:linear-gradient(to bottom,
    var(--wfma-pm-stage-top,#fff) 0%,
    var(--wfma-pm-stage-top,#fff) var(--wfma-pm-showcase-split),
    var(--wfma-pm-stage-band,#ddc8a6) var(--wfma-pm-showcase-split),
    var(--wfma-pm-stage-band,#ddc8a6) 100%)!important;
}
.wfma-pm .wfma-pm-reels--showcase > .wfma-pm-reels__header{margin-bottom:clamp(58px,6.8vw,108px)}
.wfma-pm .wfma-pm-reels--showcase > .wfma-pm-reels__header h2{font-size:clamp(26px,2.6vw,38px);margin:0 0 8px}
.wfma-pm .wfma-pm-reels--showcase > .wfma-pm-reels__header p{margin:0;opacity:.78}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__scene > .wfma-pm-reels__stage{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(56px,8vw,150px);row-gap:clamp(68px,6.5vw,115px);
  align-items:start;
  padding-inline:clamp(22px,4.2vw,58px);
}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd){padding-top:clamp(98px,10vw,150px)}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__item .wfma-social-phone{max-width:min(var(--wfma-phone-max-width,390px),100%)}
/* Logo aligned in the left white margin, never against viewport edge. */
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__tiktok-logo{
  position:absolute;top:3%;left:clamp(36px,16%,290px);
  width:clamp(86px,10vw,150px);transform:none;max-width:none;
}
/* Six decorative slots follow PDF composition. Uploaded stickers and fallback
 * Unicode emojis occupy exactly the same slots; never draw both per slot. */
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration,
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset{
  position:absolute;transform:translate(-50%,-50%);
  display:block;z-index:1;right:auto;bottom:auto;
  font-size:clamp(34px,4.8vw,78px);width:auto;
  max-width:min(110px,12vw);pointer-events:none;
}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset img{display:block;width:100%;height:auto;object-fit:contain}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration--1,
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset--slot-1{left:5.7%;top:33%}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration--2,
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset--slot-2{left:91%;top:8%}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration--3,
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset--slot-3{left:91%;top:52%}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration--4,
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset--slot-4{left:91%;top:83%}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration--5,
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset--slot-5{left:17%;top:65%}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration--6,
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset--slot-6{left:51%;top:46%}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__watermark{
  left:2%;bottom:0;max-width:96%;overflow:hidden;
  font-size:clamp(100px,16vw,300px);font-weight:800;line-height:1;
  color:rgba(255,255,255,.29);
}
@media(max-width:767px){
  .wfma-pm .wfma-pm-reels--showcase{--wfma-pm-showcase-split:18%;padding:44px 0 62px}
  .wfma-pm .wfma-pm-reels--showcase > .wfma-pm-reels__header{margin-bottom:30px}
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__scene{padding-top:104px}
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__scene > .wfma-pm-reels__stage{
    display:grid;grid-template-columns:1fr;row-gap:38px;column-gap:0;padding-inline:12px;
  }
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd){padding-top:0}
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__item .wfma-social-phone{max-width:min(var(--wfma-phone-max-width,390px),72vw)}
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__tiktok-logo{
    left:50%;top:5px;transform:translateX(-50%);width:90px;max-width:36vw;
  }
  /* Limit stickers on phones: show only two small corner accents on mobile. */
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__decoration,
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__asset{display:none}
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__backdrop .wfma-pm-reels__watermark{
    font-size:clamp(52px,18vw,105px);left:1%;opacity:.6;
  }
}

/* v0.16.1 — TikTok logo anchored to the FIRST PHONE in Showcase only.
 * The background/stickers remain 100% width. The logo follows the phone
 * center via its relative Reel item; it cannot drift to the viewport edge.
 * Classic mode intentionally retains its original background-layer logo.
 */
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd) {
  --wfma-pm-first-phone-offset:clamp(98px,10vw,150px);
  padding-top:var(--wfma-pm-first-phone-offset);
}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__stage > .wfma-pm-reels__item > .wfma-pm-reels__tiktok-logo--anchored {
  position:absolute;
  z-index:3;
  display:block;
  left:50%;
  top:var(--wfma-pm-first-phone-offset,0px);
  right:auto;
  bottom:auto;
  width:clamp(90px,8vw,112px);
  max-width:min(42%,112px);
  margin:0;
  transform:translate(-50%,calc(-100% - 22px));
  pointer-events:none;
  line-height:0;
}
.wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__stage > .wfma-pm-reels__item > .wfma-pm-reels__tiktok-logo--anchored img {
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:contain;
}
@media(max-width:767px){
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__stage--staggered .wfma-pm-reels__item:nth-of-type(odd){
    --wfma-pm-first-phone-offset:0px;
    padding-top:0;
  }
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__stage > .wfma-pm-reels__item > .wfma-pm-reels__tiktok-logo--anchored {
    position:absolute;
    left:50%;top:0;right:auto;bottom:auto;
    width:88px;max-width:36vw;
    margin:0;
    transform:translate(-50%,calc(-100% - 16px));
    grid-column:auto;
  }
  /* Reserve room for the actual logo PNG aspect ratio above first phone. */
  .wfma-pm .wfma-pm-reels--showcase .wfma-pm-reels__scene{padding-top:140px;}
}


/* v0.17.0 — Gallery ratios; old portfolios remain square by default. */
.wfma-pm .wfma-pm-gallery__grid--ratio-portrait .wfma-pm-gallery__item {aspect-ratio:4/5;}
.wfma-pm .wfma-pm-gallery__grid--ratio-original .wfma-pm-gallery__item {aspect-ratio:auto;}
.wfma-pm .wfma-pm-gallery__grid--ratio-original .wfma-pm-gallery__item img {height:auto;width:100%;object-fit:contain;}
/* Override preset backgrounds ONLY for a gallery with custom lower-band color.
   The PHP renderer injects --wfma-pm-gallery-lower inline and does not add a
   competing inline background-image:none in transition mode. */

/* v0.17.0 — Newsletter Showcase, two genuine full-res Media Library images.
   Backdrop is full bleed; pictures stay inside the same aligned stage as Gallery.
   Above/under the orange band stays white. Never slice content into tiles. */
.wfma-pm .wfma-pm-newsletter {
  position:relative; isolation:isolate; background:#fff; color:#1e252b;
  padding:clamp(52px,6vw,90px) 0 clamp(85px,9vw,150px);
  overflow:hidden;
}
.wfma-pm .wfma-pm-newsletter__heading {
  position:relative;z-index:4;text-align:center;color:inherit;
  font-size:clamp(26px,2.8vw,40px);line-height:1.2;
  margin:0 auto clamp(46px,5vw,75px);padding:0 18px;
}
.wfma-pm .wfma-pm-newsletter__band {
  position:absolute;z-index:0;left:0;right:0;
  top:clamp(195px,19vw,300px);bottom:clamp(155px,13vw,250px);
  background:var(--wfma-pm-newsletter-band,#ffae74);
  pointer-events:none;
}
.wfma-pm .wfma-pm-newsletter__scene {position:relative;width:100%;isolation:isolate;}
.wfma-pm .wfma-pm-newsletter__columns {
  position:relative;z-index:2;
  width:min(var(--wfma-pm-aligned-width,980px),calc(100% - 40px));max-width:980px;
  margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;justify-items:center;column-gap:clamp(28px,7vw,110px);
}
.wfma-pm .wfma-pm-newsletter__column {min-width:0;width:min(100%,340px);margin:0;padding:0;}
.wfma-pm .wfma-pm-newsletter__column--right{margin-top:clamp(95px,12vw,200px);}
.wfma-pm .wfma-pm-newsletter__visual {
  display:block;width:100%;max-width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.10));
}
.wfma-pm .wfma-pm-newsletter__character {position:absolute;display:block;z-index:1;pointer-events:none;line-height:0;}
.wfma-pm .wfma-pm-newsletter__character img {display:block;width:100%;height:auto;object-fit:contain;}
.wfma-pm .wfma-pm-newsletter__character--1{width:clamp(80px,13vw,190px);right:3%;top:12%;}
.wfma-pm .wfma-pm-newsletter__character--2{width:clamp(80px,13vw,180px);left:3%;bottom:12%;}
.wfma-pm .wfma-pm-newsletter__character--3{width:clamp(125px,19vw,260px);left:2%;bottom:0;}
@media(max-width:767px){
  .wfma-pm .wfma-pm-newsletter{padding:44px 0 76px;}
  .wfma-pm .wfma-pm-newsletter__heading{margin-bottom:32px;}
  .wfma-pm .wfma-pm-newsletter__band{top:140px;bottom:140px;}
  .wfma-pm .wfma-pm-newsletter__columns{
    grid-template-columns:1fr;gap:46px;width:calc(100% - 48px);
  }
  .wfma-pm .wfma-pm-newsletter__column {width:min(100%,310px);}
  .wfma-pm .wfma-pm-newsletter__column--right {margin-top:0;}
  .wfma-pm .wfma-pm-newsletter__character--1 {width:75px;top:105px;right:0;opacity:.85;}
  .wfma-pm .wfma-pm-newsletter__character--2 {width:75px;left:0;bottom:9%;opacity:.85;}
  .wfma-pm .wfma-pm-newsletter__character--3 {width:115px;left:0;bottom:0;opacity:.85;}
}


/* v0.17.1 — Little Box newsletter composition, PDF-oriented.
 * Full-width band and decorations; visibly larger independent newsletter art.
 * No options or changes to the stored section data. */
.wfma-pm .wfma-pm-gallery{position:relative;isolation:isolate;}
.wfma-pm .wfma-pm-gallery__linked-character{
  position:absolute;z-index:1;pointer-events:none;line-height:0;
  left:max(12px,calc((100% - var(--wfma-pm-aligned-width,980px))/2 - clamp(110px,13vw,235px)));
  top:24%;width:clamp(105px,11.5vw,210px);
}
.wfma-pm .wfma-pm-gallery__linked-character img{display:block;width:100%;height:auto;object-fit:contain;}
.wfma-pm .wfma-pm-gallery__grid{position:relative;z-index:2;}

.wfma-pm .wfma-pm-newsletter{
  overflow:visible;
  padding-bottom:clamp(90px,7.5vw,135px);
}
.wfma-pm .wfma-pm-newsletter__scene{overflow:visible;}
.wfma-pm .wfma-pm-newsletter__columns{
  width:min(1180px,62vw,calc(100% - 48px));max-width:1180px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(35px,4vw,90px);
}
.wfma-pm .wfma-pm-newsletter__column{width:min(100%,460px);}
.wfma-pm .wfma-pm-newsletter__column--right{margin-top:clamp(110px,9vw,190px);}
.wfma-pm .wfma-pm-newsletter__band{
  top:clamp(185px,17vw,275px);
  /* End near the bottom of the LEFT email; the staggered RIGHT email
     continues visibly over white, as in page 3 of the original PDF. */
  bottom:calc(clamp(90px,7.5vw,135px) + clamp(250px,30vw,570px));
}
/* The rocking-horse character is near the top-right corner of the orange band. */
.wfma-pm .wfma-pm-newsletter__character--2{
  left:calc(50% + min(30vw,550px));right:auto;
  top:-65px;bottom:auto;
  width:clamp(110px,9.2vw,180px);
}
/* Bunting + tent sit AFTER the orange band, bottom-left on white. */
.wfma-pm .wfma-pm-newsletter__character--3{
  left:max(20px,calc((100% - min(1180px,62vw))/2 - clamp(85px,10vw,195px)));
  right:auto;top:calc(100% - clamp(250px,24vw,425px));bottom:auto;
  width:clamp(165px,18vw,295px);
}
/* Fallback character 1 is only in Newsletter when there is no earlier Gallery. */
.wfma-pm .wfma-pm-newsletter__character--1{
  left:clamp(14px,4vw,80px);right:auto;top:35px;bottom:auto;
  width:clamp(105px,10vw,175px);
}
@media(max-width:900px){
  .wfma-pm .wfma-pm-gallery__linked-character{width:clamp(75px,10vw,110px);left:8px;top:17%;}
  .wfma-pm .wfma-pm-newsletter__character--2{top:-38px;left:auto;right:3%;width:90px;}
  .wfma-pm .wfma-pm-newsletter__character--3{left:2%;width:clamp(135px,20vw,190px);}
}
@media(max-width:767px){
  .wfma-pm .wfma-pm-gallery__linked-character{display:none;}
  .wfma-pm .wfma-pm-newsletter{
    padding:44px 0 200px;
  }
  .wfma-pm .wfma-pm-newsletter__columns{
    width:min(500px,calc(100% - 32px));
    grid-template-columns:1fr;gap:38px;
  }
  .wfma-pm .wfma-pm-newsletter__column{width:min(100%,390px);}
  .wfma-pm .wfma-pm-newsletter__column--right{margin-top:0;}
  .wfma-pm .wfma-pm-newsletter__band{top:138px;bottom:390px;}
  .wfma-pm .wfma-pm-newsletter__character--1{width:64px;left:2%;top:20px;}
  .wfma-pm .wfma-pm-newsletter__character--2{top:-42px;right:0;width:72px;opacity:1;}
  .wfma-pm .wfma-pm-newsletter__character--3{
    left:5%;right:auto;bottom:auto;top:calc(100% - 145px);
    width:155px;opacity:1;
  }
}