/* =========================================================
   ARTHOUSE shared glass image frame
   Reusable for all product screenshots/images.

   Usage:
   <div class="arthouse-glass-frame arthouse-glass-frame--wide arthouse-glass-frame--tight">
     <img src="..." alt="..." />
   </div>

   Optional modifiers:
   - arthouse-glass-frame--sm
   - arthouse-glass-frame--md
   - arthouse-glass-frame--lg
   - arthouse-glass-frame--xl
   - arthouse-glass-frame--wide
   - arthouse-glass-frame--hairline
   - arthouse-glass-frame--tight
   - arthouse-glass-frame--loose
   - arthouse-glass-frame--flush
   - arthouse-glass-frame--zoom
   ========================================================= */

.arthouse-glass-frame {
  --glass-padding: 6px;
  --glass-radius: 18px;
  --glass-inner-radius: calc(var(--glass-radius) - 5px);

  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--glass-padding);
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--glass-radius);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.055)
    );

  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.arthouse-glass-frame > img,
.arthouse-glass-frame picture,
.arthouse-glass-frame picture > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  border-radius: var(--glass-inner-radius);
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* Sizes */
.arthouse-glass-frame--sm {
  max-width: 520px;
}

.arthouse-glass-frame--md {
  max-width: 680px;
}

.arthouse-glass-frame--lg {
  max-width: 760px;
}

.arthouse-glass-frame--xl {
  max-width: 980px;
}

.arthouse-glass-frame--wide {
  max-width: 960px;
}

/* Thickness variants */
.arthouse-glass-frame--hairline {
  --glass-padding: 3px;
}

.arthouse-glass-frame--tight {
  --glass-padding: 5px;
}

.arthouse-glass-frame--loose {
  --glass-padding: 10px;
}

/* Use only when you intentionally want image edge-to-edge */
.arthouse-glass-frame--flush {
  --glass-padding: 0px;
}

/* Optional small zoom, no cropping variables */
.arthouse-glass-frame--zoom > img,
.arthouse-glass-frame--zoom picture > img {
  transform: scale(1.025);
  transform-origin: center center;
}

/* Neutralize old product image styles inside shared frame */
.arthouse-glass-frame .ts-CadToPdf-img,
.arthouse-glass-frame .ss-CadToPdf-img,
.arthouse-glass-frame .ths-CadToPdf-img,
.arthouse-glass-frame .pdfToDwgConv-img,
.arthouse-glass-frame .cadtopdfpro-img,
.arthouse-glass-frame .product-screenshot {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

/* Light mode */
html[data-theme="light"] .arthouse-glass-frame {
  border-color: rgba(255, 255, 255, 0.62);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.12)
    );

  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

/* Dark mode */
html[data-theme="dark"] .arthouse-glass-frame {
  border-color: rgba(255, 255, 255, 0.34);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.055)
    );
}

/* Mobile */
@media screen and (max-width: 767px) {
  .arthouse-glass-frame {
    --glass-padding: 4px;
    --glass-radius: 15px;
    --glass-inner-radius: 11px;
  }

  .arthouse-glass-frame--hairline {
    --glass-padding: 2px;
  }

  .arthouse-glass-frame--tight {
    --glass-padding: 4px;
  }

  .arthouse-glass-frame--loose {
    --glass-padding: 7px;
  }
}