/* AD Solutions Fabric Visualizer — isolated extension to Fabric Samples */
.afv, .afv * { box-sizing: border-box; }
.afv {
  --afv-navy: #22223e; --afv-red: #bd1622;
  --afv-border: #e3e4eb; --afv-muted: #666879;
  margin: 34px 0 44px; padding: clamp(16px,2.5vw,26px);
  color: var(--afv-navy); background: #f9f9fb;
  border: 1px solid var(--afv-border); border-radius: 16px;
  scroll-margin-top: 120px;
  box-shadow: 0 10px 45px rgba(34,34,62,.025);
}
.afv__top { display: flex; gap: 20px; align-items: end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.afv__intro { max-width: 620px; }
.afv__eyebrow { color:var(--afv-red); margin:0 0 7px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.afv__title { margin:0 0 8px !important; font-size: clamp(23px,2.8vw,32px) !important; line-height:1.16 !important; font-weight:600 !important; letter-spacing:-.02em; }
.afv__desc { margin:0; font-size:14px; color:var(--afv-muted); line-height:1.55; }
.afv__choice { display:flex; flex-wrap:wrap; align-items:end; gap:10px; flex: 1 1 320px; max-width:420px; }
.afv__select-label { display:grid; gap:6px; flex:1 1 210px; font-size:12px; font-weight:700; color:var(--afv-navy); }
.afv__select { width:100%; min-width:0; height:46px; font:inherit; font-size:14px; border:1px solid #cbccd8; border-radius:8px; padding:0 10px; background:#fff; color:var(--afv-navy); }
.afv__select:focus-visible, .afv button:focus-visible { outline:3px solid #bd1622; outline-offset:2px; }
.afv__reset { min-height:46px; border:1px solid var(--afv-border); border-radius:8px; background:#fff; color:var(--afv-navy); padding:0 12px; cursor:pointer; font-size:13px; font-weight:650; }
.afv__reset:disabled { opacity:.55; cursor:default; }
.afv__stage { background:#1b1b2d; border-radius:11px; overflow:hidden; }
.afv__image-stage { height:clamp(300px,48vw,540px); display:flex; align-items:center; justify-content:center; position:relative; isolation:isolate; background:radial-gradient(ellipse at 50% 15%,#353449 0%,#202037 70%); }
.afv__image-stage::before { content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,.06); pointer-events:none; border-radius:8px; }
.afv__display-img, .afv__display-canvas { display:block; height:100%; width:100%; object-fit:contain; }
.afv__image-stage [hidden] { display:none !important; }
.afv__edge-button { display:grid; place-items:center; width:43px; height:43px; padding:0; position:absolute; top:50%; transform:translateY(-50%); border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(17,18,30,.68); color:#fff; font-size:26px; line-height:1; cursor:pointer; z-index:2; backdrop-filter:blur(10px); }
.afv__edge-button:hover { background:rgba(189,22,34,.9); }
.afv__edge-button--prev { left:12px; } .afv__edge-button--next { right:12px; }
.afv__badge { z-index:2; position:absolute; left:16px; top:14px; background:rgba(255,255,255,.93); color:var(--afv-navy); border-radius:50px; font-size:12px; padding:7px 11px; font-weight:700; display:flex; gap:7px; align-items:center; pointer-events:none; }
.afv__badge[hidden] { display:none; }
.afv__badge-dot { width:11px; height:11px; flex:none; border-radius:50%; background:var(--afv-swatch,#c8c8c8); border:1px solid rgba(0,0,0,.15); }
.afv__busy { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); border-radius:40px; background:rgba(26,27,45,.8); color:white; z-index:3; font-size:13px; padding:8px 15px; white-space:nowrap; pointer-events:none; }
.afv__busy[hidden] { display:none; }
.afv__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 17px; color:#f9f9fc; }
.afv__photo-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:650; }
.afv__count { font-size:12px; color:#d1d0d9; white-space:nowrap; font-variant-numeric:tabular-nums; }
.afv__thumbs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:12px 0 0; }
.afv__thumb { display:block; min-width:0; padding:4px; background:#fff; color:var(--afv-navy); border:2px solid transparent; border-radius:9px; cursor:pointer; text-align:left; }
.afv__thumb[aria-pressed="true"] { border-color:var(--afv-red); }
.afv__thumb-image { background:#eae9ed; width:100%; aspect-ratio:1.7/1; border-radius:5px; overflow:hidden; position:relative; display:block; }
.afv__thumb-image > img, .afv__thumb-image > canvas { display:block; width:100%; height:100%; object-fit:cover; }
.afv__thumb-image > [hidden] { display:none !important; }
.afv__thumb-name { font-size:11px; font-weight:650; line-height:1.2; margin-top:6px; display:block; min-height:26px; }
.afv__bottom { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; justify-content:space-between; margin-top:12px; }
.afv__status { display:flex; gap:8px; align-items:center; margin:0; font-size:12px; color:var(--afv-navy); font-weight:700; }
.afv__status strong { font-size:13px; }
.afv__status .afv__status-dot { width:18px; height:18px; border:2px solid #fff; box-shadow:0 0 0 1px #ddd; border-radius:50%; background:var(--afv-swatch,#ddd); }
.afv__note { max-width:540px; margin:0; font-size:12px; line-height:1.5; color:var(--afv-muted); }
.afv__try { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:7px; width:100%; min-height:32px; background:#fff; border:1px solid #e1e2e8; color:#bd1622; border-radius:7px; padding:6px; cursor:pointer; font-size:12px; font-weight:700; }
.afv__try:hover, .afv__try[aria-pressed="true"] { background:#fff0f0; border-color:#dbb8b8; }
.afv__try[aria-pressed="true"]::after { content:"✓"; }
.afv__dialog-try { background:#bd1622; color:white; border:0; cursor:pointer; border-radius:5px; font-size:13px; padding:8px 10px; font-weight:700; }
.afv__dialog-try:hover { background:#95121b; }
.afv__fallback { display:none; font-size:13px; }
.afv__fallback:not([hidden]) { display:block; padding:8px 12px; color:#a10d18; }
@media(max-width:800px) { .afv__top { align-items:start; } .afv__choice { max-width:none; flex:1 1 100%; } .afv__image-stage { height:clamp(300px,57vw,480px); } }
@media(max-width:600px) {
  .afv { padding:12px; border-radius:12px; margin:22px 0 30px; }
  .afv__title { font-size:22px !important; }
  .afv__choice { gap:8px; }
  .afv__image-stage { height:340px; }
  .afv__edge-button { width:36px; height:36px; font-size:23px; }
  .afv__edge-button--prev { left:6px; } .afv__edge-button--next { right:6px; }
  .afv__badge { top:8px; left:8px; font-size:11px; padding:5px 8px; }
  .afv__thumbs { grid-template-columns:none; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:7px; padding-bottom:7px; scrollbar-width:thin; }
  .afv__thumb { width:112px; flex:0 0 112px; scroll-snap-align:start; }
  .afv__thumb-name { min-height:28px; }
  .afv__foot { padding:12px; }
  .afv__note { font-size:11px; }
}
/* Reserve room for the new selection action without overlapping the next grid row. */
.adf-gallery__item { display:flex; flex-direction:column; }
.adf-gallery__item > .adf-gallery__card { height:auto; flex:1 1 auto; }
.adf-gallery__item > .afv__try { flex:0 0 auto; }