#wavar-frames-render-wrapper {
  container: wavar / inline-size;
  width: 100%;
}

/* Frame styles */
.wav-container[data-frame-type="canvas-image-wrap"],
.wav-container[data-frame-type="canvas-h-image-wrap"] {
  /* Common variables */
  --pixel-to-size-ratio: 1cqw;

  /* Container */
  --container-perpsective: 2000px;
  --container-margin-top: min(40px, calc(var(--pixel-to-size-ratio) * 4));
  --container-margin-bottom: min(40px, calc(var(--pixel-to-size-ratio) * 4));
  --container-position-left: min(48px, calc(var(--pixel-to-size-ratio) * 5));

  /* Frame */
  --frame-width: 0px;
  --frame-display: block;
  --frame-margin: auto;
  --frame-max-height: 100%;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-display: inline-block;
  --frame-transform-x: rotateX(80deg);
  --frame-transform-y: rotateY(15deg);
  --frame-transform-origin: left;
  --frame-transform-style: preserve-3d;

  /* Image */
  --image-shadow: 20px 18px 25px -13px rgb(10 10 10 / 50%);
  --image-border: none;
  --image-border-size: 0px;

  /* Image edge */
  --image-edge-content: "";
  --image-edge-height: 100%;
  --image-edge-width: 5%;
  --image-edge-position: absolute;
  --image-edge-position-top: 0;
  --image-edge-position-left: 0;
  --image-edge-transform: rotateY(290deg) scaleX(-1);
  --image-edge-transform-origin: left;
}
.wav-container[data-frame-type^="poster" i] {
  /* Common variables */
  --pixel-to-size-ratio: 1cqw;

  --frame-edge-size: 0;
  --frame-mat-size: 0;
  /* Container */
  
  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #e1e1e1;
  --frame-display: inline-block;
  --frame-box-shadow:
      5px 10px 7.5px 2.5px rgba(0, 0, 0, 0.25);
  
  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);
  
  --frame-border-style: solid;
  
  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;
  
   /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);
  
  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat;  /* Repeat the image along the border */
  
  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);
  
  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;
  
  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="frame-10mm-mb"] {
  /* Common variables */
  --pixel-to-size-ratio: 1cqw;

  --frame-edge-size: min(10px, var(--pixel-to-size-ratio));
  --frame-mat-size: min(20px, calc(2 * var(--pixel-to-size-ratio)));
  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #e1e1e1;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-edge-size) * 1 / 2)
      calc(var(--frame-edge-size) * 1 / 2) calc(var(--frame-edge-size) * 7 / 10)
      var(--frame-edge-size) rgba(0, 0, 0, 0.3) inset,
    var(--frame-edge-size) calc(var(--frame-edge-size) * 2)
      calc(var(--frame-edge-size) * 3 / 2) calc(var(--frame-edge-size) * 1 / 2)
      rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border-size: 2px;
  --image-border: solid var(--image-border-size);
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="frame-20mm-mb"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: min(20px, var(--pixel-to-size-ratio));
  --frame-mat-size: min(40px, calc(2 * var(--pixel-to-size-ratio)));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #fdfdfd;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-edge-size) * 3 / 5)
      calc(var(--frame-edge-size) * 3 / 5) calc(var(--frame-edge-size) * 2 / 5)
      calc(var(--frame-edge-size) * 3 / 5) rgba(0, 0, 0, 0.6) inset,
      calc(var(--frame-edge-size) * 2 / 5) calc(var(--frame-edge-size) * 4 / 5)
      calc(var(--frame-edge-size) * 3 / 5) calc(var(--frame-edge-size) * 1 / 5)
      rgba(0, 0, 0, 0.25);
  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border-size: 2px;
  --image-border: solid var(--image-border-size);
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type*="frame-25mm-mb-50mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: min(20px, var(--pixel-to-size-ratio));
  --frame-mat-size: min(50px, calc(2 * var(--pixel-to-size-ratio)));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #fdfdfd;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-edge-size) * 3 / 5)
      calc(var(--frame-edge-size) * 3 / 5) calc(var(--frame-edge-size) * 2 / 5)
      calc(var(--frame-edge-size) * 4 / 5) rgba(0, 0, 0, 0.6) inset,
    calc(var(--frame-edge-size) * 2 / 5) calc(var(--frame-edge-size) * 4 / 5)
      calc(var(--frame-edge-size) * 3 / 5) calc(var(--frame-edge-size) * 1 / 5)
      rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border-size: 2px;
  --image-border: solid var(--image-border-size);
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type*="frame-25mm-mb-25mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: min(20px, var(--pixel-to-size-ratio));
  --frame-mat-size: min(20px, var(--pixel-to-size-ratio));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #fdfdfd;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-edge-size) * 3 / 5)
      calc(var(--frame-edge-size) * 3 / 5) calc(var(--frame-edge-size) * 2 / 5)
      calc(var(--frame-edge-size) * 4 / 5) rgba(0, 0, 0, 0.6) inset,
      calc(var(--frame-edge-size) * 2 / 5) calc(var(--frame-edge-size) * 4 / 5)
      calc(var(--frame-edge-size) * 3 / 5) calc(var(--frame-edge-size) * 1 / 5)
      rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border-size: 2px;
  --image-border: solid var(--image-border-size);
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="full-frame-10mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 1cqw;

  --frame-edge-size: min(10px, var(--pixel-to-size-ratio));
  --frame-mat-size: 0;

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #e1e1e1;
  --frame-display: inline-block;
  --frame-box-shadow: var(--frame-edge-size) calc(var(--frame-edge-size) * 2)
    calc(var(--frame-edge-size) * 3 / 2) calc(var(--frame-edge-size) * 1 / 2)
    rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="full-frame-20mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: min(20px, var(--pixel-to-size-ratio));
  --frame-mat-size: 0;

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #e1e1e1;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-edge-size) * 1 / 2)
    var(--frame-edge-size) calc(var(--frame-edge-size) * 3 / 4)
    calc(var(--frame-edge-size) * 1 / 4) rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="full-frame-25mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: min(25px, var(--pixel-to-size-ratio));
  --frame-mat-size: 0;

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #e1e1e1;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-edge-size) * 1 / 2)
    var(--frame-edge-size) calc(var(--frame-edge-size) * 3 / 4)
    calc(var(--frame-edge-size) * 1 / 4) rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: solid;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="floating-frame"] {
  /* Common variables */
  --pixel-to-size-ratio: 1cqw;

  --frame-edge-size: min(15px, calc(var(--pixel-to-size-ratio) * 3 / 2));
  --frame-mat-size: min(5px, calc(var(--pixel-to-size-ratio) * 1 / 3));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: var(--frame-texture-color);
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-edge-size) * 2 / 3)
    calc(var(--frame-edge-size) * 4 / 3) var(--frame-edge-size)
    calc(var(--frame-edge-size) * 1 / 3) rgba(0, 0, 0, 0.25);

  --frame-box-sizing: content-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */
  --frame-topbtm-bg-height: var(--frame-edge-size);

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;

  /* Image edge */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="no-frame-mb-30mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 3cqw;

  --frame-edge-size: 0px;
  --frame-mat-size: min(30px, var(--pixel-to-size-ratio));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #fdfdfd;
  --frame-display: inline-block;
  --frame-box-shadow: 
      calc(var(--frame-mat-size) * 1 / 3)
      calc(var(--frame-mat-size) * 2 / 3) calc(var(--frame-mat-size) * 1 / 2)
      calc(var(--frame-mat-size) * 1 / 3) rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="no-frame-mb-50mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: 0px;
  --frame-mat-size: min(50px, calc(var(--pixel-to-size-ratio) * 5 / 2));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #fdfdfd;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-mat-size) * 1 / 5)
    calc(var(--frame-mat-size) * 2 / 5) calc(var(--frame-mat-size) * 3 / 10)
    calc(var(--frame-mat-size) * 1 / 10) rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="no-frame-mb-80mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: 0px;
  --frame-mat-size: min(80px, calc(var(--pixel-to-size-ratio) * 4));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #fdfdfd;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-mat-size) * 1 / 8)
    calc(var(--frame-mat-size) * 2 / 8) calc(var(--frame-mat-size) * 3 / 16)
    calc(var(--frame-mat-size) * 1 / 16) rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}

