/* Independent Demo33 cursor. The 8/32/20/60px geometry, 100ms free-follow
   easing and 200ms magnetic easing are source-derived from the supplied Ohio
   reference. Fixed settings enable the cursor and leave its color override
   unset; the recorded brand color is #a578b5. No Ohio CSS is loaded. */
.demo33-cursor {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.demo33-cursor-ready {
    --demo33-cursor-color: var(--demo33-brand-color, #a578b5);
    --demo33-cursor-neutral: rgb(136 135 137 / 75%);
  }

  .demo33-cursor-ready .demo33-cursor {
    position: fixed;
    inset: 0 auto auto 0;
    display: block;
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 50%;
    box-sizing: border-box;
    visibility: hidden;
    overflow: visible;
    opacity: 0;
    background: transparent;
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0);
    will-change: transform;
  }

  .demo33-cursor-ready .demo33-cursor::backdrop {
    background: transparent;
    pointer-events: none;
  }

  .demo33-cursor-ready .demo33-cursor:not(.is-visible) {
    display: none;
    transition: none !important;
  }

  .demo33-cursor-ready .demo33-cursor.is-visible {
    visibility: visible;
    opacity: 1;
  }

  .demo33-cursor-ready .demo33-cursor-inner {
    z-index: 10000001;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--demo33-cursor-color);
    transition: none;
  }

  .demo33-cursor-ready .demo33-cursor-outer {
    z-index: 10000000;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 1px solid var(--demo33-cursor-color);
    transition: all 100ms ease-out;
  }

  .demo33-cursor-ready .demo33-cursor-outer.is-visible {
    opacity: .5;
  }

  .demo33-cursor-ready .demo33-cursor-inner.cursor-link-hover {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    opacity: .5;
  }

  .demo33-cursor-ready .demo33-cursor-inner svg {
    display: none;
    width: 21px;
    height: 21px;
    fill: #fff;
    stroke: none;
  }

  .demo33-cursor-ready .demo33-cursor-inner.cursor-link {
    background: transparent;
  }

  .demo33-cursor-ready .demo33-cursor-inner.cursor-link.cursor-link-hover {
    opacity: 1;
  }

  .demo33-cursor-ready .demo33-cursor-inner.cursor-link.cursor-link-hover svg {
    display: block;
  }

  .demo33-cursor-ready .demo33-cursor-outer.cursor-link:not(.is-magnetic) {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border: 0;
    background: var(--demo33-cursor-neutral);
  }

  .demo33-cursor-ready .demo33-cursor.dark-color {
    border-color: var(--ink, #111013);
    background-color: var(--ink, #111013);
  }

  .demo33-cursor-ready .demo33-cursor-outer.is-magnetic {
    border: 1px solid var(--demo33-cursor-color);
    background: transparent;
    transition: all 200ms ease-out;
  }

  .demo33-cursor-ready a[data-cursor-class],
  .demo33-cursor-ready a.resource-hero,
  .demo33-cursor-ready a.resource-card,
  .demo33-cursor-ready a.resource-more,
  .demo33-cursor-ready a.trending-intro,
  .demo33-cursor-ready a.trending-card {
    cursor: none;
  }

  /* The source photo marker wraps a separate thumbnail anchor, so that
     anchor retains its native hand while the arrow disc follows it. */
  .demo33-cursor-ready .product-card-media > a {
    cursor: pointer;
  }

  .demo33-cursor-ready .product-cursor {
    display: none !important;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .site-shell .product-cursor {
    display: none !important;
  }
}