/* PD Halloween layer (owner 2026-10-19: «внедри ток эти хелуин фишечки аккуратно», «до 2 ноября»).
   Loaded only while the server switch "halloween" is on (src/lib/halloween.ts), non-blocking.
   Decoration only: every piece is a ::before/::after on an existing element or the .hw-sky layer, pointer-events
   none, animation transform/opacity only, no change to any existing size or position. Mockup:
   https://claude.ai/artifact/XbbxMvrYg28oTjNz6Mfm4P */

:root {
  --hw-pk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 4.5c-.6-2 0-3.4 1.2-4' fill='none' stroke='%233FA34D' stroke-width='1.8' stroke-linecap='round'/%3E%3Cellipse cx='7' cy='13' rx='6.2' ry='7.6' fill='%23E0651A'/%3E%3Cellipse cx='17' cy='13' rx='6.2' ry='7.6' fill='%23E0651A'/%3E%3Cellipse cx='12' cy='13' rx='6.4' ry='8.2' fill='%23FF8A1F'/%3E%3Cg fill='%23FFE24A'%3E%3Cpath d='M7 11.2L9.2 8l1.4 3.2z'/%3E%3Cpath d='M17 11.2L14.8 8l-1.4 3.2z'/%3E%3Cpath d='M6.6 13.6Q12 18.8 17.4 13.6l-1.9.9-1-1-1.3 1.4-1.2-1.2-1.2 1.2-1.3-1.4-1 1z'/%3E%3C/g%3E%3C/svg%3E");
  --hw-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cellipse cx='24' cy='34' rx='22' ry='5' fill='%230E001F' stroke='%23F49BF9' stroke-width='1.3'/%3E%3Cpath d='M12 33C15 22 18 14 22 8c3-4 8-6 14-4-5 2-7 6-8 11 2 7 5 13 8 18z' fill='%230E001F' stroke='%23F49BF9' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M14 28.6c7 2 14 2 20.6 0l1 3.2c-7.6 2-15.6 2-22.6 0z' fill='%23FF8A1F'/%3E%3Crect x='21.6' y='28.6' width='5' height='4.2' rx='.6' fill='none' stroke='%23F2FF00' stroke-width='1.1'/%3E%3C/svg%3E");
  --hw-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L100 0M0 0L96.6 25.9M0 0L86.6 50M0 0L70.7 70.7M0 0L50 86.6M0 0L25.9 96.6M0 0L0 100M18 0Q15.2 2 17.4 4.7Q14.2 5.9 15.6 9Q12.2 9.3 12.7 12.7Q9.3 12.2 9 15.6Q5.9 14.2 4.7 17.4Q2 15.2 0 18M34 0Q28.7 3.8 32.8 8.8Q26.8 11.1 29.4 17Q23 17.6 24 24Q17.6 23 17 29.4Q11.1 26.8 8.8 32.8Q3.8 28.7 0 34M52 0Q44 5.8 50.2 13.5Q41 17 45 26Q35.2 27 36.8 36.8Q27 35.2 26 45Q17 41 13.5 50.2Q5.8 44 0 52M72 0Q60.9 8 69.5 18.6Q56.7 23.5 62.4 36Q48.7 37.4 50.9 50.9Q37.4 48.7 36 62.4Q23.5 56.7 18.6 69.5Q8 60.9 0 72M92 0Q77.8 10.2 88.9 23.8Q72.5 30 79.7 46Q62.2 47.8 65.1 65.1Q47.8 62.2 46 79.7Q30 72.5 23.8 88.9Q10.2 77.8 0 92' fill='none' stroke='%23FFFFFF' stroke-opacity='.34' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --hw-spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 96'%3E%3Cpath d='M22 0V68' stroke='%23FFFFFF' stroke-opacity='.55'/%3E%3Cg stroke='%23F49BF9' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 72L8 66 4 70M15 76L6 75 2 80M15 80L7 84 4 90M17 83L11 90 10 95M28 72L36 66 40 70M29 76L38 75 42 80M29 80L37 84 40 90M27 83L33 90 34 95'/%3E%3C/g%3E%3Ccircle cx='22' cy='69' r='5' fill='%230E001F' stroke='%23F49BF9' stroke-width='.9'/%3E%3Cellipse cx='22' cy='80' rx='8' ry='9.5' fill='%230E001F' stroke='%23F49BF9' stroke-width='.9'/%3E%3Ccircle cx='20.2' cy='68.4' r='1.2' fill='%23F2FF00'/%3E%3Ccircle cx='23.8' cy='68.4' r='1.2' fill='%23F2FF00'/%3E%3C/svg%3E");
  --hw-spider-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 140'%3E%3Cpath d='M22 0V112' stroke='%23FFFFFF' stroke-opacity='.55'/%3E%3Cg stroke='%23F49BF9' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 116L8 110 4 114M15 120L6 119 2 124M15 124L7 128 4 134M17 127L11 134 10 139M28 116L36 110 40 114M29 120L38 119 42 124M29 124L37 128 40 134M27 127L33 134 34 139'/%3E%3C/g%3E%3Ccircle cx='22' cy='113' r='5' fill='%230E001F' stroke='%23F49BF9' stroke-width='.9'/%3E%3Cellipse cx='22' cy='124' rx='8' ry='9.5' fill='%230E001F' stroke='%23F49BF9' stroke-width='.9'/%3E%3Ccircle cx='20.2' cy='112.4' r='1.2' fill='%23F2FF00'/%3E%3Ccircle cx='23.8' cy='112.4' r='1.2' fill='%23F2FF00'/%3E%3C/svg%3E");
  --hw-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M32 9c-1.4 0-2.4 1-2.8 2.2l-1.4-2.6-.2 3.8C23 9.6 15 7.6 6 9.4c3.6 2.2 5 5.2 4.6 8.6 2.6-1.6 6.2-1.6 8.6.4 1.6-1.6 4.4-2 6.6-.8C27 20.8 29.2 23.6 32 25c2.8-1.4 5-4.2 6.2-7.4 2.2-1.2 5-.8 6.6.8 2.4-2 6-2 8.6-.4-.4-3.4 1-6.4 4.6-8.6-9-1.8-17 .2-21.6 3l-.2-3.8-1.4 2.6C34.4 10 33.4 9 32 9z' fill='%230E001F'/%3E%3Ccircle cx='30.4' cy='13.4' r='.9' fill='%23F2FF00'/%3E%3Ccircle cx='33.6' cy='13.4' r='.9' fill='%23F2FF00'/%3E%3C/svg%3E");
  --hw-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 72'%3E%3Cpath d='M7 38c-4 0-6.5 3-6 6.5 1.8-1.6 3.8-2.3 6-2.3zM53 38c4 0 6.5 3 6 6.5-1.8-1.6-3.8-2.3-6-2.3zM7 66l5.8-4.6 5.8 5.6 5.8-5.6 5.6 5.6 5.6-5.6 5.8 5.6 5.8-5.6L53 66V29C53 14 44 3 30 3S7 14 7 29z' fill='%23F7F2FF'/%3E%3Cellipse cx='22.5' cy='28' rx='3.3' ry='4.4' fill='%232A005E'/%3E%3Cellipse cx='37.5' cy='28' rx='3.3' ry='4.4' fill='%232A005E'/%3E%3Ccircle cx='23.6' cy='26.4' r='1.1' fill='%23FFFFFF'/%3E%3Ccircle cx='38.6' cy='26.4' r='1.1' fill='%23FFFFFF'/%3E%3Cellipse cx='30' cy='40' rx='3' ry='3.8' fill='%232A005E'/%3E%3Ccircle cx='17' cy='35' r='2.8' fill='%23F49BF9' fill-opacity='.75'/%3E%3Ccircle cx='43' cy='35' r='2.8' fill='%23F49BF9' fill-opacity='.75'/%3E%3C/svg%3E");
}

