/* Base accessory rules — positioned inside .robot-body
   px values are referenced to --doll-scale: 1.5 (original tuning).
   When --doll-scale changes (e.g. to 1.25), all accessories scale proportionally. */
.accessory {
    position: absolute;
    z-index: 3;
}

.accessory.hidden-by-preview {
    display: none !important;
}

/* skin tones and eye replacements are applied to the doll/eyes img src, not rendered as overlays */
.accessory-doll_male_ton_1,
.accessory-doll_male_ton_2,
.accessory-doll_female_ton_1,
.accessory-doll_female_ton_2,
.accessory-eye_blue,
.accessory-eye_green,
.accessory-eye_red,
.accessory-eye_aqua,
.accessory-eye_pink,
.accessory-eye_violet,
.accessory-mouth_girl_2,
.accessory-mouth_girl_3 {
    display: none !important;
}

.accessory img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* clothing layer below hair */
.accessory-man_shit_1 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-51%);
    width: calc(64px * var(--doll-scale) / 1.5);
    z-index: 7;
}

/* man_shit_1/2 can be worn together with jackets (conflictExceptItems) — keep
   the shirt UNDER them: raise the jackets above the shirt's z=7. */
:is(.robot-body, .preview-robot):has(:is(.accessory-man_shit_1, .accessory-man_shit_2))
:is(.accessory-man_jacket_1, .accessory-man_jacket_2, .accessory-man_jacket_3,
    .accessory-man_jacket_4, .accessory-man_denim_jacket_1) {
    z-index: 8;
}

/* ...and trim the shirt's sides so it doesn't stick out from under the
   jacket. Edit the polygon to taste. */
:is(.robot-body, .preview-robot):has(:is(.accessory-man_jacket_1, .accessory-man_jacket_2,
    .accessory-man_jacket_3, .accessory-man_jacket_4, .accessory-man_denim_jacket_1))
.accessory-man_shit_1 {
    clip-path: polygon(22% 0%, 80% 0%, 78% 69%, 23% 89%);
}