.wav-container[data-frame-type^="no-frame-mb-100mm"] {
  /* Common variables */
  --pixel-to-size-ratio: 2cqw;

  --frame-edge-size: 0px;
  --frame-mat-size: min(100px, calc(var(--pixel-to-size-ratio) * 5));

  /* Container */

  /* Frame */
  --frame-display: block;
  --frame-margin: 5vh 1vw;
  --frame-max-height: 1200px;
  --frame-max-width: 100%;
  --frame-background: no-repeat;
  --frame-background-color: #fdfdfd;
  --frame-display: inline-block;
  --frame-box-shadow: calc(var(--frame-mat-size) * 1 / 10)
    calc(var(--frame-mat-size) * 2 / 10) calc(var(--frame-mat-size) * 3 / 20)
    calc(var(--frame-mat-size) * 1 / 20) rgba(0, 0, 0, 0.25);

  --frame-box-sizing: border-box;
  --frame-border-width: var(--frame-edge-size);
  --frame-border-height: var(--frame-edge-size);

  --frame-border-style: solid;

  --frame-transform-x: none;
  --frame-transform-y: none;
  --frame-transform-origin: unset;
  --frame-transform-style: unset;

  /* Frame Left/Right */
  --frame-lrhs-width: var(--frame-edge-size);

  /* Frame Top/Bottom */
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: var(--frame-edge-size);
  --frame-topbtm-bg-height: var(--frame-edge-size);
  --frame-topbtm-bg-size: cover; /* Fills image inside frame */
  --frame-topbtm-bg-repeat: repeat; /* Repeat the image along the border */

  /* Frame Corner */
  --frame-corner-width: var(--frame-edge-size);
  --frame-corner-height: var(--frame-edge-size);

  /* Image */
  --image-shadow: unset;
  --image-border: none;
  --image-border-size: 0px;
  --image-border-bottom-color: #ffe;
  --image-border-left-color: #eed;
  --image-border-right-color: #eed;
  --image-border-top-color: #ccb;

  /* Image edge (for Canvas only) */
  --image-edge-content: unset;
}
/* Frame materials */
.wav-container[data-frame-type$="mm-oak-light"] {
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: 0;
  --frame-topbtm-border-color: none;
  --frame-topbtm-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/full-frame-10mm-oak-light/WoodFine011_COL_1K_update-h.jpg");
  --frame-corner-bg-color: none;
  --frame-corner-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/full-frame-10mm-oak-light/WoodFine011_COL_1K_update-h.jpg");
  --frame-lrhs-bg-color: none;
  --frame-lrhs-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/full-frame-10mm-oak-light/WoodFine011_COL_1K_update.jpg");
  --frame-texture-color: #826647;
}
.wav-container[data-frame-type$="mm-finewood-oak"] {
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: 0;
  --frame-topbtm-border-color: none;
  --frame-topbtm-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-finewood-oak/WoodFine_baseColour_1k-h.jpg");
  --frame-corner-bg-color: none;
  --frame-corner-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-finewood-oak/WoodFine_baseColour_1k-h.jpg");
  --frame-lrhs-bg-color: none;
  --frame-lrhs-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-finewood-oak/WoodFine_baseColour_1k.jpg");
  --frame-texture-color: #5e4809;
}
.wav-container[data-frame-type$="mm-oak"] {
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: 0;
  --frame-topbtm-border-color: none;
  --frame-topbtm-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-oak/WoodFine011_COL_1K_update-h.jpg");
  --frame-corner-bg-color: none;
  --frame-corner-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-oak/WoodFine011_COL_1K_update-h.jpg");
  --frame-lrhs-bg-color: none;
  --frame-lrhs-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-oak/WoodFine011_COL_1K_update.jpg");
  --frame-texture-color: #806746;
}
.wav-container[data-frame-type$="mm-hickory"] {
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: 0;
  --frame-topbtm-border-color: none;
  --frame-topbtm-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-hickory/WoodCrownSmoothWalnut001_COL_1K-h.jpg");
  --frame-corner-bg-color: none;
  --frame-corner-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-hickory/WoodCrownSmoothWalnut001_COL_1K-h.jpg");
  --frame-lrhs-bg-color: none;
  --frame-lrhs-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-hickory/WoodCrownSmoothWalnut001_COL_1K.jpg");
  --frame-texture-color: #65513C;
}
.wav-container[data-frame-type$="mm-natural"],
.wav-container[data-frame-type$="mm-s-natural"] {
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: 0;
  --frame-topbtm-border-color: none;
  --frame-topbtm-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-natural/WoodQuarteredChiffon001_COL_1K-h.jpg");
  --frame-corner-bg-color: none;
  --frame-corner-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-natural/WoodQuarteredChiffon001_COL_1K-h.jpg");
  --frame-lrhs-bg-color: none;
  --frame-lrhs-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-natural/WoodQuarteredChiffon001_COL_1K.jpg");
  --frame-texture-color: #6b5a4b;
}
.wav-container[data-frame-type$="mm-timber-raw"] {
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: 0;
  --frame-topbtm-border-color: none;
  --frame-topbtm-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/full-frame-10mm-timber-raw/WoodFine011_COL_1K-h.jpg");
  --frame-corner-bg-color: none;
  --frame-corner-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/full-frame-10mm-timber-raw/WoodFine011_COL_1K-h.jpg");
  --frame-lrhs-bg-color: none;
  --frame-lrhs-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/full-frame-10mm-timber-raw/WoodFine011_COL_1K.jpg");
  --frame-texture-color: #58483f;
}
.wav-container[data-frame-type$="mm-walnut"] {
  --frame-topbtm-border-style: none;
  --frame-topbtm-border-width: 0;
  --frame-topbtm-border-color: none;
  --frame-topbtm-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-walnut/WoodFineVeneerWalnut003_COL_1K-h.jpg");
  --frame-corner-bg-color: none;
  --frame-corner-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-walnut/WoodFineVeneerWalnut003_COL_1K-h.jpg");
  --frame-lrhs-bg-color: none;
  --frame-lrhs-bg-image: url("https://asset.cartmagician.com/templates/shopify-wav/frame-10mm-mb-50mm-walnut/WoodFineVeneerWalnut003_COL_1K.jpg");
  --frame-texture-color: #443326;
}
.wav-container[data-frame-type$="white"] {
  --frame-topbtm-border-style: solid;
  --frame-topbtm-bg-color: #eee;
  --frame-topbtm-bg-image: unset;
  --frame-topbtm-bg-height: 0;
  --frame-topbtm-border-color: #eee;
  --frame-lrhs-bg-color: #eee;
  --frame-corner-bg-color: #eee;
  --frame-corner-bg-image: unset;
  --frame-texture-color: #bfbfbf;
}
.wav-container[data-frame-type$="black"] {
  --frame-topbtm-border-style: solid;
  --frame-topbtm-bg-color: #242424;
  --frame-topbtm-bg-image: unset;
  --frame-topbtm-bg-height: 0;
  --frame-topbtm-border-color: #242424;
  --frame-lrhs-bg-color: #242424;
  --frame-corner-bg-color: #242424;
  --frame-corner-bg-image: unset;
  --frame-texture-color: #242424;
}
.wav-container[data-frame-type$="silver"] {
  --frame-topbtm-border-style: solid;
  --frame-topbtm-bg-color: #b9b8bd;
  --frame-topbtm-bg-image: unset;
  --frame-topbtm-bg-height: 0;
  --frame-topbtm-border-color: #b9b8bd;
  --frame-lrhs-bg-color: #b9b8bd;
  --frame-corner-bg-color: #b9b8bd;
  --frame-corner-bg-image: unset;
  --frame-texture-color: #8a8990;
}
.wav-container[data-frame-type$="gold"] {
  --frame-topbtm-border-style: solid;
  --frame-topbtm-bg-color: #ddba69;
  --frame-topbtm-bg-image: unset;
  --frame-topbtm-bg-height: 0;
  --frame-topbtm-border-color: #ddba69;
  --frame-lrhs-bg-color: #ddba69;
  --frame-corner-bg-color: #ddba69;
  --frame-corner-bg-image: unset;
  --frame-texture-color: #a6844b;
}
/* Frame sizes */
.wav-container[data-frame-size="xsmall"] {
  --frame-display-width: 55%;
}