@keyframes hw-hat { 0%, 100% { transform: rotate(-12deg) } 50% { transform: rotate(-4deg) translateY(-1px) } }
@keyframes hw-wobble { 0%, 100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } }
@keyframes hw-swing { 0%, 100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
@keyframes hw-float { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-12px) rotate(3deg) } }
@keyframes hw-flap { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.4) } }
@keyframes hw-rise { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(-60px); opacity: 0 } }

/* 1. Pumpkins either side of the announcement text (every storefront page). */
.announcement-bar__message { position: relative; }
.announcement-bar__message::before,
.announcement-bar__message::after {
  content: ""; position: absolute; top: 50%; width: 20px; height: 18px; margin-top: -9px;
  background: var(--hw-pk) center / contain no-repeat; pointer-events: none;
}
.announcement-bar__message::before { left: -29px; }
.announcement-bar__message::after { right: -29px; }
/* 1b. When the bar text loops (phones, header.css «Бегущая строка»), the side pumpkins hide and one sits between
   the copies instead of the dot (2026-10-20). */
.ab-ticker .ab-ticker__sep::before {
  content: ""; display: inline-block; width: 18px; height: 16px; vertical-align: -3px;
  background: var(--hw-pk) center / contain no-repeat;
}

/* 2. Witch hat on the DOZO face in the logo. */
.header__heading-link { position: relative; }
.header__heading-link::after {
  content: ""; position: absolute; left: 20%; top: -25px; width: 46px; height: 38px;
  background: var(--hw-hat) center / contain no-repeat; pointer-events: none;
  transform: rotate(-10deg); transform-origin: 50% 85%; animation: hw-hat 5s ease-in-out infinite;
}

