/*!-- ========= CSS ========= -->*/

:root{
    --page:#fff;
    --ink:#101114;
    --muted:rgba(16,17,20,.72);
    --faint:rgba(16,17,20,.52);
    --line:rgba(16,17,20,.12);

    --card:#0b0b0c;
    --cardLine:rgba(255,255,255,.12);
    --cardText:rgba(255,255,255,.92);
    --cardMuted:rgba(255,255,255,.68);

    --accent:#d8c7a3;
    --radius:18px;
    --shadow:0 18px 60px rgba(0,0,0,.18);

    --frame:rgba(0,0,0,.82);
    --frameEdge:rgba(255,255,255,.08);
    --mat:#f6f4ef;
    --matEdge:rgba(0,0,0,.08);
  }

  #viki-catalog-embed{ background: var(--page); }

  .vc-wrap{
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--page);
    border-radius: 22px;
    padding: 26px;
    border: 1px solid rgba(16,17,20,.10);
    box-shadow: var(--shadow);
    max-width: 1400px;
    margin: 0 auto;
  }

  .vc-header{ display:block; }
  .vc-head-top{ margin-bottom: 14px; }

  .vc-kicker{
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:12px;
    color: var(--faint);
    margin-bottom:6px;
  }
  .vc-title{
    font-family: Bitter, Georgia, serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.12;
    margin: 0;
  }
  .vc-sub{
    margin-top:10px;
    color: var(--muted);
    font-size:14px;
    line-height:1.5;
    max-width: 110ch;
  }

  .vc-essay{
    width: 100%;
    margin-top: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(16,17,20,.12);
    background: linear-gradient(180deg, rgba(216,199,163,.16), rgba(0,0,0,0));
  }
  .vc-essay h2{
    margin: 0 0 10px 0;
    font-family: Bitter, Georgia, serif;
    font-size: 18px;
    line-height: 1.2;
  }
  .vc-essay p{
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(16,17,20,.80);
  }

  .vc-controls{
    margin-top: 18px;
    padding: 14px 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(16,17,20,.10);
    background: rgba(16,17,20,.02);
  }
  .vc-chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 12px; }

  .vc-chipbtn, .vc-input, .vc-select, .vc-btn{
    background: rgba(16,17,20,.04);
    border: 1px solid rgba(16,17,20,.14);
    color: var(--ink);
    border-radius: 999px;
    padding: 10px 12px;
    font-size: 13px;
    outline: none;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .vc-chipbtn{
    cursor:pointer;
    user-select:none;
    padding: 8px 12px;
    font-size: 12px;
    color: rgba(16,17,20,.76);
  }
  .vc-chipbtn:hover{ transform: translateY(-1px); border-color: rgba(16,17,20,.24); }
  .vc-chipbtn.is-active{
    color: var(--ink);
    border-color: rgba(216,199,163,.90);
    background: rgba(216,199,163,.22);
  }

  .vc-filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
  }
  .vc-input{ width: 340px; max-width: 90vw; padding-left: 14px; }
  .vc-input::placeholder{ color: rgba(16,17,20,.45); }
  .vc-input:focus, .vc-select:focus{
    border-color: rgba(216,199,163,.90);
    background: rgba(216,199,163,.14);
  }
  .vc-select{ padding-right: 34px; }

  .vc-meta{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: rgba(16,17,20,.72);
    font-size: 12px;
  }
  .vc-meta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .vc-btn{
    cursor:pointer;
    user-select:none;
    padding: 9px 12px;
    font-size: 12px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .vc-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(216,199,163,.90);
    background: rgba(216,199,163,.14);
  }

  .vc-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    margin-top: 16px;
    padding: 6px;
    border-radius: 18px;
  }
  .vc-card{
    grid-column: span 4;
    background: var(--card);
    color: var(--cardText);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    transform: translateY(6px);
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease, border-color .12s ease;
    cursor: pointer;
  }
  .vc-card.is-in{ opacity:1; transform: translateY(0); }
  .vc-card:hover{ border-color: rgba(216,199,163,.42); }

  .vc-cardhead{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
  }
  .vc-idpill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius: 999px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.24);
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
  }
  .vc-idpill b{ font-weight: 700; color: rgba(255,255,255,.95); }

  .vc-thumb{ padding: 14px; background: rgba(0,0,0,.20); }
  .vc-square{
    width: 100%;
    aspect-ratio: 1 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .vc-frame{
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: var(--frame);
    border: 1px solid var(--frameEdge);
    padding: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,.34);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .vc-mat{
    width: 100%;
    height: 100%;
    background: var(--mat);
    border-radius: 10px;
    border: 1px solid var(--matEdge);
    padding: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .vc-mat img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display:block;
    border-radius: 6px;
  }

  .vc-body{ padding: 12px 14px 14px; }
  .vc-h{ margin:0 0 6px 0; font-size:15px; line-height:1.25; font-weight:650; color: rgba(255,255,255,.92); }
  .vc-small{ color: rgba(255,255,255,.68); font-size:12px; line-height:1.35; margin-bottom:10px; }
  .vc-line2{ border-top: 1px solid rgba(255,255,255,.10); margin: 12px 0; }
  .vc-logline{ font-family: Bitter, Georgia, serif; font-size:13px; line-height:1.4; color: rgba(255,255,255,.86); margin:0 0 10px; }

  .vc-tags{ display:flex; flex-wrap:wrap; gap:6px; }
  .vc-tag{
    font-size: 11px;
    color: rgba(255,255,255,.72);
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
  }
  .vc-tag.role{
    border-color: rgba(216,199,163,.35);
    background: rgba(216,199,163,.10);
    color: rgba(255,255,255,.86);
  }

  .vc-bottom{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.10);
    display:flex;
    justify-content: space-between;
    align-items:center;
    color: rgba(255,255,255,.55);
    font-size: 12px;
  }

  /* MODALS */
  .vc-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index: 999999;
    padding: 18px;
  }
  .vc-modal.is-open{ display:flex; }

  .vc-dialog{
    width: min(1320px, 98vw);
    height: min(920px, 92vh);
    background: rgba(15,15,16,.94);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    overflow:hidden;
    box-shadow: 0 30px 100px rgba(0,0,0,.65);
    display:flex;
    flex-direction: column;
  }

  /* HEADER spans full width */
  .vc-dialoghead{
    display:grid;
    grid-template-columns: 1fr auto auto;
    align-items:center;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.30);
  }
  .vc-head-left{ display:flex; align-items:center; gap:10px; min-width: 0; }
  .vc-head-mid{ display:flex; align-items:center; gap:10px; }
  .vc-head-right{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }

  .vc-dialogbody{
    flex: 1;
    display:grid;
    grid-template-columns: 1.65fr 1fr;
    min-height: 0;
  }

  .vc-pill{
    background: rgba(0,0,0,.44);
    border: 1px solid rgba(255,255,255,.14);
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
  }
  #vc-modal-titlepill{
    overflow:hidden;
    text-overflow: ellipsis;
    max-width: 62vw;
  }

  .vc-close{
    cursor:pointer;
    border-radius: 999px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
  }
  .vc-close:hover{
    border-color: rgba(216,199,163,.55);
    background: rgba(216,199,163,.12);
  }

  .vc-view{
    background: rgba(0,0,0,.28);
    overflow:hidden;
    min-height: 0;
    display:flex;
  }
  .vc-canvas{
    width: 100%;
    height: 100%;
    padding: 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 0;
    overflow:auto;
  }
  .vc-canvas .vc-frame{ max-width: 100%; max-height: 100%; }

  .vc-panel{
    padding: 16px 16px 18px;
    overflow:auto;
    color: rgba(255,255,255,.92);
    min-height: 0;
  }
  .vc-panel h3{
    font-family: Bitter, Georgia, serif;
    margin: 0 0 8px 0;
    font-size: 20px;
    line-height: 1.2;
  }
  .vc-dl{
    display:grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 12px;
    margin: 10px 0 14px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
  }
  .vc-dt{ color: rgba(255,255,255,.68); }
  .vc-dd{ color: rgba(255,255,255,.92); }

  .vc-quote{
    border-left: 2px solid rgba(216,199,163,.55);
    padding-left: 12px;
    margin: 12px 0 14px;
    color: rgba(255,255,255,.88);
    font-family: Bitter, Georgia, serif;
    font-size: 14px;
    line-height: 1.45;
  }

  .vc-panel-sep{
    height: 1px;
    background: rgba(255,255,255,.10);
    margin: 14px 0 12px;
  }
  .vc-panel-block{ margin-bottom: 12px; }
  .vc-blocktitle{
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin: 0 0 8px;
  }
  .vc-artwork-link {
    display: inline !important;
  }
  .vc-actiongroup{ display:flex; gap:10px; flex-wrap:wrap; }
  .vc-iconbtn{
    cursor:pointer;
    border-radius: 999px;
    padding: 10px 12px;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.90);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap: 8px;
    white-space: nowrap;
  }
  .vc-iconbtn:hover{
    transform: translateY(-1px);
    border-color: rgba(216,199,163,.55);
    background: rgba(216,199,163,.12);
  }
  .vc-iconbtn.vc-nav{ border-color: rgba(216,199,163,.22); }
  .vc-tip{ margin-top: 10px; color: rgba(255,255,255,.55); font-size: 12px; }

  .vc-sticky-actions{
    display:none;
    position: sticky;
    bottom: 0;
    margin-top: 14px;
    padding: 10px 0 2px;
    background: linear-gradient(180deg, rgba(15,15,16,0), rgba(15,15,16,.92) 24%, rgba(15,15,16,.98));
    border-top: 1px solid rgba(255,255,255,.10);
    gap: 10px;
    justify-content: space-between;
    align-items:center;
  }

  .vc-hide-sm{ display: inline-flex; }
  @media (max-width: 560px){
    .vc-hide-sm{ display:none; }
  }

  /* ROOM modal — truly big/full */
  .vc-roomdialog{
    width: min(1500px, 98vw);
    height: min(980px, 94vh);
    background: rgba(15,15,16,.94);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    overflow:hidden;
    box-shadow: 0 30px 100px rgba(0,0,0,.65);
    display:flex;
    flex-direction: column;
  }
  .vc-roomtop{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.30);
  }
  .vc-roomtop-right{ display:flex; gap:10px; align-items:center; }

  .vc-roomwrap{ padding: 16px; overflow:auto; flex:1; min-height:0; }

  .vc-room{
    position: relative;
    width: 100%;
    height: 640px;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background:
      radial-gradient(1000px 520px at 50% 0%, rgba(255,255,255,.10), transparent 62%),
      linear-gradient(180deg, #2b2b2c 0%, #1b1b1c 48%, #111112 100%);
  }
  .vc-wall{
    position:absolute; left:0; right:0; top:0; height: 70%;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.0)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 22px, rgba(0,0,0,0) 22px 44px);
    opacity: .95;
  }
  .vc-floor{
    position:absolute; left:0; right:0; bottom:-10%; height: 42%;
    background:
      linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 70px, rgba(0,0,0,0) 70px 140px);
    transform: perspective(900px) rotateX(18deg);
    transform-origin: bottom;
  }

  .vc-sofa{
    position:absolute;
    left: 3%;
    bottom: 4%;
    width: 72%;     /* było ~62% */
    height: 30%;    /* było ~26% */
    opacity: .92;
  }

  /* odwróć psa */
  .vc-dog{
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(180deg);
  }

  .vc-people{
    position:absolute; right: 4%; bottom: 4%;
    width: 34%; height: 82%;
    opacity: .85;
  }

  .vc-hangzone{
    position:absolute;
    left: 10%;
    top: 10%;
    width: 56%;
    height: 56%;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.12);
    background: radial-gradient(600px 320px at 50% 30%, rgba(255,255,255,.06), transparent 66%);
    opacity: .22;
  }
  .vc-hang{
    position:absolute;
    left: 18%;
    top: 14%;
    display:flex;
    align-items:center;
    justify-content:center;
    filter: drop-shadow(0 26px 46px rgba(0,0,0,.45));
    z-index: 3;
  }

  .vc-dim{
    position:absolute;
    inset: 0;
    z-index: 999;
    pointer-events:none;
    opacity: .96;
  }
    
  /* to jest kontener DIV, więc SVG w środku ustawiamy na full */
  #vc-room-dim svg{
    width: 100%;
    height: 100%;
    display:block;
    overflow: visible;
  }

  .vc-roomlegend{
    position:absolute;
    left: 12px;
    bottom: 10px;
    z-index: 5;
    font-size: 12px;
    color: rgba(255,255,255,.70);
    background: rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.10);
    padding: 7px 10px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
  }
  .vc-dot{
    display:inline-block;
    width: 10px; height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.22);
    margin-right: 6px;
    vertical-align: -1px;
  }
  .vc-dot.sofa{ background: rgba(216,199,163,.16); border-color: rgba(216,199,163,.30); }
  .vc-dot.art{ background: rgba(216,199,163,.28); border-color: rgba(216,199,163,.45); }

  .vc-roomnote{
    margin-top: 12px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    line-height: 1.55;
  }

  /* Responsive */
  @media (max-width: 991px){
    .vc-card{ grid-column: span 6; }
    .vc-dialog{ width: 98vw; height: 92vh; }
    .vc-dialogbody{ grid-template-columns: 1fr; }
    .vc-panel{ max-height: 44vh; }
    #vc-modal-titlepill{ max-width: 56vw; }
  }
  @media (max-width: 560px){
    .vc-wrap{ padding: 18px; border-radius: 18px; }
    .vc-card{ grid-column: span 12; }
    .vc-input{ width: 100%; }

    .vc-modal{ padding: 10px; }
    .vc-dialog{
      width: 100vw;
      height: 96vh;
      border-radius: 18px;
    }
    .vc-canvas{ padding: 14px; }
    .vc-sticky-actions{ display:flex; }

    .vc-roomdialog{
      width: 100vw;
      height: 98vh;
      border-radius: 18px;
    }
    .vc-room{ height: 68vh; min-height: 520px; }
  }