.wav-container[data-frame-size="small"] {
  --frame-display-width: 60%;
}

.wav-container[data-frame-size="medium"] {
  --frame-display-width: 70%;
}

.wav-container[data-frame-size="large"] {
  --frame-display-width: 80%;
}

.wav-container[data-frame-size="xlarge"] {
  --frame-display-width: 85%;
}

.wav-container[data-frame-size="xxlarge"] {
  --frame-display-width: 90%;
}

/* Apply stylesheet */
.wav-container {
  perspective: var(--container-perpsective);
  position: relative;
  margin-top: var(--container-margin-top);
  margin-bottom: var(--container-margin-bottom);
  left: var(--container-position-left);
  text-align: center;
}

.wav-frame {
  background: var(--frame-background);
  background-color: var(--frame-background-color);
  border-radius: 2px; /* Adjust outer frame corner radius */
  position: relative;
  text-align: center;

  box-shadow: var(--frame-box-shadow);
  box-sizing: border-box;

  padding: calc(var(--frame-border-width) + var(--frame-mat-size));

  display: var(--frame-display);
  margin: var(--frame-margin);
  max-height: var(--frame-max-height);
  max-width: var(--frame-max-width);
  transform: var(--frame-transform-x);
  transform: var(--frame-transform-y);
  transform-origin: var(--frame-transform-origin);
  transform-style: var(--frame-transform-style);
  width: var(--frame-display-width);
  height: var(--frame-display-height);

  @media screen and (max-width: 749px) {
    min-width: 80px;
    max-height: 700px;
  }
}