/* 3. Small pumpkin on the cart icon — top-left corner, away from the item-count bubble (bottom-right). */
#cart-icon-bubble::before {
  content: ""; position: absolute; left: -4px; top: 1px; width: 18px; height: 16px;
  background: var(--hw-pk) center / contain no-repeat; pointer-events: none;
}

/* 4. Spider swinging from the header (moves with the sticky header) + cobweb in its corner on wide screens.
      Header layouts (public/dozo/header.css): ≥1440 logo at 80px and 68px free right of the cart; 990–1439 logo at
      24px and the free gap is between the menu (ends 729px) and the icons; ≤989 between the logo and the search. */
sticky-header::after {
  content: ""; position: absolute; top: 0; right: 12px;
  width: 40px; height: 87px; background: var(--hw-spider) top center / contain no-repeat; pointer-events: none;
  transform-origin: 50% 0; animation: hw-swing 3.6s ease-in-out infinite;
}
@media (min-width: 990px) and (max-width: 1439px) {
  sticky-header::after { right: 198px; } /* icons start at width-168px, the menu ends at 729px */
}
.shopify-section-header-hidden sticky-header::after { opacity: 0; } /* the thread is longer than the header */
@media (min-width: 1440px) {
  sticky-header::before {
    content: ""; position: absolute; left: 0; top: 0; width: 72px; height: 72px;
    background: var(--hw-web) 0 0 / contain no-repeat; pointer-events: none;
  }
}

/* 5. Bats over the top of the page (layer rendered by src/modules/theme/halloween.tsx, (main) pages only).
      Under the sticky header (z 3) and every drawer/modal; clipped, so no horizontal scroll. */
.hw-sky { position: absolute; left: 0; top: 0; width: 100%; height: 300px; overflow: hidden; pointer-events: none; z-index: 2; }
.hw-bat { position: absolute; left: 0; top: 0; width: 36px; height: 18px; will-change: transform; }
.hw-bat b { display: block; width: 100%; height: 100%; background: var(--hw-bat) center / contain no-repeat; transform-origin: 50% 40%; animation: hw-flap .34s ease-in-out infinite; }
.hw-b1 { animation: hw-b1 22s linear infinite; }
.hw-b2 { width: 26px; height: 13px; animation: hw-b2 29s linear -11s infinite; }
.hw-b2 b { animation-duration: .4s; }
.hw-b3 { width: 20px; height: 10px; animation: hw-b3 36s linear -20s infinite; }
.hw-b3 b { animation-duration: .28s; }
@keyframes hw-b1 { 0% { transform: translate(-80px, 172px) } 25% { transform: translate(25vw, 146px) } 50% { transform: translate(50vw, 184px) } 75% { transform: translate(75vw, 150px) } 100% { transform: translate(calc(100vw + 60px), 170px) } }
@keyframes hw-b2 { 0% { transform: translate(-60px, 232px) } 30% { transform: translate(30vw, 206px) } 60% { transform: translate(62vw, 240px) } 100% { transform: translate(calc(100vw + 60px), 210px) } }
@keyframes hw-b3 { 0% { transform: translate(calc(100vw + 40px), 180px) } 35% { transform: translate(66vw, 154px) } 70% { transform: translate(32vw, 190px) } 100% { transform: translate(-60px, 160px) } }

