/* Ver.73: shared centered app logo + accessible light parts palette */
.wedding-topbar{position:fixed!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;gap:8px!important;}
.wedding-topbar #wedding-close{grid-column:1!important;justify-self:start!important;order:unset!important;margin:0!important;white-space:nowrap!important;}
.wedding-topbar .wedding-app-logo{grid-column:2!important;justify-self:center!important;order:unset!important;background:transparent!important;border:0!important;padding:0!important;line-height:0!important;display:block!important;min-width:0!important;}
.wedding-topbar .wedding-app-logo img{display:block!important;width:auto!important;height:auto!important;max-width:min(32vw,190px)!important;max-height:38px!important;object-fit:contain!important;}
.wedding-topbar .wedding-create{grid-column:3!important;justify-self:end!important;order:unset!important;margin:0!important;white-space:nowrap!important;}
.wedding-topbar .wedding-desktop-brand,.wedding-topbar > strong{display:none!important;}
/* v74: keep the drawer and selection controls charcoal. Only thumbnails receive white. */
#selectArea, #partsReloadArea, #selectPartsArea,
#partsReloadArea .selectBlock, #selectPartsArea .selectBlock,
#partsReloadArea .boxTitleBlock, #selectPartsArea .boxTitleBlock,
#partsReloadArea ul.colorSelectBox, #selectPartsArea ul.colorSelectBox {
  background:#25262a!important; color:#f3f4f6!important; color-scheme:dark!important;
}
#partsReloadArea .boxTitleBlock h3, #selectPartsArea .boxTitleBlock h3,
#partsReloadArea .coltxt, #selectPartsArea .coltxt {
  color:#f3f4f6!important;
}
/* The gallery is an inset white surface, not a full-width white panel. */
#partsReloadArea .partsBox, #selectPartsArea .partsBox {
  background:#fff!important;
  color:#202126!important;
  color-scheme:light!important;
  border:1px solid #e4e5e8!important;
  border-radius:10px!important;
  box-shadow:none!important;
  outline:0!important;
  padding:12px 10px!important;
  margin:8px 0 0!important;
  box-sizing:border-box!important;
}
#partsReloadArea .partsBox li, #selectPartsArea .partsBox li {
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
#partsReloadArea .partsBox li img, #selectPartsArea .partsBox li img {
  background:transparent!important;
}
#partsReloadArea .partsBox li.selected, #selectPartsArea .partsBox li.selected,
#partsReloadArea .partsBox li.active, #selectPartsArea .partsBox li.active,
#partsReloadArea .partsBox li.now, #selectPartsArea .partsBox li.now {
  outline:2px solid #3988bd!important;
  outline-offset:-2px!important;
  border-radius:6px!important;
}
/* Remove the legacy vivid border on the containing selection box only. */
#partsReloadArea .selectBlock, #selectPartsArea .selectBlock {
  border-color:transparent!important;
  box-shadow:none!important;
  outline:0!important;
}
/* A compact dark control strip above the light thumbnails. */
#partsReloadArea .boxTitleBlock, #selectPartsArea .boxTitleBlock {
  border:0!important;
  box-shadow:none!important;
}
#partsReloadArea .colorSelectBox, #selectPartsArea .colorSelectBox {
  border:0!important;
  box-shadow:none!important;
}

/* Ver.81 shared editor refinements: applicable on PC and touch devices.
   The dark title/control surface stays rectangular; only the gallery is inset. */
#partsReloadArea .boxTitleBlock,
#selectPartsArea .boxTitleBlock {
  border-radius:0!important;
  overflow:visible!important;
  clip-path:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
#partsReloadArea .boxTitleBlock *,
#selectPartsArea .boxTitleBlock * { text-overflow:clip; }
/* Person-specific highlight applies to face AND fashion, never to backgrounds. */
body.wedding-sex-girl:is(.wedding-section-face,.wedding-section-item) .wedding-bottomnav a.active {
  background:#654252!important;
  border-color:#e6a4c2!important;
  color:#fff!important;
}
body.wedding-sex-girl #menuSelectBlock .wedding-fashion-submenu li.wedding-selected,
body.wedding-sex-girl #menuSelectBlock ul.subMenu li.wedding-category-current {
  background:#654252!important;
  border-color:#e6a4c2!important;
}
body.wedding-sex-girl #selectPartsArea .partsBox > li.wedding-part-chosen,
body.wedding-sex-girl #partsReloadArea .partsBox > li.wedding-part-chosen {
  background:#fff0f6!important;
  border-color:#dd89ae!important;
  outline:2px solid #dd89ae!important;
  outline-offset:-2px!important;
}
/* Ver.83 — MOBILE: four-column full-width, centered material grid.
   The legacy wedding_sm.css positions .eye/.nose images to the left; reset
   their offsets before applying a centered transform. The existing drawer
   (#partsReloadArea / #selectPartsArea) remains the only mobile scrollport. */