.accessory-man_shit_2 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_emo_jaket {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_sweater_1 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_sweater_2 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_sweater_3 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_jeans_1 {
    top: calc(111px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(39px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_shorts_1 {
    top: calc(110px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(46px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_jeans_2 {
    top: calc(105px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_jeans_3 {
    top: calc(110px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(46px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_jeans_4 {
    top: calc(106px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_emo_pants {
    top: calc(110px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(49px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_pants_1 {
    top: calc(110px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(48px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_pants_2 {
    top: calc(109px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 6;
    overflow: visible;
    isolation: isolate;
}

.accessory-man_pants_3,
.accessory-man_pants_4 {
    top: calc(110px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_boy_pants {
    top: calc(107px * var(--doll-scale) / 1.5);
    left: 49.4%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_boy_pants {
    top: calc(107px * var(--doll-scale) / 1.5);
    left: 49.4%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 6;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_boy_pants):has(.accessory-girl_boots_12) .accessory-girl_boots_12 {
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_boy_pants):has(.accessory-girl_boots_11) .accessory-girl_boots_11 {
    top: calc(154px * var(--doll-scale) / 1.5);
    left: 48.7%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 8;
    overflow: visible;
    isolation: isolate;
}

:is(.robot-body, .preview-robot):has(.accessory-man_boy_pants):has(.accessory-man_boots_1) .accessory-man_boots_1 {
    z-index: 7;
}

:is(.robot-body, .preview-robot):has(.accessory-man_boy_pants):has(.accessory-man_boots_4) .accessory-man_boots_4 {
    z-index: 7;
}

.accessory-robo_part_1 {
    top: calc(75px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(84px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-robo_part_2 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(77px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-panda_low {
    top: calc(65px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(81px * var(--doll-scale) / 1.5);
    z-index: 6;
}

/* cut a rectangular hole on doll-image where robo-part / panda-low sits */
:is(.robot-body, .preview-robot):has(.accessory-robo_part_1, .accessory-robo_part_2, .accessory-panda_low) .doll-image {
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 44%, transparent 44%, transparent 100%);
    mask-image: linear-gradient(180deg, black 0%, black 44%, transparent 44%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* girl_hair_4 / girl_hair_13: dome the top of the head so the ears,
   which poke out at the upper sides, are clipped under the hair.
   Bottom stays full-width — only the head top is rounded. */
:is(.robot-body, .preview-robot):has(
    .accessory-girl_hair_4:not(.hidden-by-preview),
    .accessory-girl_hair_13:not(.hidden-by-preview),
    .accessory-girl_hair_6:not(.hidden-by-preview),
    .accessory-girl_hair_22:not(.hidden-by-preview),
    .accessory-girl_hair_23:not(.hidden-by-preview),
    .accessory-girl_hair_24:not(.hidden-by-preview),
    .accessory-girl_hair_25:not(.hidden-by-preview),
    .accessory-girl_hair_26:not(.hidden-by-preview),
    .accessory-girl_hair_27:not(.hidden-by-preview)
) .doll-image {
    clip-path: polygon(0% 100%, 0% 30%, 8% 35%, 20% 7%, 35% 1%, 50% 0%, 65% 1%, 80% 7%, 92% 35%, 100% 30%, 100% 100%);
}

/* ===== Prison uniform (auto-equipped while imprisoned) ===== */
.accessory-prison_man,
.accessory-prison_girl {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(69px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-prison_cap {
    top: calc(-10px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 8;
}

/* hide hair under prison cap (same trick as man_hat_1) */
:is(.robot-body, .preview-robot):has(.accessory-prison_cap) :is(.accessory-man_hair_1, .accessory-man_hair_2, .accessory-man_hair_3, .accessory-man_hair_4, .accessory-man_hair_5, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8) {
    clip-path: ellipse(75% 46% at 40% 75%);
}

:is(.robot-body, .preview-robot):has(.accessory-prison_cap) :is(.accessory-man_hair_9, .accessory-man_hair_10) {
    clip-path: ellipse(50% 35% at 51% 93%);
}

.accessory-man_kedy_1 {
    top: calc(167px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-man_tapki_1 {
    top: calc(164px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(44px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_turtleneck_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-boobs_1 {
    top: calc(88px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(36px * var(--doll-scale) / 1.5);
    z-index: 10;
    opacity: 0.7;
}

.accessory-girl_turtleneck_2 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_top_1 {
    top: calc(81px * var(--doll-scale) / 1.5);
    left: 49.5%;
    transform: translateX(-50%);
    width: calc(31px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_top_2 {
    top: calc(75px * var(--doll-scale) / 1.5);
    left: 49.5%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_halat_1 {
    top: calc(71.5px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-girl_tshirt_1,
.accessory-girl_tshirt_2,
.accessory-girl_tshirt_3,
.accessory-girl_tshirt_4 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_tshirt_5 {
    top: calc(66px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(73px * var(--doll-scale) / 1.5);
    z-index: 4;
}

/* "Хвост" — ponytail hairstyle in 5 colors. */
.accessory-girl_hvost_black,
.accessory-girl_hvost_blond,
.accessory-girl_hvost_brown,
.accessory-girl_hvost_red,
.accessory-girl_hvost_rainbow {
    top: calc(-42px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(153px * var(--doll-scale) / 1.5);
    z-index: 8;
}

/* "Пампушки" — twin buns hairstyle in 4 colors. */
.accessory-girl_pampush_1,
.accessory-girl_pampush_2,
.accessory-girl_pampush_3,
.accessory-girl_pampush_4 {
    top: calc(-22px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(140px * var(--doll-scale) / 1.5);
    z-index: 6;
}

/* "Lrez" — men's hairstyle in 10 colors. */
.accessory-man_hair_lrez_1,
.accessory-man_hair_lrez_2,
.accessory-man_hair_lrez_3,
.accessory-man_hair_lrez_4,
.accessory-man_hair_lrez_5,
.accessory-man_hair_lrez_6,
.accessory-man_hair_lrez_7,
.accessory-man_hair_lrez_8,
.accessory-man_hair_lrez_9,
.accessory-man_hair_lrez_10 {
    top: calc(-24px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(98px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_latex_body,
.accessory-girl_latex_body_2 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 4;
    overflow: visible;
    isolation: isolate;
}

/* ============================================================
   "Outerwear" preset — clothing_top items that should always sit
   ABOVE every clothing_bottom item (incl. high-waist pants/trousers
   at z=6 and the skirt_4-7 special cases).
   To add a new outerwear piece, just append its selector to the
   :is(...) list below — z-index 7 + !important wins over the
   .cat-clothing_top bump rules.
   ============================================================ */
:is(
    .accessory-girl_tshirt_5,
    .accessory-girl_rubashka_3
    /* , .accessory-NEW_ITEM_HERE */
) {
    z-index: 7 !important;
}

.accessory-girl_sweater_unarium_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-man_sweater_unarium_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_jeans_1 {
    top: calc(104px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-52%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 3;
}

.accessory-girl_jeans_2 {
    top: calc(107px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-52%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 6;
}

/* jeans_2 sits above shoes (z=5) but tops/jackets must still drape over the
   waist — bump every clothing_top item above them. */
:is(.robot-body, .preview-robot):has(.accessory-girl_jeans_2) .cat-clothing_top {
    z-index: 7;
}

.accessory-girl_skirt_1 {
    top: calc(103px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(43px * var(--doll-scale) / 1.5);
    z-index: 3;
}

.accessory-girl_skirt_2 {
    top: calc(108px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(45px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_skirt_3 {
    top: calc(109px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(48px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_skirt_8 {
    top: calc(102px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_skirt_9,
.accessory-girl_skirt_10,
.accessory-girl_skirt_11,
.accessory-girl_skirt_12,
.accessory-girl_skirt_13 {
    top: calc(102px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_skirt_14 {
    top: calc(101px * var(--doll-scale) / 1.5);
    left: 49.4%;
    transform: translateX(-50%);
    width: calc(50.8px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_skirt_4,
.accessory-girl_skirt_5,
.accessory-girl_skirt_6,
.accessory-girl_skirt_7 {
    top: calc(105px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(57px * var(--doll-scale) / 1.5);
    z-index: 5;
}

/* When turtleneck_2 is worn, the high-waist skirts (4-7) widen slightly
   so the tucked-in sweater doesn't peek out past the waistband. */
:is(.robot-body, .preview-robot):has(.accessory-girl_turtleneck_2)
:is(.accessory-girl_skirt_4, .accessory-girl_skirt_5, .accessory-girl_skirt_6, .accessory-girl_skirt_7) {
    width: calc(60px * var(--doll-scale) / 1.5);
}

/* High-waist skirts (4 & 5) sit at z=5 — raise every clothing_top above
   them so the top covers the waistband. Uses .cat-clothing_top so any
   new top added later is covered automatically. */
:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_4, .accessory-girl_skirt_5, .accessory-girl_skirt_6, .accessory-girl_skirt_7) .cat-clothing_top {
    z-index: 6;
}

/* Rubashka_1, turtleneck_2 and sweater_1 hang loose — they should stay
   UNDER skirts 4-7, like with the other skirts. Cancel the
   .cat-clothing_top bump. */
:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_4, .accessory-girl_skirt_5, .accessory-girl_skirt_6, .accessory-girl_skirt_7)
:is(.accessory-girl_rubashka_1, .accessory-girl_turtleneck_2, .accessory-girl_sweater_1, .accessory-girl_sweater_7) {
    z-index: 2;
}

/* girl_jacket_2 normally sits at z=7 (above its category). The cat-clothing_top
   bump for skirts 4/5 would drop it to 6 — keep it on top so the jacket stays
   above the skirt. */
:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_4, .accessory-girl_skirt_5, .accessory-girl_skirt_6, .accessory-girl_skirt_7) .accessory-girl_jacket_2 {
    z-index: 7;
}

/* Shoes (z=5 by default) should sit UNDER skirts 4-7 (which are also z=5),
   so we drop them to z=4 only when one of these skirts is worn. Other
   bottoms (pants/jeans) aren't affected — this rule only triggers via
   :has(skirt_4-7). */
:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_4, .accessory-girl_skirt_5, .accessory-girl_skirt_6, .accessory-girl_skirt_7) .cat-shoes {
    z-index: 4;
}

.robot-body:has(.accessory-girl_sweater_unarium_1) .accessory-girl_skirt_3,
.preview-robot:has(.accessory-girl_sweater_unarium_1) .accessory-girl_skirt_3 {
    top: calc(115px * var(--doll-scale) / 1.5);
    width: calc(50px * var(--doll-scale) / 1.5);
}

/* When both are worn, the Unarium sweater (z=4) should layer over skirt_3
   (z=5). Targeted bump only for this pair. */
:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_3) .accessory-girl_sweater_unarium_1 {
    z-index: 6;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_14) .accessory-girl_sweater_unarium_1 {
    z-index: 6;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_14):has(.accessory-girl_sweater_7) .accessory-girl_sweater_7 {
    z-index: 6;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_sweater_7) .accessory-girl_skirt_14 {
    top: calc(103px * var(--doll-scale) / 1.5);
    left: 49.4%;
    transform: translateX(-50%);
    width: calc(44.8px * var(--doll-scale) / 1.5);
    z-index: 5;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_14):has(.accessory-girl_sweater_3) .accessory-girl_sweater_3,
:is(.robot-body, .preview-robot):has(.accessory-girl_skirt_14):has(.accessory-girl_sweater_4) .accessory-girl_sweater_4 {
    z-index: 6;
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_sweater_3, .accessory-girl_sweater_4)) .accessory-girl_skirt_14 {
    top: calc(104px * var(--doll-scale) / 1.5);
    left: 49.4%;
    transform: translateX(-50%);
    width: calc(46.8px * var(--doll-scale) / 1.5);
    z-index: 5;
}

/* When girl_pants_3 or girl_trousers_2 (z=6) are worn, these sweaters
   drape over them. */
:is(.robot-body, .preview-robot):has(.accessory-girl_pants_3, .accessory-girl_trousers_2)
:is(.accessory-girl_sweater_unarium_1, .accessory-girl_sweater_4, .accessory-girl_sweater_7) {
    z-index: 7;
}

.accessory-girl_socks_1 {
    top: calc(147px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    /* above tights (z=1) but below any clothing_bottom (z=3+) so jeans
       and skirts cover the sock top. */
    z-index: 2;
}

:is(.robot-body, .preview-robot):has(.accessory-doll_female_ton_2) .accessory-girl_socks_1 {
    filter: brightness(0.5);
}

.accessory-man_socks_1 {
    top: calc(163px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-51%);
    width: calc(45px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.accessory-girl_socks_2 {
    top: calc(146px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(37px * var(--doll-scale) / 1.5);
    /* above tights (z=1) but below any clothing_bottom (z=3+) so jeans
       and skirts cover the sock top. */
    z-index: 2;
}

.accessory-girl_krossy_1 {
    top: calc(164px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_krossy_2 {
    top: calc(164px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_krossy_3 {
    top: calc(164px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(47px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_krossy_5 {
    top: calc(159px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(37px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_krossy_6 {
    top: calc(159px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(39px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_krossy_7 {
    top: calc(159px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(39px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_trousers_1 {
    top: calc(102px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    /* above shoes (z=5) so trouser leg hangs over the shoe */
    z-index: 6;
}

/* Bump every clothing_top item above trousers_1 (which is now z=6) so they
   still cover the waist. Uses the generic .cat-clothing_top class, so any
   new top added later is covered automatically — no need to update this list. */
:is(.robot-body, .preview-robot):has(.accessory-girl_trousers_1) .cat-clothing_top {
    z-index: 7;
}

.accessory-girl_trousers_2 {
    top: calc(108px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-51%);
    width: calc(43px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_trousers_3 {
    top: calc(101px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-51%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_trousers_4 {
    top: calc(102px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-51%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 6;
}

/* girl_trousers_4 — every shoe must sit UNDER these trousers when both
   are worn. Drop shoes to z=4 (trousers are z=6). */
:is(.robot-body, .preview-robot):has(.accessory-girl_trousers_4) .cat-shoes {
    z-index: 4;
}

.accessory-girl_kolgotki_1,
.accessory-girl_kolgotki_2 {
    top: calc(107px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(40px * var(--doll-scale) / 1.5);
    /* below socks (z=2) so socks layer over the tights at the ankle. */
    z-index: 1;
}

/* When shorts_1 are worn, dome-clip the top of the tights so the shorts
   cleanly cover the waistband instead of cutting through it. */
:is(.robot-body, .preview-robot):has(.accessory-girl_shorts_1)
:is(.accessory-girl_kolgotki_1, .accessory-girl_kolgotki_2) {
    clip-path: polygon(0% 100%, 0% 18%, 100% 0%, 30% 2%, 50% 0%, 72% 1%, 88% 0%, 100% 18%, 100% 100%);
}

/* With shorts_2 over the tights, trim the tights' sides so the shorts edges
   read cleanly. Edit the polygon to taste. */
:is(.robot-body, .preview-robot):has(.accessory-girl_shorts_2)
:is(.accessory-girl_kolgotki_1, .accessory-girl_kolgotki_2) {
    clip-path: polygon(20% 0%, 82% 0%, 82% 25%, 100% 30%, 100% 100%, 0% 100%, 0% 35%, 0% 35%);
}

.accessory-girl_pants_1,
.accessory-girl_pants_2 {
    top: calc(106px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(44px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_pants_3 {
    top: calc(108px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 6;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_rubashka_1) :is(.accessory-girl_pants_1, .accessory-girl_pants_2) {
    width: calc(46px * var(--doll-scale) / 1.5);
}

/* When girl_pants_1/2 worn, any female top (except rubashka) should layer above them */
:is(.robot-body, .preview-robot):has(:is(.accessory-girl_pants_1, .accessory-girl_pants_2)) :is(.accessory-girl_turtleneck_1, .accessory-girl_turtleneck_2, .accessory-girl_top_1, .accessory-girl_sweater_1, .accessory-girl_sweater_2, .accessory-girl_sweater_3, .accessory-girl_sweater_4, .accessory-girl_sweater_unarium_1, .accessory-girl_bomber_1, .accessory-girl_dress_1, .accessory-girl_dress_2, .accessory-girl_koftochka_1, .accessory-girl_tshirt_1, .accessory-girl_tshirt_2, .accessory-girl_tshirt_3, .accessory-girl_tshirt_4) {
    z-index: 7;
}

/* trousers/skirt go above sweater/turtleneck when both worn */
.robot-body:has(.accessory-girl_sweater_1) .accessory-girl_trousers_1,
.preview-robot:has(.accessory-girl_sweater_1) .accessory-girl_trousers_1,
.robot-body:has(.accessory-girl_turtleneck_1) .accessory-girl_trousers_1,
.preview-robot:has(.accessory-girl_turtleneck_1) .accessory-girl_trousers_1,
.robot-body:has(.accessory-girl_turtleneck_1) .accessory-girl_skirt_1,
.preview-robot:has(.accessory-girl_turtleneck_1) .accessory-girl_skirt_1 {
    z-index: 5;
}

.robot-body:has(.accessory-girl_turtleneck_2) .accessory-girl_skirt_1,
.preview-robot:has(.accessory-girl_turtleneck_2) .accessory-girl_skirt_1 {
    top: calc(100px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(45px * var(--doll-scale) / 1.5);
    z-index: 5;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_koftochka_1) .accessory-girl_skirt_1 {
    top: calc(101px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_sweater_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_koftochka_1 {
    top: calc(76px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_rubashka_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 2;
}

.accessory-girl_rubashka_2 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(68px * var(--doll-scale) / 1.5);
    z-index: 2;
}

.accessory-girl_rubashka_3 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 2;
}

.accessory-girl_dress_1 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 54%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_2 {
    top: calc(75px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(45px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_bomber_1 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(70px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_sweater_2 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_sweater_3,
.accessory-girl_sweater_4 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(74px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_sweater_5,
.accessory-girl_sweater_6 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(68px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_sweater_7 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 4;
}


/* girl_pants_1 / girl_pants_2 are high-waist — these sweaters should drape
   over them. With other bottoms (jeans/skirts) keep the sweater under, so
   its hem tucks naturally. */
:is(.robot-body, .preview-robot):has(.accessory-girl_pants_1, .accessory-girl_pants_2)
:is(.accessory-girl_sweater_5, .accessory-girl_sweater_6, .accessory-girl_sweater_7) {
    z-index: 7;
}

.accessory-girl_boots_1 {
    top: calc(157px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_boots_12 {
    top: calc(158px * var(--doll-scale) / 1.5);
    left: 49.5%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_boots_13 {
    top: calc(161px * var(--doll-scale) / 1.5);
    left: 49.6%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_boots_2 {
    top: calc(166px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(46px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_boots_3 {
    top: calc(162px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(50px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_boots_5,
.accessory-girl_boots_6 {
    top: calc(169px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_boots_7,
.accessory-girl_boots_8 {
    top: calc(156px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(40px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_boots_9 {
    top: calc(156px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(39px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

.accessory-girl_boots_10 {
    top: calc(162px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(40px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

.accessory-girl_boots_11 {
    top: calc(156px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

/* Bright white halo behind boots 11 so the stars read as a constellation. */
.accessory-girl_boots_11::before {
    content: '';
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(50% 38% at 28% 58%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(50% 38% at 72% 58%, rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(60% 45% at 50% 80%, rgba(255, 240, 200, 0.4), transparent 75%);
    filter: blur(3px);
    z-index: -1;
    pointer-events: none;
    animation: boots11Aura 3.4s ease-in-out infinite;
}

@keyframes boots11Aura {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

/* Soft luminous aura behind the boots so the multi-tone sparkles read as a halo */
.accessory-girl_boots_10::before {
    content: '';
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(45% 35% at 30% 60%, rgba(255, 200, 235, 0.35), transparent 70%),
        radial-gradient(45% 35% at 70% 60%, rgba(190, 230, 255, 0.32), transparent 72%),
        radial-gradient(60% 45% at 50% 75%, rgba(255, 230, 180, 0.28), transparent 75%);
    filter: blur(4px);
    z-index: -1;
    pointer-events: none;
    animation: boots10Aura 4.2s ease-in-out infinite;
}

@keyframes boots10Aura {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

:is(.robot-body, .preview-robot):has(.accessory-girl_jeans_1):has(.accessory-girl_boots_9) .accessory-girl_boots_9 {
    top: calc(161px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(40px * var(--doll-scale) / 1.5);
    z-index: 6;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_jeans_1):has(.accessory-girl_boots_11) .accessory-girl_boots_11 {
    top: calc(154px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_trousers_1):has(.accessory-girl_boots_11) .accessory-girl_boots_11 {
    z-index: 7;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_jeans_1):has(.accessory-girl_boots_3) .accessory-girl_jeans_1 {
    z-index: 6;
}

/* ===== Diamond-encrusted boots: continuous shimmer (sun-bunny sweep) ===== */
.accessory-girl_boots_4 {
    top: calc(144px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(40px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

/* boots go behind trousers when both worn */
.robot-body:has(.accessory-girl_trousers_1) .accessory-girl_boots_4,
.preview-robot:has(.accessory-girl_trousers_1) .accessory-girl_boots_4 {
    z-index: 3;
}

/* dress goes above diamond boots */
.robot-body:has(.accessory-girl_boots_4) .accessory-girl_dress_1,
.preview-robot:has(.accessory-girl_boots_4) .accessory-girl_dress_1 {
    z-index: 6;
}


/* Star-shaped sparkle particles — "+ cross" with glowing center */
.accessory-girl_boots_4 .diamond-sparkle,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-face_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle,
.accessory-man_jacket_1 .diamond-sparkle,
.accessory-man_jacket_2 .diamond-sparkle,
.accessory-man_pants_2 .diamond-sparkle,
.accessory-girl_jacket_1 .diamond-sparkle,
.accessory-girl_latex_body .diamond-sparkle,
.accessory-girl_latex_body_2 .diamond-sparkle,
.accessory-girl_boots_9 .diamond-sparkle,
.accessory-girl_boots_10 .diamond-sparkle,
.accessory-girl_boots_11 .diamond-sparkle,
.accessory-girl_bag_2 .diamond-sparkle {
    position: absolute;
    width: var(--star-size, 4px);
    height: var(--star-size, 4px);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 1) 0%,
            rgba(220, 240, 255, 0.6) 35%,
            rgba(180, 220, 255, 0) 70%);
    border-radius: 50%;
    animation-name: diamondParticle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: opacity, transform, filter;
}

/* Boots 10: tiny multi-toned gem-dust particles with a soft tinted halo. */
.accessory-girl_boots_10 .diamond-sparkle {
    filter: drop-shadow(0 0 1.5px var(--star-glow, rgba(255, 255, 255, 0.85)));
}

.accessory-girl_boots_10 .diamond-sparkle::after {
    content: '';
    position: absolute;
    inset: -180%;
    background: radial-gradient(circle at center,
        var(--star-glow, rgba(255, 255, 255, 0.55)) 0%,
        transparent 70%);
    pointer-events: none;
    opacity: 0.65;
    border-radius: 50%;
}

/* + cross arms through pseudo-elements on the sparkle */
.accessory-girl_boots_4 .diamond-sparkle::before,
.accessory-girl_boots_4 .diamond-sparkle::after,
.accessory-girl_boots_11 .diamond-sparkle::before,
.accessory-girl_boots_11 .diamond-sparkle::after,
.accessory-girl_bag_2 .diamond-sparkle::before,
.accessory-girl_bag_2 .diamond-sparkle::after,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::before,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 100%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.accessory-girl_boots_4 .diamond-sparkle::before,
.accessory-girl_boots_11 .diamond-sparkle::before,
.accessory-girl_bag_2 .diamond-sparkle::before,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::before {
    width: calc(var(--star-size, 4px) * 2.4);
    height: 1px;
}

.accessory-girl_boots_4 .diamond-sparkle::after,
.accessory-girl_boots_11 .diamond-sparkle::after,
.accessory-girl_bag_2 .diamond-sparkle::after,
.accessory-brow_piercing_1 .diamond-sparkle,
.accessory-crown .diamond-sparkle,
.accessory-man_boots_2 .diamond-sparkle,
.accessory-girl_hair_9 .diamond-sparkle::after {
    width: 1px;
    height: calc(var(--star-size, 4px) * 2.4);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 100%);
}

/* Boots 11: brighter glow, longer cross arms — the stars really shine. */
.accessory-girl_boots_11 .diamond-sparkle,
.accessory-girl_bag_2 .diamond-sparkle {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95));
}

.accessory-girl_boots_11 .diamond-sparkle::before,
.accessory-girl_bag_2 .diamond-sparkle::before {
    width: calc(var(--star-size, 4px) * 3.4);
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 255, 255, 1) 50%,
        transparent 100%);
}

.accessory-girl_boots_11 .diamond-sparkle::after,
.accessory-girl_bag_2 .diamond-sparkle::after {
    height: calc(var(--star-size, 4px) * 3.4);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 1) 50%,
        transparent 100%);
}

@keyframes diamondParticle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.4) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(45deg);
    }
}

.accessory-man_sport_pants_1 {
    top: calc(108px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(42px * var(--doll-scale) / 1.5);
    z-index: 6;
}


.accessory-man_hoodie_1 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 7;
}


.accessory-man_denim_jacket_1 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_jacket_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(69px * var(--doll-scale) / 1.5);
    z-index: 7;
    overflow: visible;
    isolation: isolate;
}

.accessory-man_jacket_2 {
    top: calc(68px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(69px * var(--doll-scale) / 1.5);
    z-index: 7;
    overflow: visible;
    isolation: isolate;
}

.accessory-man_jacket_3,
.accessory-man_jacket_4 {
    top: calc(69px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(69px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_jacket_5 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_jacket_6 {
    top: calc(70px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-man_boy_jacket {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50.5%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_jeans_1, .accessory-man_jeans_2, .accessory-man_jeans_3, .accessory-man_jeans_4, .accessory-man_pants_1, .accessory-man_emo_pants, .accessory-man_sport_pants_1)) .accessory-man_jacket_1 {
    z-index: 8;
}

.accessory-girl_jacket_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
    overflow: visible;
    isolation: isolate;
}

.accessory-girl_jacket_2 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_jacket_3 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_boy_jacket {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_jacket_4 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_jacket_5 {
    top: calc(68px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-girl_jacket_6 {
    top: calc(69px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 7;
}

/* girl_jacket_2 has a high collar — hair should drape over it instead of
   sitting under it. Raise every hairstyle above the jacket (z=7). */
:is(.robot-body, .preview-robot):has(.accessory-girl_jacket_2) .cat-hairstyles {
    z-index: 8;
}

.accessory-mouth_gag_1,
.accessory-mouth_gag_2 {
    top: calc(54px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(18px * var(--doll-scale) / 1.5);
    /* above the mouth (z=21-ish for beards) so the gag covers the lips */
    z-index: 21;
}

.accessory-soska_1,
.accessory-soska_2,
.accessory-soska_3 {
    top: calc(54px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(19px * var(--doll-scale) / 1.5);
    z-index: 21;
}


:is(.robot-body, .preview-robot):has(.accessory-man_denim_jacket_1) .accessory-man_hair_2 {
    z-index: 8;
}

.accessory-man_sneakers_1 {
    top: calc(159px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    /* keep sneakers above any pants/jeans layer */
    z-index: 7;
}

.accessory-man_sneakers_2 {
    top: calc(160px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(55px * var(--doll-scale) / 1.5);
    z-index: 5;
}

:is(.robot-body, .preview-robot):has(.accessory-man_jeans_1) .accessory-man_sneakers_2 {
    z-index: 9;
}

.accessory-man_sneakers_3 {
    top: calc(162px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(52px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-sandali_girl_1 {
    top: calc(165px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-sandali_girl_2 {
    top: calc(168px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(38px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-girl_fur_coat_1 {
    top: calc(68px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(74px * var(--doll-scale) / 1.5);
    /* above any clothing_bottom layer so the fur coat hangs over pants/skirts */
    z-index: 8;
}

.accessory-girl_fur_coat_2 {
    top: calc(67px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(74px * var(--doll-scale) / 1.5);
    z-index: 8;
}

/* Шубы всегда поверх любых топов/футболок — никакая другая правила
   (например, бамп .cat-clothing_top из-за trousers_1) не должна их перекрывать. */
:is(.robot-body, .preview-robot):has(:is(.accessory-girl_fur_coat_1, .accessory-girl_fur_coat_2)) :is(.accessory-girl_fur_coat_1, .accessory-girl_fur_coat_2) {
    z-index: 10;
}

.accessory-girl_dress_3 {
    top: calc(65px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_4 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(44px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_5 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(91px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_6 {
    top: calc(74.4px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(52px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_7 {
    top: calc(78px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(60px * var(--doll-scale) / 1.5);
    z-index: 4;
}

.accessory-girl_dress_8,
.accessory-girl_dress_9,
.accessory-girl_dress_10 {
    top: calc(64px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(46px * var(--doll-scale) / 1.5);
    z-index: 4;
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_dress_8, .accessory-girl_dress_9, .accessory-girl_dress_10)) :is(.accessory-girl_kolgotki_1, .accessory-girl_kolgotki_2) {
    clip-path: polygon(15% 0%, 85% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
}

.accessory-girl_shorts_1 {
    top: calc(107px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(41px * var(--doll-scale) / 1.5);
    z-index: 3;
}

.accessory-girl_shorts_2 {
    top: calc(100px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-49%);
    width: calc(40px * var(--doll-scale) / 1.5);
    z-index: 3;
}


.accessory-man_boots_1 {
    top: calc(157px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(54px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-man_boots_4 {
    top: calc(152px * var(--doll-scale) / 1.5);
    left: 49.5%;
    transform: translateX(-50%);
    width: calc(43px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_boots_2 {
    top: calc(162px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(62px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}


/* beard sits on the face — z-index 2.5 so it overlays the chin but stays below hair */
.accessory-man_beard_1 {
    top: calc(47px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(68px * var(--doll-scale) / 1.5);
    z-index: 21;
}

.accessory-man_beard_2 {
    top: calc(49px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(61px * var(--doll-scale) / 1.5);
    z-index: 21;
}

.accessory-man_beard_3,
.accessory-man_beard_4 {
    top: calc(49px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(35px * var(--doll-scale) / 1.5);
    z-index: 21;
}

.accessory-man_beard_5,
.accessory-man_beard_6 {
    top: calc(44px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(65px * var(--doll-scale) / 1.5);
    z-index: 21;
}

.accessory-man_coat_1 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 7;
}

/* ===== Jewelry: gold chain with sparkle animation ===== */
.accessory-gold_chain_1,
.accessory-gold_chain_2,
.accessory-silver_chain_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(24px * var(--doll-scale) / 1.5);
    z-index: 20;
    overflow: visible;
}

.accessory-star_pendant_1 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(22px * var(--doll-scale) / 1.5);
    z-index: 20;
    overflow: visible;
}

.accessory-gold_chain_3 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(24px * var(--doll-scale) / 1.5);
    z-index: 20;
    overflow: visible;
}

.accessory-gold_chain_1 img,
.accessory-gold_chain_2 img {
    filter: drop-shadow(0 0 1px rgba(255, 220, 100, 0.55))
            drop-shadow(0 0 3px rgba(255, 200, 60, 0.3))
            drop-shadow(0 0 0 rgba(255, 200, 60, 0))
            brightness(1) saturate(1);
    animation: chainGlow 4s ease-in-out infinite;
    animation-fill-mode: both;
}

@keyframes chainGlow {
    0%, 100% {
        filter: drop-shadow(0 0 1px rgba(255, 220, 100, 0.55))
                drop-shadow(0 0 3px rgba(255, 200, 60, 0.3))
                drop-shadow(0 0 0 rgba(255, 200, 60, 0))
                brightness(1) saturate(1);
    }
    50% {
        filter: drop-shadow(0 0 2px rgba(255, 230, 130, 0.55))
                drop-shadow(0 0 6px rgba(255, 200, 60, 0.35))
                drop-shadow(0 0 12px rgba(255, 200, 60, 0.18))
                brightness(1.06) saturate(1.1);
    }
}

/* sparkle particles overlay — smooth fade-in/out, no jumps */
.accessory-gold_chain_1::before,
.accessory-gold_chain_1::after,
.accessory-gold_chain_2::before,
.accessory-gold_chain_3::before,
.accessory-gold_chain_2::after,
.accessory-gold_chain_3::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 240, 180, 0.55) 35%,
            rgba(255, 220, 120, 0) 75%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    will-change: opacity, transform;
}

.accessory-gold_chain_1::before,
.accessory-gold_chain_2::before,
.accessory-gold_chain_3::before {
    top: 20%;
    left: 10%;
    animation: chainSparkle 5s ease-in-out infinite;
}

.accessory-gold_chain_1::after,
.accessory-gold_chain_2::after,
.accessory-gold_chain_3::after {
    top: 70%;
    left: 80%;
    width: 4px;
    height: 4px;
    animation: chainSparkle 6s ease-in-out infinite;
    animation-delay: 2.5s;
}

/* ===== Extras ===== */
.accessory-angel_wings {
    top: calc(47px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(167px * var(--doll-scale) / 1.5);
    z-index: -1;
}

.accessory-color_wings {
    top: calc(34px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(170px * var(--doll-scale) / 1.5);
    z-index: -1;
}

.accessory-halo {
    top: calc(-24px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(60px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.robot-body:has(.accessory-girl_hair_7) .accessory-halo,
.preview-robot:has(.accessory-girl_hair_7) .accessory-halo {
    top: calc(-44px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_cat_hat) .accessory-halo,
.preview-robot:has(.accessory-girl_cat_hat) .accessory-halo {
    top: calc(-40px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-crown):has(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8, .accessory-man_hair_9, .accessory-man_hair_10) .accessory-halo {
    top: calc(-46px * var(--doll-scale) / 1.5);
}

.accessory-shar_red {
    top: calc(-27px * var(--doll-scale) / 1.5);
    right: calc(-44px * var(--doll-scale) / 1.5);
    width: calc(53px * var(--doll-scale) / 1.5);
    z-index: -1;
    transform-origin: bottom center;
    animation: balloonSway 4s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

.accessory-shar_red_2,
.accessory-shar_violet_1 {
    top: calc(-27px * var(--doll-scale) / 1.5);
    right: calc(-68px * var(--doll-scale) / 1.5);
    width: calc(74px * var(--doll-scale) / 1.5);
    z-index: -1;
    transform-origin: bottom center;
    animation: balloonSway 4s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

.accessory-shar_red img,
.accessory-shar_red_2 img,
.accessory-shar_violet_1 img {
    pointer-events: none;
}

.accessory-china_shar_1,
.accessory-china_shar_2,
.accessory-china_shar_3,
.accessory-china_shar_4 {
    top: calc(-10px * var(--doll-scale) / 1.5);
    left: 68px;
    width: calc(60px * var(--doll-scale) / 1.5);
    z-index: -1;
    transform-origin: center bottom;
    animation: chinaLanternFloat 5s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

.accessory-china_shar_1 img,
.accessory-china_shar_2 img,
.accessory-china_shar_3 img,
.accessory-china_shar_4 img {
    pointer-events: none;
}

@keyframes chinaLanternFloat {
    0%   { transform: translate(0, 0)     rotate(-2deg); }
    25%  { transform: translate(4px, -6px) rotate(1deg); }
    50%  { transform: translate(0, -10px) rotate(2deg); }
    75%  { transform: translate(-4px, -6px) rotate(-1deg); }
    100% { transform: translate(0, 0)     rotate(-2deg); }
}

.accessory-bottle_wine {
    top: calc(92px * var(--doll-scale) / 1.5);
    right: calc(-2px * var(--doll-scale) / 1.5);
    width: calc(14px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-micro_1 {
    top: calc(72px * var(--doll-scale) / 1.5);
    right: calc(-8px * var(--doll-scale) / 1.5);
    width: calc(28px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-watch_1 {
    top: calc(110px * var(--doll-scale) / 1.5);
    right: calc(2px * var(--doll-scale) / 1.5);
    width: calc(14px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot)[data-gender="female"] .accessory-watch_1 {
    top: calc(114px * var(--doll-scale) / 1.5);
    right: calc(3px * var(--doll-scale) / 1.5);
    width: calc(11px * var(--doll-scale) / 1.5);
}

.accessory-girl_bag_1 {
    top: calc(123px * var(--doll-scale) / 1.5);
    left: calc(-10px * var(--doll-scale) / 1.5);
    width: calc(30px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-ice_1 {
    top: calc(93px * var(--doll-scale) / 1.5);
    left: calc(-10px * var(--doll-scale) / 1.5);
    width: calc(20px * var(--doll-scale) / 1.5);
    z-index: 11;
}

/* Food/drink items always render above any clothing (incl. fur coats). */
.cat-food_drink {
    z-index: 11;
}

.accessory-girl_bag_2 {
    top: calc(123px * var(--doll-scale) / 1.5);
    left: calc(-8px * var(--doll-scale) / 1.5);
    width: calc(26px * var(--doll-scale) / 1.5);
    z-index: 8;
    overflow: visible;
    isolation: isolate;
}

.accessory-girl_ritual_klinok {
    top: calc(104px * var(--doll-scale) / 1.5);
    right: calc(37px * var(--doll-scale) / 1.5);
    width: calc(21px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-fox_sharf_1,
.accessory-fox_sharf_2 {
    top: calc(68px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(56px * var(--doll-scale) / 1.5);
    z-index: 11;
}

.accessory-cocktail_1 {
    top: calc(106px * var(--doll-scale) / 1.5);
    right: calc(-5px * var(--doll-scale) / 1.5);
    width: calc(19px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-guitar_1 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: calc(3px * var(--doll-scale) / 1.5);
    width: calc(87px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-lightsaber_red {
    top: calc(51px * var(--doll-scale) / 1.5);
    left: calc(-10px * var(--doll-scale) / 1.5);
    transform: rotate(-13deg);
    width: calc(16px * var(--doll-scale) / 1.5);
    z-index: 8;
    overflow: visible;
}

/* ===== Cane (трость): periodic spin + sparkle particles ===== */
.accessory-cane_1 {
    top: calc(111px * var(--doll-scale) / 1.5);
    left: calc(0px * var(--doll-scale) / 1.5);
    width: calc(13px * var(--doll-scale) / 1.5);
    z-index: 8;
    overflow: visible;
    isolation: isolate;
    transform-origin: center;
}

.accessory-cane_1 img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: center;
    animation: caneSpin 10s linear infinite;
    will-change: transform;
}

@keyframes caneSpin {
    0%, 90%   { transform: rotate(0deg); }
    100%      { transform: rotate(360deg); }
}

.accessory-cane_1 .diamond-sparkle {
    position: absolute;
    width: var(--star-size, 4px);
    height: var(--star-size, 4px);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 240, 200, 0.6) 35%,
            rgba(255, 220, 150, 0) 70%);
    border-radius: 50%;
    animation-name: diamondParticle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: opacity, transform;
}

.accessory-cane_1 .diamond-sparkle::before,
.accessory-cane_1 .diamond-sparkle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 100%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.accessory-cane_1 .diamond-sparkle::before {
    width: calc(var(--star-size, 4px) * 2.4);
    height: 1px;
}

.accessory-cane_1 .diamond-sparkle::after {
    width: 1px;
    height: calc(var(--star-size, 4px) * 2.4);
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 100%);
}

@keyframes balloonSway {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}

/* ===== Eyewear (glasses/masks) — above piercing, below hair ===== */
.accessory-sunglasses_1 {
    top: calc(26px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(66px * var(--doll-scale) / 1.5);
    z-index: 5;
}

/* Eye makeup — sits over the eye area, but BELOW the eyes (z=2 on the
   .doll-eyes-img element). All 9 variants share the same layout. */
.accessory-girl_make_1,
.accessory-girl_make_2,
.accessory-girl_make_3,
.accessory-girl_make_4,
.accessory-girl_make_5,
.accessory-girl_make_6,
.accessory-girl_make_7,
.accessory-girl_make_8,
.accessory-girl_make_9 {
    top: calc(24px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(77px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.accessory-sunglasses_3,
.accessory-sunglasses_4,
.accessory-sunglasses_5 {
    top: calc(26px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(66px * var(--doll-scale) / 1.5);
    z-index: 5;
}

.accessory-sunglasses_2 {
    top: calc(26px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(66px * var(--doll-scale) / 1.5);
    z-index: 5;
}

/* ===== Piercing ===== */
.accessory-girl_earrings_1 {
    top: calc(53px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 7;
}

.accessory-brow_piercing_1 {
    top: calc(23px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(45px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

.accessory-pircream_1 {
    bottom: calc(48px * var(--doll-scale) / 1.5);
    left: 9%;
    transform: translateX(-50%);
    width: calc(18px * var(--doll-scale) / 1.5);
    z-index: 11;
}

.accessory-face_piercing_1 {
    top: calc(50px * var(--doll-scale) / 1.5);
    left: 37%;
    transform: translateX(-50%);
    width: calc(2px * var(--doll-scale) / 1.5);
    z-index: 5;
    overflow: visible;
    isolation: isolate;
}

/* ===== Tattoo (below all clothing) ===== */
.accessory-tattoo_1 {
    top: calc(86px * var(--doll-scale) / 1.5);
    right: -4px;
    transform: translateX(-50%);
    width: calc(16px * var(--doll-scale) / 1.5);
    z-index: 1;
    filter: opacity(0.9);
}

.robot-body[data-gender="female"] .accessory-tattoo_1,
.preview-robot[data-gender="female"] .accessory-tattoo_1 {
    top: calc(85px * var(--doll-scale) / 1.5);
    right: 5px;
    width: calc(14px * var(--doll-scale) / 1.5);
    z-index: 1;
    filter: opacity(0.9);
    transform: rotate(-5deg);
}

.accessory-tattoo_2 {
    top: calc(78px * var(--doll-scale) / 1.5);
    right: -8px;
    transform: translateX(-50%) rotate(5deg);
    width: calc(21px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.accessory-tattoo_3 {
    top: calc(74px * var(--doll-scale) / 1.5);
    left: 21px;
    transform: translateX(-50%);
    width: calc(52px * var(--doll-scale) / 1.5);
    z-index: 1;
}

:is(.robot-body, .preview-robot):has(.accessory-doll_male_ton_2) .accessory-tattoo_3 {
    filter: brightness(0.3);
}

:is(.robot-body, .preview-robot):has(.accessory-doll_male_ton_1) .accessory-tattoo_3 {
    filter: brightness(0.5);
}

:is(.robot-body, .preview-robot):has(.accessory-doll_female_ton_2, .accessory-doll_female_ton_1) .accessory-tattoo_4 {
    filter: brightness(0.5);
}

:is(.robot-body, .preview-robot):has(.accessory-doll_male_ton_2, .accessory-doll_female_ton_2) .accessory-tattoo_2 {
    filter: brightness(0.4);
}

.accessory-tattoo_4 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 16px;
    transform: translateX(-50%);
    width: calc(68px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.accessory-tattoo_5 {
    top: calc(71px * var(--doll-scale) / 1.5);
    left: 30px;
    transform: translateX(-50%);
    width: calc(73px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.accessory-tattoo_6 {
    top: calc(129px * var(--doll-scale) / 1.5);
    left: 39px;
    transform: translateX(-50%);
    width: calc(20px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.accessory-man_tatto_1 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 37px;
    transform: translateX(-50%);
    width: calc(35px * var(--doll-scale) / 1.5);
    z-index: 1;
    opacity: 0.8;
}

.accessory-girl_tatto_1 {
    top: calc(72.9px * var(--doll-scale) / 1.5);
    left: 22px;
    transform: translateX(-50%);
    width: calc(26px * var(--doll-scale) / 1.5);
    z-index: 1;
    opacity: 0.8;
}

.accessory-tattoo_7 {
    top: calc(73px * var(--doll-scale) / 1.5);
    left: 44px;
    transform: translateX(-50%);
    width: calc(37px * var(--doll-scale) / 1.5);
    z-index: 1;
}

.robot-body[data-gender="female"] .accessory-tattoo_2,
.preview-robot[data-gender="female"] .accessory-tattoo_2 {
    top: calc(77px * var(--doll-scale) / 1.5);
    right: -8px;
    width: calc(22px * var(--doll-scale) / 1.5);
    z-index: 1;
}

@keyframes chainSparkle {
    0%, 70%, 100% {
        opacity: 0;
        transform: scale(0.4);
    }
    35% {
        opacity: 0.95;
        transform: scale(1);
    }
}

/* headwear (above hair) */
.accessory-man_hat_1 {
    top: calc(-17px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(77px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-man_panama_1 {
    top: calc(-9px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(93px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-man_panama_2 {
    top: calc(-14px * var(--doll-scale) / 1.5);
    left: 46%;
    transform: translateX(-50%);
    width: calc(77px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-man_panama_3 {
    top: calc(-14px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(74px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-man_bandana_1 {
    top: calc(-12px * var(--doll-scale) / 1.5);
    left: 58%;
    transform: translateX(-50%);
    width: calc(82px * var(--doll-scale) / 1.5);
    z-index: 8;
}

/* Per-hairstyle semicircle crop for panama_1/panama_2 — replaces the old
   "make hair disappear" rules. Each hairstyle gets its own selector so the
   polygon can be tuned individually later. Offers inherit visually from
   their group lead — we don't add rules for the offer variants here. */
:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) .accessory-man_hair_1 {
    clip-path: polygon(0% 100%, 0% 30%, 4% 18%, 12% 10%, 24% 4%, 38% 1%, 50% 0%, 62% 1%, 76% 4%, 88% 10%, 96% 18%, 100% 30%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) :is(.accessory-man_hair_2, .accessory-man_hair_4, .accessory-man_hair_5) {
    clip-path: polygon(20% 150%, -47% 32%, 17% 44%, 25% 10%, 52% 4%, 73% 18%, 107% 17%, 12% 16%, 33% 23%, 118% 52%, 105% 45%, 150% -34%, 126% 114%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) .accessory-man_hair_3 {
    clip-path: polygon(0% 100%, 0% 30%, 4% 18%, 12% 10%, 24% 4%, 38% 1%, 50% 0%, 62% 1%, 76% 4%, 88% 10%, 96% 18%, 100% 30%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) .accessory-man_hair_4 {
    clip-path: polygon(0% 100%, 0% 30%, 4% 18%, 12% 10%, 24% 4%, 38% 1%, 50% 0%, 62% 1%, 76% 4%, 88% 10%, 96% 18%, 100% 30%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) .accessory-man_hair_5 {
    clip-path: polygon(0% 100%, 0% 30%, 4% 18%, 12% 10%, 24% 4%, 38% 1%, 50% 0%, 62% 1%, 76% 4%, 88% 10%, 96% 18%, 100% 30%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2, .accessory-cap_m_1, .accessory-black-cap)) :is(.accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8) {
    clip-path: polygon(0% 100%, 0% 30%, 4% 111%, 12% 82%, 24% 72%, 38% 52%, 50% 48%, 62% 79%, 76% 102%, 88% 90%, 96% 107%, 100% 150%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) .accessory-man_hair_9 {
    clip-path: polygon(0% 100%, 0% 30%, 4% 18%, 12% 10%, 24% 4%, 38% 1%, 50% 0%, 62% 1%, 76% 4%, 88% 10%, 96% 18%, 100% 30%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(.accessory-man_panama_1) :is(.accessory-man_hair_9, .accessory-man_hair_10) {
    clip-path: polygon(-6% 150%, 23% 30%, 150% 118%, 150% 22%, 150% 4%, 150% 1%, 150% 0%, 150% 1%, 150% 4%, 150% 10%, 150% 18%, 100% 30%, 100% 150%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) :is(.accessory-man_hair_11, .accessory-man_hair_12) {
    clip-path: polygon(0% 100%, 0% 39%, 4% 77%, 12% 77%, 24% 31%, 38% 75%, 50% 88%, 62% 122%, 76% 48%, 88% 75%, 96% 123%, 100% 3%, 100% 131%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) .accessory-man_hair_13 {
    clip-path: polygon(0% 100%, 0% 30%, 4% 18%, 12% 10%, 24% 4%, 38% 1%, 50% 0%, 62% 1%, 76% 4%, 88% 10%, 96% 18%, 100% 30%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-man_panama_1, .accessory-man_panama_2)) :is(
    .accessory-man_hair_lrez_1, .accessory-man_hair_lrez_2, .accessory-man_hair_lrez_3,
    .accessory-man_hair_lrez_4, .accessory-man_hair_lrez_5, .accessory-man_hair_lrez_6,
    .accessory-man_hair_lrez_7, .accessory-man_hair_lrez_8, .accessory-man_hair_lrez_9,
    .accessory-man_hair_lrez_10
) {
    clip-path: polygon(-50% 135%, -31% 71%, 1% 123%, 25% 31%, 24% 39%, 38% 26%, 50% 27%, 62% 88%, 76% 45%, 98% 76%, 96% 150%, 100% -23%, 150% 100%);
}

:is(.robot-body, .preview-robot):has(.accessory-man_panama_3) :is(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8, .accessory-man_hair_9, .accessory-man_hair_10, .accessory-man_hair_11, .accessory-man_hair_12) {
    clip-path: ellipse(50% 60% at 50% 100%);
}

:is(.robot-body, .preview-robot):has(.accessory-man_hair_2, .accessory-man_hair_4, .accessory-man_hair_5) .accessory-man_panama_3 {
    top: calc(-23px * var(--doll-scale) / 1.5);
    width: calc(82px * var(--doll-scale) / 1.5);
}

.accessory-robo_helmet_1 {
    top: calc(-13px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(87px * var(--doll-scale) / 1.5);
    z-index: 25;
}

.accessory-robo_helmet_2 {
    top: calc(-4px * var(--doll-scale) / 1.5);
    left: 42%;
    transform: translateX(-50%);
    width: calc(90px * var(--doll-scale) / 1.5);
    z-index: 25;
}

.accessory-robo_helmet_3 {
    top: calc(-4px * var(--doll-scale) / 1.5);
    left: 42%;
    transform: translateX(-50%);
    width: calc(90px * var(--doll-scale) / 1.5);
    z-index: 25;
}

.accessory-panda_helmet_1 {
    top: calc(-3px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(87px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-birthday_hat_1 {
    top: calc(-37px * var(--doll-scale) / 1.5);
    left: 77%;
    transform: translateX(-50%);
    width: calc(39px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-devil_horns {
    top: calc(-1px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(50px * var(--doll-scale) / 1.5);
    z-index: 24;
}

.accessory-rabbit_mask {
    top: calc(-52px * var(--doll-scale) / 1.5);
    left: 48%;
    transform: translateX(-50%);
    width: calc(94px * var(--doll-scale) / 1.5);
    z-index: 9;
}

.accessory-mask_hockey {
    top: calc(38px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(66px * var(--doll-scale) / 1.5);
    /* above beards (z=21) so the mask hides the beard, but hair (raised below)
       still drapes on top of the mask. */
    z-index: 22;
}

.accessory-friday_mask {
    top: calc(-6px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 22;
}

/* Raise hair above the killer mask so it drapes over the mask;
   the mask stays above beards (z=21) but below hair (z=23). */
:is(.robot-body, .preview-robot):has(.accessory-friday_mask) .cat-hairstyles {
    z-index: 23;
}

/* When the hockey mask is worn, raise ALL hairstyles above the mask so the
   hair frames the mask instead of being hidden by it. */
:is(.robot-body, .preview-robot):has(.accessory-mask_hockey) .cat-hairstyles {
    z-index: 23;
}

:is(.robot-body, .preview-robot):has(.accessory-mask_hockey, .accessory-friday_mask)
:is(.accessory-girl_cat_hat, .accessory-girl_cat_hat_1) {
    z-index: 26 !important;
}

/* ...and raise headwear above that raised hair, so a hat stays on top
   of the hair when both a mask and a hat are worn. */
:is(.robot-body, .preview-robot):has(.accessory-mask_hockey, .accessory-friday_mask)
:is(.accessory-panda_helmet_1, .accessory-girl_cat_hat, .accessory-girl_bandana_1, .accessory-girl_bandana_2,
    .accessory-girl_bandana_3, .accessory-crown, .accessory-man_hat_1, .accessory-robo_helmet_1,
    .accessory-birthday_hat_1, .accessory-devil_horns, .accessory-man_panama_1, .accessory-man_panama_2,
    .accessory-man_panama_3, .accessory-man_bandana_1, .accessory-cowboycap_girl_1) {
    /* !important so per-hairstyle headwear rules (which re-declare z-index)
       can't drop the hat back under the raised hair when a mask is worn. */
    z-index: 24 !important;
}

:is(.robot-body, .preview-robot):has(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8, .accessory-man_hair_9, .accessory-man_hair_10) .accessory-birthday_hat_1 {
    top: calc(-44px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18) .accessory-birthday_hat_1 {
    top: calc(-50px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18) .accessory-devil_horns {
    top: calc(-13px * var(--doll-scale) / 1.5);
}

/* clip hair under beanie: keep front bangs, hide top and sides */
:is(.robot-body, .preview-robot):has(.accessory-man_hat_1) :is(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8, .accessory-man_hair_11, .accessory-man_hair_12) {
    clip-path: polygon(48% 0%, 66% 0%, 100% 100%, 0% 100%);
}

:is(.robot-body, .preview-robot):has(.accessory-man_hat_1) :is(.accessory-man_hair_2, .accessory-man_hair_4, .accessory-man_hair_5) {
    clip-path: polygon(15% 0%, 88% 0%, 100% 100%, 0% 100%);
}

:is(.robot-body, .preview-robot):has(.accessory-man_hat_1) :is(.accessory-man_hair_9, .accessory-man_hair_10) {
    clip-path: ellipse(50% 35% at 51% 93%);
}

:is(.robot-body, .preview-robot):has(.accessory-man_hat_1) :is(.accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8) {
    clip-path: ellipse(52% 53% at 52% 107%);
}

/* "Lrez" hairstyles under a beanie/hat — keep only the fringe visible.
   The 8-point polygon now exposes the TOP edge too: tweak the values to
   shape the bangs precisely.

   Reference points (each "—" is a controllable knob):
                                          ← TOP edge of the fringe:
        top-left  ──■ 36% 58%           change 58% to move the bangs
                            ■ 64% 58% ←  up/down. 36/64 = horizontal
                                          width of the fringe top.

                                          ← FLARE outwards:
        flare L  ──■ 22% 78%             22/78 = wide-bottom width;
                            ■ 78% 78% ←  78% = where the flare begins
                                          vertically.

                                          ← BOTTOM edge (sides):
        bottom L ──■ 22% 100%           keeps the lower hair pixels.
                            ■ 78% 100% ← */
:is(.robot-body, .preview-robot):has(.accessory-man_hat_1)
:is(
    .accessory-man_hair_lrez_1, .accessory-man_hair_lrez_2, .accessory-man_hair_lrez_3,
    .accessory-man_hair_lrez_4, .accessory-man_hair_lrez_5, .accessory-man_hair_lrez_6,
    .accessory-man_hair_lrez_7, .accessory-man_hair_lrez_8, .accessory-man_hair_lrez_9,
    .accessory-man_hair_lrez_10
) {
    clip-path: polygon(36% 42%, 29% 36%, 75% 21%, 94% 100%, 16% 100%, 14% 57%);
}


.accessory-girl_cat_hat {
    top: calc(-21px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(73px * var(--doll-scale) / 1.5);
    z-index: 16;
}

.accessory-girl_cat_hat_1 {
    top: calc(-17px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 16;
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_hair_1, .accessory-girl_hair_8, .accessory-girl_hair_9)) .accessory-girl_cat_hat_1 {
    top: calc(-23px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_2) .accessory-girl_cat_hat_1 {
    top: calc(-20px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_3) .accessory-girl_cat_hat_1 {
    top: calc(-18px * var(--doll-scale) / 1.5);
    width: calc(78px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18)) .accessory-girl_cat_hat_1 {
    top: calc(-26px * var(--doll-scale) / 1.5);
    width: calc(76px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(:is(
    .accessory-girl_hair_21,
    .accessory-girl_hair_21_darkblue,
    .accessory-girl_hair_21_lightblue,
    .accessory-girl_hair_21_turquoise,
    .accessory-girl_hair_21_green,
    .accessory-girl_hair_21_yellow,
    .accessory-girl_hair_21_ginger,
    .accessory-girl_hair_21_red,
    .accessory-girl_hair_21_pink,
    .accessory-girl_hair_21_violet,
    .accessory-girl_hair_21_white
)) .accessory-girl_cat_hat_1 {
    top: calc(-22px * var(--doll-scale) / 1.5);
    transform: translateX(-50%) rotate(2deg);
    width: calc(76px * var(--doll-scale) / 1.5);
    z-index: 16;
}

:is(.robot-body, .preview-robot):has(:is(
    .accessory-girl_hair_21,
    .accessory-girl_hair_21_darkblue,
    .accessory-girl_hair_21_lightblue,
    .accessory-girl_hair_21_turquoise,
    .accessory-girl_hair_21_green,
    .accessory-girl_hair_21_yellow,
    .accessory-girl_hair_21_ginger,
    .accessory-girl_hair_21_red,
    .accessory-girl_hair_21_pink,
    .accessory-girl_hair_21_violet,
    .accessory-girl_hair_21_white
)) .accessory-girl_cat_hat {
    top: calc(-21px * var(--doll-scale) / 1.5);
    left: 48%;
    transform: translateX(-50%);
    width: calc(81px * var(--doll-scale) / 1.5);
    z-index: 16;
    clip-path: inset(0px 0px calc(5px * var(--doll-scale) / 1.5) 0);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_cat_hat, .accessory-girl_cat_hat_1)) .accessory-girl_hair_14 {
    clip-path: polygon(0% 100%, 0% 30%, 35% 38%, 18% 13%, 28% 11%, 42% 12%, 50% 0%, 56% 1%, 76% 4%, 65% 31%, 96% 33%, 100% 30%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_cat_hat, .accessory-girl_cat_hat_1)) .accessory-girl_hair_7 {
    clip-path: polygon(0% 100%, 0% 32%, 35% 38%, 18% 39%, 74% 18%, 100% 8%, 55% 0%, 53% 0%, 88% 4%, 65% 31%, 96% 33%, 100% 30%, 100% 100%);
}

.accessory-crown {
    top: calc(-23px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(71px * var(--doll-scale) / 1.5);
    z-index: 8;
    overflow: visible;
    isolation: isolate;
}

:is(.robot-body, .preview-robot):has(.accessory-man_hair_1, .accessory-man_hair_3, .accessory-man_hair_6, .accessory-man_hair_7, .accessory-man_hair_8, .accessory-man_hair_9, .accessory-man_hair_10) .accessory-crown {
    top: calc(-40px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_1, .accessory-girl_hair_8) .accessory-crown {
    top: calc(-31px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_2) .accessory-crown {
    top: calc(-34px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_5) .accessory-crown {
    top: calc(-28px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_3, .accessory-girl_hair_6) .accessory-crown {
    top: calc(-27px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_4, .accessory-girl_hair_13, .accessory-girl_hair_14, .accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18) .accessory-crown {
    top: calc(-24px * var(--doll-scale) / 1.5);
    left: 51%;
    width: calc(49px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_7) .accessory-crown {
    top: calc(-35px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_9) .accessory-crown {
    top: calc(-31px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_10, .accessory-girl_hair_11, .accessory-girl_hair_12) .accessory-crown {
    top: calc(-29px * var(--doll-scale) / 1.5);
}


.accessory-girl_bandana_1,
.accessory-girl_bandana_2,
.accessory-girl_bandana_3 {
    top: calc(6px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(67px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-cowboycap_girl_1 {
    top: calc(-21px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100px * var(--doll-scale) / 1.5);
    z-index: 24;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_1, .accessory-girl_hair_8) .accessory-cowboycap_girl_1 {
    top: calc(-30px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(97px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_2) .accessory-cowboycap_girl_1 {
    top: calc(-27px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(97px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_5) .accessory-cowboycap_girl_1 {
    top: calc(-18px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(97px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_3) .accessory-cowboycap_girl_1 {
    top: calc(-22px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(97px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18) .accessory-cowboycap_girl_1 {
    top: calc(-36px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(97px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_4, .accessory-girl_hair_13) .accessory-cowboycap_girl_1 {
    top: calc(-21px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(94px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_14) .accessory-cowboycap_girl_1 {
    top: calc(-34px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(108px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_6) .accessory-cowboycap_girl_1 {
    top: calc(-23px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(95px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_7) .accessory-cowboycap_girl_1 {
    top: calc(-35px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(98px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_20) .accessory-cowboycap_girl_1 {
    top: calc(-42px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%) rotate(4deg);
    width: calc(112px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_9) .accessory-cowboycap_girl_1 {
    top: calc(-27px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(100px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_10, .accessory-girl_hair_11, .accessory-girl_hair_12) .accessory-cowboycap_girl_1 {
    top: calc(-23px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(100px * var(--doll-scale) / 1.5);
    z-index: 8;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_19) .accessory-cowboycap_girl_1 {
    top: calc(-19px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(97px * var(--doll-scale) / 1.5);
    z-index: 8;
}

/* girl_hair_19: when the cowboy hat is on, dome the top of the hair so it
   doesn't poke above the hat brim. */
:is(.robot-body, .preview-robot):has(.accessory-cowboycap_girl_1) .accessory-girl_hair_19 {
    clip-path: polygon(0% 100%, 0% 31%, 26% 12%, 30% 3%, 50% 0%, 70% 3%, 88% 25%, 100% 28%, 100% 100%);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_5) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(0px * var(--doll-scale) / 1.5);
    width: calc(69px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_3, .accessory-girl_hair_6) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(2px * var(--doll-scale) / 1.5);
    width: calc(66px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_4, .accessory-girl_hair_13, .accessory-girl_hair_14) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(4px * var(--doll-scale) / 1.5);
    width: calc(65px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-11px * var(--doll-scale) / 1.5);
    width: calc(77px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_20) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-10px * var(--doll-scale) / 1.5);
    left: 47%;
    width: calc(80px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_7) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-2px * var(--doll-scale) / 1.5);
    width: calc(80px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_9) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-7px * var(--doll-scale) / 1.5);
    width: calc(72px * var(--doll-scale) / 1.5);
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_1, .accessory-girl_hair_8) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-3px * var(--doll-scale) / 1.5);
    width: calc(75px * var(--doll-scale) / 1.5);
    left: 49%;
}

:is(.robot-body, .preview-robot):has(.accessory-girl_hair_2) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(-4px * var(--doll-scale) / 1.5);
    width: calc(77px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_1,
.accessory-girl_hair_8) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_1,
.accessory-girl_hair_8) .accessory-girl_cat_hat {
    top: calc(-29px * var(--doll-scale) / 1.5);
    width: calc(82px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_2) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_2) .accessory-girl_cat_hat {
    top: calc(-29px * var(--doll-scale) / 1.5);
    width: calc(88px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_5) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_5) .accessory-girl_cat_hat {
    top: calc(-21px * var(--doll-scale) / 1.5);
    width: calc(77px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_4, .accessory-girl_hair_13, .accessory-girl_hair_14) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_4, .accessory-girl_hair_13, .accessory-girl_hair_14) .accessory-girl_cat_hat {
    top: calc(-18px * var(--doll-scale) / 1.5);
    width: calc(72px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_15, .accessory-girl_hair_16, .accessory-girl_hair_17, .accessory-girl_hair_18) .accessory-girl_cat_hat {
    top: calc(-22px * var(--doll-scale) / 1.5);
    width: calc(77px * var(--doll-scale) / 1.5);
}

.robot-body:has(.accessory-girl_hair_7) .accessory-girl_cat_hat,
.preview-robot:has(.accessory-girl_hair_7) .accessory-girl_cat_hat {
    top: calc(-35px * var(--doll-scale) / 1.5);
    width: calc(76px * var(--doll-scale) / 1.5);
}

/* hair on top */
.accessory-man_hair_1 {
    top: calc(-19px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(76px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_6,
.accessory-man_hair_7,
.accessory-man_hair_8 {
    top: calc(-21px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(89px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_9,
.accessory-man_hair_10 {
    top: calc(-20px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(90px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_11,
.accessory-man_hair_12 {
    top: calc(-16px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(93px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_13,
.accessory-man_hair_14,
.accessory-man_hair_15,
.accessory-man_hair_16,
.accessory-man_hair_17,
.accessory-man_hair_18 {
    top: calc(-28px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(76px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_2 {
    top: calc(-9px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(85px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_3 {
    top: calc(-19px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(76px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_4 {
    top: calc(-9px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(85px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-man_hair_5 {
    top: calc(-9px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(85px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_1 {
    top: calc(-14px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(86px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_8 {
    top: calc(-19px * var(--doll-scale) / 1.5);
    left: 46%;
    transform: translateX(-50%);
    width: calc(152px * var(--doll-scale) / 1.5);
    z-index: 6;
}

/* girl_hair_21 (Женственная) — all 11 color variants share the same layout. */
/* Long hair drapes OVER any top — z=9 beats the max clothing_top z-index
   (8) so jackets/coats never cover it. */
.accessory-girl_hair_21,
.accessory-girl_hair_21_darkblue,
.accessory-girl_hair_21_lightblue,
.accessory-girl_hair_21_turquoise,
.accessory-girl_hair_21_green,
.accessory-girl_hair_21_yellow,
.accessory-girl_hair_21_ginger,
.accessory-girl_hair_21_red,
.accessory-girl_hair_21_pink,
.accessory-girl_hair_21_violet,
.accessory-girl_hair_21_white {
    top: calc(-11px * var(--doll-scale) / 1.5);
    left: 48%;
    transform: translateX(-50%);
    width: calc(90px * var(--doll-scale) / 1.5);
    z-index: 9;
}

.accessory-girl_hair_2 {
    top: calc(-13px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(83px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_3 {
    top: calc(-7px * var(--doll-scale) / 1.5);
    left: 51%;
    transform: translateX(-50%);
    width: calc(81px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_4,
.accessory-girl_hair_13 {
    top: calc(-5px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(75px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_15,
.accessory-girl_hair_16,
.accessory-girl_hair_17,
.accessory-girl_hair_18 {
    top: calc(-14px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(75px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_19 {
    top: calc(-12px * var(--doll-scale) / 1.5);
    left: 48%;
    transform: translateX(-50%);
    width: calc(79px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_20 {
    top: calc(-34px * var(--doll-scale) / 1.5);
    left: 42%;
    transform: translateX(-50%);
    width: calc(89px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_22,
.accessory-girl_hair_23,
.accessory-girl_hair_24,
.accessory-girl_hair_25,
.accessory-girl_hair_26,
.accessory-girl_hair_27 {
    top: calc(-9.1px * var(--doll-scale) / 1.5);
    left: 50.5%;
    transform: translateX(-50%);
    width: calc(88px * var(--doll-scale) / 1.5);
    z-index: 15;
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_hair_22, .accessory-girl_hair_23, .accessory-girl_hair_24, .accessory-girl_hair_25, .accessory-girl_hair_26, .accessory-girl_hair_27)) :is(.cat-food_drink, .accessory-cane_1, .accessory-girl_bag_1, .accessory-girl_bag_2, .accessory-lightsaber_red) {
    z-index: 24;
}

:is(.robot-body, .preview-robot):has(:is(.accessory-girl_hair_22, .accessory-girl_hair_23, .accessory-girl_hair_24, .accessory-girl_hair_25, .accessory-girl_hair_26, .accessory-girl_hair_27)) :is(.accessory-girl_bandana_1, .accessory-girl_bandana_2, .accessory-girl_bandana_3) {
    top: calc(1px * var(--doll-scale) / 1.5);
    left: 49%;
    transform: translateX(-50%);
    width: calc(73px * var(--doll-scale) / 1.5);
    z-index: 8;
}

.accessory-girl_hair_14 {
    top: calc(-16px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(89px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_5 {
    top: calc(-7px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(78px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_6 {
    top: calc(-4px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(72px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_7 {
    top: calc(-30px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(80px * var(--doll-scale) / 1.5);
    z-index: 6;
}

.accessory-girl_hair_9 {
    top: calc(-15px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(91px * var(--doll-scale) / 1.5);
    z-index: 6;
    overflow: visible;
    isolation: isolate;
}

.accessory-girl_hair_10,
.accessory-girl_hair_11,
.accessory-girl_hair_12 {
    top: calc(-7px * var(--doll-scale) / 1.5);
    left: 50%;
    transform: translateX(-50%);
    width: calc(81px * var(--doll-scale) / 1.5);
    z-index: 6;
}