/* 6. Home: cobweb in the corner of the main banner; pumpkin after the deal-row titles; ghost beside a short row. */
.hg-slideshow::after {
  content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 120px; z-index: 2;
  background: var(--hw-web) 0 0 / contain no-repeat; pointer-events: none;
}
@media (min-width: 990px) { [id*="dz_deal_row"] .collection__title h2::after { content: ""; } }
@media (min-width: 750px) { .dz-ch__h1::after { content: ""; } }
[id*="dz_deal_row"] .collection__title h2::after,
.dz-ch__h1::after {
  display: inline-block; width: .9em; height: .82em; margin-left: .35em; margin-right: -1.25em;
  vertical-align: -.08em; background: var(--hw-pk) center / contain no-repeat; pointer-events: none;
  transform-origin: 50% 90%; animation: hw-wobble 4.8s ease-in-out infinite;
}

/* 7. Collection: ghost in the empty corner above the trust chips (wide screens only). */
@media (min-width: 1200px) {
  .dz-ch__head { position: relative; }
  .dz-ch__head::after {
    content: ""; position: absolute; right: 204px; top: -20px; width: 56px; height: 67px;
    background: var(--hw-ghost) center / contain no-repeat; pointer-events: none;
    animation: hw-float 4.6s ease-in-out infinite;
  }
}

/* 8. Product page (desktop): spider down the gap between gallery and buy panel, pumpkin at the top of the first
      photo, cobweb on the buy panel corner. */
@media (min-width: 1024px) {
  .dz-media-col::after {
    content: ""; position: absolute; left: 100%; top: -90px; width: 40px; height: 127px;
    background: var(--hw-spider-long) top center / contain no-repeat; pointer-events: none;
    transform-origin: 50% 0; animation: hw-swing 4.2s ease-in-out infinite;
  }
}
@media (min-width: 990px) {
  .pmb-card-slide:first-child .pmb-card-slide__media::after {
    content: ""; position: absolute; left: calc(50% - 108px); top: 4px; width: 30px; height: 28px; z-index: 2;
    background: var(--hw-pk) center / contain no-repeat; pointer-events: none;
    transform-origin: 50% 90%; animation: hw-wobble 4.8s ease-in-out infinite;
  }
  .dz-bb__head { position: relative; }
  .dz-bb__head::after {
    content: ""; position: absolute; right: -31px; top: -25px; width: 64px; height: 64px;
    background: var(--hw-web) 0 0 / contain no-repeat; transform: scaleX(-1); pointer-events: none;
  }
}

/* 9. Checkout (plain PD only — HH / Don't Trip / PROXIE / PERKS skins carry data-store and stay untouched):
      one still pumpkin before "Secure checkout". (No hat here: the checkout logo sits 10px from the top of the page,
      the hat would be cut off.) */
.dz-ck:not([data-store]) .dz-ck-secure { position: relative; }
.dz-ck:not([data-store]) .dz-ck-secure::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 18px; height: 16px; margin: -8px 10px 0 0;
  background: var(--hw-pk) center / contain no-repeat; pointer-events: none;
}

/* Phones and tablets: fewer pieces, smaller sizes. */
@media (max-width: 989px) {
  sticky-header::after { right: auto; left: calc(50% + 45px); width: 30px; height: 65px; }
  .header__heading-link::after { left: 21%; top: -19px; width: 36px; height: 30px; }
  #cart-icon-bubble::before { left: 1px; width: 15px; height: 14px; }
  .hg-slideshow::after { width: 56px; height: 56px; }
  .hw-sky { height: 200px; }
  .hw-b1 { width: 24px; height: 12px; animation-duration: 13s; animation-name: hw-m1; }
  .hw-b2 { width: 17px; height: 9px; animation-duration: 19s; animation-name: hw-m2; }
  .hw-b3 { display: none; }
  @keyframes hw-m1 { 0% { transform: translate(-40px, 142px) } 35% { transform: translate(31vw, 128px) } 70% { transform: translate(69vw, 150px) } 100% { transform: translate(calc(100vw + 40px), 132px) } }
  @keyframes hw-m2 { 0% { transform: translate(calc(100vw + 40px), 160px) } 40% { transform: translate(64vw, 140px) } 75% { transform: translate(23vw, 168px) } 100% { transform: translate(-40px, 150px) } }
}

