/**
 * ABD Dynamic Moulding Framer
 *
 * Design constraints:
 *  - MUST NOT affect layout (no padding/margins on the original <img>)
 *  - Frame edges must render reliably (no rotation transforms)
 *  - Must coexist with theme rules like `.product-loop-image img{height:100%}`
 */

.abd-mf-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff; /* mat backdrop */
}

/* Inner "mat" area: contains the art, inset by frame width */
.abd-mf-inner{
  position: absolute;
  inset: var(--abd-fw, 18px);
  z-index: 1;
  background: #fff;
}

/* The original image becomes the "art" layer */
.abd-mf-wrap img.abd-mf-art{
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border: none !important;
}

/* 4 frame edges (overlay) */
.abd-mf-edge{
  position: absolute;
  pointer-events: none;
  z-index: 3;
  background-image: var(--abd-tex);
  opacity: 1;
}

/* Top / bottom tile horizontally */
.abd-mf-edge.top,
.abd-mf-edge.bottom{
  left: 0;
  width: 100%;
  height: var(--abd-fw, 18px);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.abd-mf-edge.top{ top: 0; }
.abd-mf-edge.bottom{ bottom: 0; transform: scaleY(-1); }

/* Left / right tile vertically */
.abd-mf-edge.left,
.abd-mf-edge.right{
  top: 0;
  height: 100%;
  width: var(--abd-fw, 18px);
  background-repeat: repeat-y;
  background-size: 100% auto;
  transform: none;
}

.abd-mf-edge.left{ left: 0; }
.abd-mf-edge.right{ right: 0; }

/* Miter-ish corners via clip-path (optional) */
.abd-mf-edge.top{
  clip-path: polygon(var(--abd-fw) 0, calc(100% - var(--abd-fw)) 0, 100% 100%, 0 100%);
}
.abd-mf-edge.bottom{
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--abd-fw)) 100%, var(--abd-fw) 100%);
}
.abd-mf-edge.left{
  clip-path: polygon(0 0, 100% var(--abd-fw), 100% calc(100% - var(--abd-fw)), 0 100%);
}
.abd-mf-edge.right{
  clip-path: polygon(0 var(--abd-fw), 100% 0, 100% 100%, 0 calc(100% - var(--abd-fw)));
}

/* Only show edges when configured */
.abd-mf-wrap:not(.has-frame) .abd-mf-edge{ display: none; }
.abd-mf-wrap:not(.has-frame) .abd-mf-inner{ inset: 0; }