.wav-frame::before,
.wav-frame::after {
  content: "";
  position: absolute;
  background-size: cover;
  background-repeat: repeat;
  background-color: var(--frame-lrhs-bg-color);
  background-image: var(--frame-lrhs-bg-image);
  z-index: 1;
}
/* Left Border */
.wav-frame::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--frame-lrhs-width); /* Adjust frame width */
}

/* Right Border */
.wav-frame::after {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--frame-lrhs-width); /* Adjust frame width */
}

/* Top Border */
.wav-frame-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top-style: var(
    --frame-topbtm-border-style
  ); /* Defines the border style */
  border-top-width: var(
    --frame-topbtm-border-width
  ); /* Defines the border width */
  border-top-color: var(
    --frame-topbtm-border-color
  ); /* Adjust the Top frame edge colour */
  height: var(--frame-topbtm-bg-height); /* Adjust frame width */
  background-size: var(--frame-topbtm-bg-size); /* Fills image inside frame */
  background-repeat: var(
    --frame-topbtm-bg-repeat
  ); /* Repeat the image along the border */
  background-color: var(--frame-topbtm-bg-color);
  background-image: var(--frame-topbtm-bg-image);
}

/* Bottom Border */
.wav-frame-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom-style: var(
    --frame-topbtm-border-style
  ); /* Defines the border style */
  border-bottom-width: var(
    --frame-topbtm-border-width
  ); /* Defines the border width */
  border-bottom-color: var(
    --frame-topbtm-border-color
  ); /* Adjust the Top frame edge colour */
  height: var(--frame-topbtm-bg-height); /* Adjust frame width */
  background-size: var(--frame-topbtm-bg-size); /* Fills image inside frame */
  background-repeat: var(
    --frame-topbtm-bg-repeat
  ); /* Repeat the image along the border */
  background-image: var(--frame-topbtm-bg-image);
  background-color: var(--frame-topbtm-bg-color);
}