/* Visitors who asked their device for less motion get the decorations standing still and no flying bats. */
@media (prefers-reduced-motion: reduce) {
  .hw-sky { display: none; }
  .header__heading-link::after,
  sticky-header::after,
  [id*="dz_deal_row"] .collection__title h2::after,
  .dz-ch__h1::after,
  .dz-ch__head::after,
  .dz-media-col::after,
  .pmb-card-slide:first-child .pmb-card-slide__media::after { animation: none; }
}

/* ── v2 (owner 2026-10-19: «еще чуть чуть хелуин тематики», «ток безопасно и чтоб сайт не замедляло»). ── */
:root {
  --hw-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M19 6A14 14 0 1 0 32.9 25.5A12 12 0 0 1 19 6z' fill='%23FFF1A8'/%3E%3C/svg%3E");
  --hw-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0Q11 9 20 10Q11 11 10 20Q9 11 0 10Q9 9 10 0z' fill='%23FFF7C2'/%3E%3C/svg%3E");
  --hw-candy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M2.6 16h14.8c.5 1.4.6 2.8.6 4 0 3-16 3-16 0 0-1.2.1-2.6.6-4z' fill='%23FFC21A'/%3E%3Cpath d='M5.4 8.4h9.2l2.8 7.6H2.6z' fill='%23FF8A1F'/%3E%3Cpath d='M10 1c1.3 0 3.3 3.8 4.6 7.4H5.4C6.7 4.8 8.7 1 10 1z' fill='%23FFF6E8'/%3E%3C/svg%3E");
  --hw-grave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22'%3E%3Cg fill='%2312002A' stroke='%23F49BF9' stroke-opacity='.65' stroke-width='.9'%3E%3Cpath d='M14 21V11a6 6 0 0 1 12 0v10z'/%3E%3Cpath d='M57 21v-5h-4v-3h4V9h3v4h4v3h-4v5z'/%3E%3Cpath d='M90 21V8a7 7 0 0 1 14 0v13z'/%3E%3Cpath d='M137 21v-5a5 5 0 0 1 10 0v5z'/%3E%3Cpath d='M166 15h27v1.6h-27z'/%3E%3Cpath d='M168 21v-8l1.5-2.5 1.5 2.5v8zM175 21v-8l1.5-2.5 1.5 2.5v8zM182 21v-8l1.5-2.5 1.5 2.5v8zM189 21v-8l1.5-2.5 1.5 2.5v8z'/%3E%3Cpath d='M210 21v-9q0-5 6-5t6 5v9z'/%3E%3C/g%3E%3Cpath d='M0 22v-1.6q30-2 60 0t60 0 60 0 60 0V22z' fill='%2314002E'/%3E%3C/svg%3E");
}
@keyframes hw-drift { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(6px, -14px) } }
@keyframes hw-twinkle { 0%, 100% { opacity: .25 } 50% { opacity: .95 } }
@keyframes hw-glow { 0%, 100% { opacity: .7 } 50% { opacity: 1 } }

/* 10. Night sky BEHIND all content (halloween-night.tsx): absolute over <main class="relative">, z-index -1 = over the
       body background, under every section, card and photo. Clipped; top in % of the page height. */