@media (max-width:767px) {
  #selectArea #partsReloadArea,
  #selectArea #selectPartsArea {
    width:100%!important; max-width:100%!important; min-width:0!important;
    box-sizing:border-box!important;
  }
  #selectArea #partsReloadArea .selectBlock,
  #selectArea #selectPartsArea .selectBlock {
    display:block!important; float:none!important; clear:both!important;
    width:100%!important; max-width:none!important; min-width:0!important;
    margin:0 0 14px!important; padding:0!important;
    box-sizing:border-box!important; overflow:visible!important;
  }
  #selectArea #partsReloadArea ul.partsBox,
  #selectArea #selectPartsArea ul.partsBox {
    display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:6px!important; row-gap:8px!important;
    width:100%!important; max-width:none!important; min-width:0!important;
    height:auto!important; max-height:none!important;
    float:none!important; clear:both!important;
    justify-items:stretch!important; align-items:stretch!important;
    padding:8px!important; margin:8px 0 0!important;
    list-style:none!important; box-sizing:border-box!important;
    overflow:visible!important;
  }
  #selectArea #partsReloadArea ul.partsBox > li,
  #selectArea #selectPartsArea ul.partsBox > li {
    display:flex!important; align-items:center!important; justify-content:center!important;
    float:none!important; clear:none!important; position:relative!important;
    width:100%!important; max-width:none!important; min-width:0!important;
    height:auto!important; aspect-ratio:1/1!important;
    margin:0!important; padding:0!important; box-sizing:border-box!important;
    border:1px solid #e5e6e8!important; border-radius:8px!important;
    background:#fafafa!important; overflow:hidden!important;
  }
  /* Reset historic 160–200% widths and left:-30px/-40px sprite positioning. */
  #selectArea #partsReloadArea ul.partsBox > li img,
  #selectArea #selectPartsArea ul.partsBox > li img,
  #selectArea #partsReloadArea ul.partsBox > li img.eye,
  #selectArea #partsReloadArea ul.partsBox > li img.nose,
  #selectArea #partsReloadArea ul.partsBox > li img.mouth,
  #selectArea #partsReloadArea ul.partsBox > li img.brow,
  #selectArea #selectPartsArea ul.partsBox > li img.eye,
  #selectArea #selectPartsArea ul.partsBox > li img.nose,
  #selectArea #selectPartsArea ul.partsBox > li img.mouth,
  #selectArea #selectPartsArea ul.partsBox > li img.brow {
    display:block!important; position:static!important; left:auto!important; right:auto!important; top:auto!important;
    float:none!important; width:100%!important; height:100%!important;
    max-width:100%!important; max-height:100%!important;
    min-width:0!important; margin:0!important; padding:0!important;
    object-fit:contain!important; object-position:center!important;
    transform:none!important; transform-origin:center center!important;
  }
  /* The image CSS class exists in legacy templates; scale those parts only. */
  #selectArea #partsReloadArea ul.partsBox > li img:is(.eye,.nose,.mouth,.brow),
  #selectArea #selectPartsArea ul.partsBox > li img:is(.eye,.nose,.mouth,.brow),
  #selectArea #partsReloadArea .wedding-part-eye ul.partsBox > li img,
  #selectArea #partsReloadArea .wedding-part-nose ul.partsBox > li img,
  #selectArea #partsReloadArea .wedding-part-mouth ul.partsBox > li img,
  #selectArea #partsReloadArea .wedding-part-brow ul.partsBox > li img {
    transform:scale(1.5)!important;
  }
  #selectArea #partsReloadArea ul.partsBox > li.wedding-part-chosen,
  #selectArea #selectPartsArea ul.partsBox > li.wedding-part-chosen {
    background:#eaf5fb!important; border-color:#6db4d6!important;
    outline:2px solid #6db4d6!important; outline-offset:-2px!important;
  }
  body.wedding-sex-girl #selectArea #partsReloadArea ul.partsBox > li.wedding-part-chosen,
  body.wedding-sex-girl #selectArea #selectPartsArea ul.partsBox > li.wedding-part-chosen {
    background:#fff0f6!important; border-color:#dd89ae!important;
    outline-color:#dd89ae!important;
  }
}