/* 45-Degree Corners */
.corner {
  content: "";
  position: absolute;
  width: var(--frame-corner-width); /* Adjust based on border thickness */
  height: var(--frame-corner-height); /* Adjust based on border thickness */
  z-index: 2; /* Ensure it's above the borders */
  background-color: var(--frame-corner-bg-color);
  background-image: var(--frame-corner-bg-image);
}

.wav-frame .corner.top-left {
  top: 0;
  left: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.wav-frame .corner.top-right {
  top: 0;
  right: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.wav-frame .corner.bottom-left {
  bottom: 0;
  left: 0;
  clip-path: polygon(100% 100%, 100% 0, 0 100%);
}
.wav-frame .corner.bottom-right {
  bottom: 0;
  right: 0;
  clip-path: polygon(0 100%, 100% 100%, 0 0);
}

.wav-img {
  max-height: 100%; /* Adjust the image - do not touch */
  max-width: 100%; /* Adjust the image - do not touch */
  display: block; /* Add this line */
  box-shadow: var(--image-shadow);
  border: var(--image-border);
  border-radius: 0;
  border-bottom-color: var(--image-border-bottom-color);
  border-left-color: var(--image-border-left-color);
  border-right-color: var(--image-border-right-color);
  border-top-color: var(--image-border-top-color);
}

.wav-img-edge {
  content: var(--image-edge-content);
  height: var(--image-edge-height);
  width: var(--image-edge-width);
  position: var(--image-edge-position);
  top: var(--image-edge-position-top);
  left: var(--image-edge-position-left);
  transform: var(--image-edge-transform);
  transform-origin: var(--image-edge-transform-origin);
  filter: brightness(75%);
}