.hw-night { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.hw-n { position: absolute; display: block; background: center / contain no-repeat; }
.hw-n-moon { width: 64px; height: 64px; background-image: var(--hw-moon); animation: hw-glow 7s ease-in-out infinite; }
.hw-n-st { width: 12px; height: 12px; background-image: var(--hw-star); animation: hw-twinkle 3.6s ease-in-out infinite; }
.hw-n-gh { width: 40px; height: 48px; background-image: var(--hw-ghost); opacity: .55; animation: hw-drift 8s ease-in-out infinite; }
.hw-n-bat { width: 40px; height: 20px; background-image: var(--hw-bat); animation: hw-drift 6.5s ease-in-out infinite; }
.hw-n-pk { width: 30px; height: 28px; background-image: var(--hw-pk); opacity: .8; }
.hw-n-cc { width: 16px; height: 20px; background-image: var(--hw-candy); opacity: .85; transform: rotate(-18deg); }
.hw-n1 { top: 12%; right: .6%; }
.hw-n2 { top: 3.5%; right: 3%; animation-delay: -.9s; }
.hw-n3 { top: 15.5%; right: 1.5%; animation-delay: -3s; }
.hw-n4 { top: 15%; left: 1.2%; }
.hw-n5 { top: 21%; right: 2.6%; animation-delay: -1.8s; }
.hw-n6 { top: 27%; left: 1.6%; }
.hw-n7 { top: 33%; right: 2%; }
.hw-n8 { top: 39%; left: 1%; animation-delay: -5s; }
.hw-n9 { top: 45%; left: 3%; animation-delay: -2.7s; }
.hw-n10 { top: 51%; right: 1.4%; animation-delay: -2s; }
.hw-n11 { top: 57%; left: 2.2%; }
.hw-n12 { top: 63%; right: 2.2%; }
.hw-n13 { top: 69%; left: 48%; animation-delay: -1.2s; }

/* 11. Product cards (same card everywhere), in turn: cobweb in the photo corner / spider from the photo top / bat.
       Inside .upc__image (overflow hidden), z 1 = over the photo, under the badges (z 2); still. */
li > .updated-product-card .upc__image::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none; background: center / contain no-repeat;
}
li:nth-child(3n+1) > .updated-product-card .upc__image::after {
  top: 0; right: 0; width: 70px; height: 70px; background: var(--hw-web) 0 0 / contain no-repeat; transform: scaleX(-1);
}
li:nth-child(3n+2) > .updated-product-card .upc__image::after {
  top: 0; left: 42%; width: 22px; height: 48px; background-image: var(--hw-spider); background-position: top center;
}
li:nth-child(3n) > .updated-product-card .upc__image::after { top: 36%; left: 5%; width: 34px; height: 17px; background-image: var(--hw-bat); }

/* 12. Section titles ≥990, in turn: pumpkin / bat / ghost / candy corn (deal rows keep the v1 pumpkin); zero width. */
@media (min-width: 990px) {
  section.shopify-section:not([id*="dz_deal_row"]) :is(.collection__title h2, .dz-promo__title, .dz-col__title)::after {
    content: ""; display: inline-block; width: .9em; height: .82em; margin-left: .35em; margin-right: -1.25em;
    vertical-align: -.08em; background: var(--hw-pk) center / contain no-repeat; pointer-events: none;
  }
  section.shopify-section:nth-of-type(4n+2):not([id*="dz_deal_row"]) :is(.collection__title h2, .dz-promo__title, .dz-col__title)::after { background: #F49BF9; -webkit-mask: var(--hw-bat) center / contain no-repeat; mask: var(--hw-bat) center / contain no-repeat; }
  section.shopify-section:nth-of-type(4n+3):not([id*="dz_deal_row"]) :is(.collection__title h2, .dz-promo__title, .dz-col__title)::after { background-image: var(--hw-ghost); }
  section.shopify-section:nth-of-type(4n):not([id*="dz_deal_row"]) :is(.collection__title h2, .dz-promo__title, .dz-col__title)::after { background-image: var(--hw-candy); }
}

/* 13. Still graveyard along the top of the footer, inside its own padding (the gap above it is 3px on phones). */
.dz-footer { position: relative; }
.dz-footer::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 22px;
  background: var(--hw-grave) 0 0 / 240px 22px repeat-x; pointer-events: none;
}

@media (max-width: 749px) {
  .hw-n2, .hw-n5, .hw-n9, .hw-n12, .hw-n13 { display: none; }
  .hw-n-moon { width: 44px; height: 44px; }
  .hw-n-gh { width: 28px; height: 34px; }
  .hw-n-bat { width: 28px; height: 14px; }
  .hw-n-pk { width: 22px; height: 20px; }
  .hw-n-cc { width: 12px; height: 15px; }
  li:nth-child(3n+1) > .updated-product-card .upc__image::after { width: 44px; height: 44px; }
  li:nth-child(3n+2) > .updated-product-card .upc__image::after { left: 47%; width: 16px; height: 35px; }
  li:nth-child(3n) > .updated-product-card .upc__image::after { width: 26px; height: 13px; }
  .dz-footer::before { height: 16px; background-size: 175px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-n { animation: none; }
}