.c-card-flip-con {
  width: 100%;
  position: relative;
  margin: 15px 0;
  perspective: 800px;
  cursor: pointer;
  {# SAFARI FIX: promote the card to its own compositing layer up front. The
     hover rule below sets translateZ(0), which meant the layer was created at
     hover/flip time — and WebKit drops a frame of correct backface rendering
     while it builds one. Declaring it here means the layer already exists
     before any interaction. Visually inert: translateZ(0) moves nothing. #}
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 100ms ease-in;
  -ms-transition: all 100ms ease-in;
  -o-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

.c-card-flip-con .tile {
  width: 100%;
  height: 100%;
  transition: transform 1.3s;
  position: relative;
  {# card-flipper.js only sets the -webkit- prefixed property when it sniffs
     Chrome, so Safari never got it from the library. Declare it here for
     everyone. The tile is the 3D stage that holds the two faces. #}
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.c-card-flip-con .contents {
  height: 100%;
}

{# Hover zoom. translateZ(0) used to sit on its own line below the scale, which
   made it override the scale entirely — the zoom never rendered. Both are now
   composed into one value so the card zooms AND keeps the 3D compositing hint
   that stops WebKit rebuilding the layer mid-flip. #}
.c-card-flip-con:hover {
  -moz-transform: scale(1.03);
  -webkit-transform: scale(1.03) translateZ(0);
  -o-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03) translateZ(0);
}


.c-card-flip-con .tile .front,
.c-card-flip-con .tile .back {
  display: block;
  height: fit-content;
  width: 100%;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-align: left;
  {# SAFARI FIX: the two faces must NOT be their own 3D contexts. card-flipper.js
     sets transform-style:preserve-3d inline on both faces, which makes each
     face's children (.contents and everything in it) render as separate planes
     inside the 3D scene. WebKit resolves the backface of those child planes a
     frame or two late, so as the card sweeps past 90deg the front's text is
     still painted for a flash before it vanishes. Flattening the faces collapses
     .contents back into the face itself, so the single backface-visibility:hidden
     above is the only thing that has to be honored. !important is required to
     beat the library's inline style. The faces hold text and icons only, so
     nothing inside them needs a 3D context. #}
  -webkit-transform-style: flat !important;
  transform-style: flat !important;
  z-index: 0;
}

{# SAFARI FIX: card-flipper.js hides the backface of every descendant, but only
   in JS at init. Declaring it in CSS means it is already true on first paint —
   before init runs, and for any content added afterwards. #}
.c-card-flip-con .tile .front *,
.c-card-flip-con .tile .back * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


.c-card-flip-con .tile .contents {
  position: relative;
  display: flex;
}

.c-card-flip-con .back .contents {
    display: table;
    width: 100%;
    height: 100%;
}


.c-card-flip-con .plus-minus {
  position: absolute;
  top: 15px;
  right: 15px;
}


.plus-minus svg {
 width: 20px;
  height: 20px;
}


.c-card-flip-con .tile .back {
  transform: rotateY(180deg);
}
.c-card-flip-con .flipped {
  transform: rotateY(180deg);
}