.ranti-mosaic{--navy:#173c5e;--gold:#c99550;max-width:1480px;margin:0 auto;padding:32px 20px 80px;color:#173149}.ranti-mosaic *{box-sizing:border-box}.ranti-mosaic-hero{text-align:center;padding:30px 15px 42px}.ranti-mosaic-hero p{letter-spacing:.18em;font-size:12px;font-weight:800;color:var(--gold)}.ranti-mosaic-hero h1{font-size:clamp(34px,5vw,64px);line-height:1.05;margin:10px 0 14px;color:var(--navy)}.ranti-mosaic-hero span{font-size:18px}.ranti-mosaic-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,.7fr);gap:28px;align-items:start}.ranti-mosaic-preview-card,.ranti-mosaic-controls{background:#fff;border:1px solid #e5e8eb;border-radius:22px;box-shadow:0 18px 55px rgba(23,60,94,.09);overflow:hidden}.ranti-mosaic-preview-card{position:sticky;top:24px}.ranti-mosaic-toolbar{display:flex;gap:8px;padding:14px;border-bottom:1px solid #edf0f2}.ranti-mosaic-toolbar button{border:1px solid #d8dee3;background:#fff;border-radius:9px;padding:9px 13px;font-weight:700;cursor:pointer}.ranti-mosaic-canvas-wrap{padding:18px;background:#f6f2eb;display:flex;justify-content:center;overflow:auto}.ranti-mosaic canvas{display:block;max-width:100%;height:auto;background:#eee;box-shadow:0 8px 35px rgba(0,0,0,.16);touch-action:none;cursor:grab}.ranti-mosaic canvas:active{cursor:grabbing}.ranti-mosaic-legend{display:flex;justify-content:space-between;padding:13px 18px;font-size:13px}.ranti-mosaic-legend i{display:inline-block;width:18px;border-top:3px solid #ddd;margin-right:6px}.ranti-mosaic-controls{padding:0}.ranti-mosaic-section{position:relative;padding:24px 25px;border-bottom:1px solid #edf0f2}.ranti-mosaic-section>b{position:absolute;right:22px;top:22px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#eef3f7;color:var(--navy)}.ranti-mosaic-section h2{font-size:20px;margin:0 42px 18px 0;color:var(--navy)}.ranti-mosaic-section label{display:grid;gap:7px;margin:14px 0;font-size:13px;font-weight:700}.ranti-mosaic-section input[type=number],.ranti-mosaic-section input[type=file]{width:100%}.ranti-mosaic-section input[type=number]{border:1px solid #d6dde3;border-radius:9px;padding:11px}.ranti-mosaic-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ranti-mosaic-help{font-size:12px;color:#65717a}.ranti-mosaic-upload{padding:15px;border:2px dashed #c8d3dc;border-radius:12px;background:#f8fafb}.ranti-mosaic-upload span{font-weight:400;color:#6d7880}.ranti-mosaic-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px!important}.ranti-mosaic-summary dl{margin:0}.ranti-mosaic-summary dl div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #dfe4e8}.ranti-mosaic-summary dd{font-weight:800;color:var(--navy)}#ranti-mosaic-add{width:100%;margin-top:18px;padding:15px;border:0;border-radius:10px;background:var(--gold);color:#fff;font-weight:800;font-size:16px}#ranti-mosaic-status{margin-top:12px;font-size:13px;font-weight:700}.ranti-cart-project-thumb img{max-width:90px;margin-top:8px;border-radius:6px}@media(max-width:980px){.ranti-mosaic-layout{grid-template-columns:1fr}.ranti-mosaic-preview-card{position:static}}@media(max-width:520px){.ranti-mosaic{padding-inline:10px}.ranti-mosaic-two{grid-template-columns:1fr}.ranti-mosaic-section{padding:20px 16px}}

.ranti-mosaic-range-label{grid-template-columns:1fr auto!important;align-items:center}.ranti-mosaic-range-label>span{grid-column:1}.ranti-mosaic-range-label>strong{grid-column:2;color:var(--navy);font-size:14px}.ranti-mosaic-range-label>input{grid-column:1/-1;width:100%;accent-color:var(--gold)}.ranti-mosaic-installation{margin-top:22px;padding:18px;border:1px solid #dce4ea;border-radius:14px;background:#f8fafb}.ranti-mosaic-installation h3{margin:0 0 12px;color:var(--navy);font-size:16px}.ranti-mosaic-installation dl{margin:0}.ranti-mosaic-installation dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px dashed #dbe2e7;font-size:13px}.ranti-mosaic-installation dt{color:#596875}.ranti-mosaic-installation dd{margin:0;text-align:right;font-weight:800;color:var(--navy)}.ranti-mosaic-installation .ranti-mosaic-installation-total{display:block;margin-top:8px;padding:13px;border:0;border-radius:10px;background:#eef3f7}.ranti-mosaic-installation-total dt{display:block;margin-bottom:5px;font-weight:700}.ranti-mosaic-installation-total dd{text-align:left;font-size:18px}.ranti-mosaic-installation p{margin:12px 0 0;font-size:11px;line-height:1.45;color:#697680}

/* Mobile-first improvements for the mosaic designer. */
@media(max-width:767px){
  .ranti-mosaic{width:100%;max-width:100%;padding:14px 10px 48px;overflow:hidden}
  .ranti-mosaic-hero{padding:18px 8px 26px}
  .ranti-mosaic-hero h1{font-size:clamp(30px,10vw,42px)}
  .ranti-mosaic-hero span{display:block;font-size:15px;line-height:1.55}
  .ranti-mosaic-layout{display:flex;flex-direction:column;gap:16px;width:100%;min-width:0}
  .ranti-mosaic-preview-card,.ranti-mosaic-controls{width:100%;min-width:0;border-radius:15px}
  .ranti-mosaic-preview-card{position:static;order:1}
  .ranti-mosaic-controls{order:2}
  .ranti-mosaic-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px}
  .ranti-mosaic-toolbar button{min-width:0;padding:10px 5px;font-size:12px;white-space:normal}
  .ranti-mosaic-canvas-wrap{width:100%;padding:8px;overflow:hidden;touch-action:none}
  .ranti-mosaic canvas{width:100%!important;max-width:100%!important;height:auto!important;box-shadow:0 5px 20px rgba(0,0,0,.14)}
  .ranti-mosaic-legend{flex-direction:column;align-items:flex-start;gap:7px;padding:11px 12px;font-size:12px}
  .ranti-mosaic-section{padding:19px 15px}
  .ranti-mosaic-section>b{right:14px;top:17px}
  .ranti-mosaic-section h2{font-size:18px}
  .ranti-mosaic-section input[type=number],.ranti-mosaic-section input[type=file]{font-size:16px;max-width:100%}
  .ranti-mosaic-installation{padding:14px}
  .ranti-mosaic-installation dl div{gap:8px;align-items:flex-start}
  .ranti-mosaic-installation dt{max-width:52%}
  .ranti-mosaic-installation dd{max-width:48%;overflow-wrap:anywhere}
  #ranti-mosaic-add{min-height:50px;font-size:15px}
}
@media(max-width:380px){
  .ranti-mosaic-toolbar{grid-template-columns:1fr}
  .ranti-mosaic-installation dl div{display:block}
  .ranti-mosaic-installation dt,.ranti-mosaic-installation dd{max-width:none;text-align:left}
  .ranti-mosaic-installation dd{margin-top:3px}
}

/* Katalog płytek i interaktywny projekt ściany. */
.ranti-mosaic-empty-catalog{margin:0 0 24px}.ranti-mosaic-search-label input[type=search]{width:100%;border:1px solid #d6dde3;border-radius:9px;padding:11px;font-size:15px}.ranti-mosaic-selected{display:flex;align-items:center;gap:12px;min-height:62px;margin:12px 0;padding:10px;border:2px solid #c99550;border-radius:12px;background:#fffaf3;color:#52616d}.ranti-mosaic-selected img{width:48px;height:48px;object-fit:cover;border-radius:8px}.ranti-mosaic-selected div{display:grid;gap:3px}.ranti-mosaic-selected strong{color:#173c5e}.ranti-mosaic-selected span{font-size:12px}.ranti-mosaic-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:420px;overflow:auto;padding:2px}.ranti-mosaic-tile{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 9px;align-items:center;width:100%;padding:8px;border:1px solid #dce3e8;border-radius:11px;background:#fff;text-align:left;cursor:pointer}.ranti-mosaic-tile:hover,.ranti-mosaic-tile.is-selected{border-color:#c99550;box-shadow:0 0 0 2px rgba(201,149,80,.16)}.ranti-mosaic-tile img{grid-row:1/3;width:58px;height:58px;object-fit:cover;border-radius:8px;background:#eef1f3}.ranti-mosaic-tile span{align-self:end;min-width:0;color:#173c5e;font-size:12px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}.ranti-mosaic-tile small{align-self:start;color:#6a7680;font-size:11px}.ranti-mosaic-toolbar button.is-active{background:#173c5e;border-color:#173c5e;color:#fff}.ranti-mosaic-breakdown{margin-top:14px}.ranti-mosaic-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #dfe4e8;font-size:12px}.ranti-mosaic-breakdown span{max-width:58%;color:#566571}.ranti-mosaic-breakdown strong{text-align:right;color:#173c5e}.ranti-mosaic canvas{cursor:crosshair}
@media(max-width:767px){.ranti-mosaic-palette{grid-template-columns:1fr;max-height:340px}.ranti-mosaic-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.ranti-mosaic-tile{grid-template-columns:64px minmax(0,1fr)}.ranti-mosaic-tile img{width:64px;height:64px}.ranti-mosaic-breakdown>div{display:block}.ranti-mosaic-breakdown strong{display:block;margin-top:3px;text-align:left}}


/* 1.24.10: widoczna siatka desktop, kontrast przycisków i czytelna numeracja. */
.ranti-mosaic-preview-card .ranti-mosaic-toolbar button,
.ranti-mosaic-preview-card .ranti-mosaic-toolbar button.button{
  appearance:none!important;
  -webkit-appearance:none!important;
  background:#ffffff!important;
  color:#173c5e!important;
  border:1px solid #b8c5cf!important;
  opacity:1!important;
  text-shadow:none!important;
  -webkit-text-fill-color:#173c5e!important;
}
.ranti-mosaic-preview-card .ranti-mosaic-toolbar button:hover,
.ranti-mosaic-preview-card .ranti-mosaic-toolbar button:focus{
  background:#eef3f7!important;
  color:#102f49!important;
  border-color:#173c5e!important;
}
.ranti-mosaic-preview-card .ranti-mosaic-toolbar button.is-active{
  background:#173c5e!important;
  color:#ffffff!important;
  border-color:#173c5e!important;
  -webkit-text-fill-color:#ffffff!important;
}
.ranti-mosaic-canvas-wrap{min-width:0}
.ranti-mosaic-canvas-wrap canvas#ranti-mosaic-canvas{
  width:100%!important;
  max-width:1100px!important;
  min-height:260px;
  border:1px solid rgba(23,60,94,.35);
}
@media(min-width:981px){
  .ranti-mosaic-preview-card{min-width:0}
  .ranti-mosaic-canvas-wrap{width:100%;overflow:auto}
}


/* 1.24.12: poprawne ceny i czytelna karta aktualnie wybranej płytki. */
.ranti-mosaic-selected{
  position:relative;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-height:104px;
  margin:16px 0 18px;
  padding:32px 14px 14px;
  border:1px solid #d8e0e6;
  border-radius:14px;
  background:#f8fafb;
  box-shadow:none;
}
.ranti-mosaic-selected-label{
  position:absolute;
  top:10px;
  left:14px;
  color:#6a7680;
  font-size:11px!important;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ranti-mosaic-selected img{width:76px;height:76px;border-radius:10px;border:1px solid #e1e6ea}
.ranti-mosaic-selected div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.ranti-mosaic-selected strong{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.ranti-mosaic-selected-sku{color:#71808c;font-size:11px!important}
.ranti-mosaic-selected-price{color:#173c5e!important;font-size:14px!important;font-weight:800}
.ranti-mosaic-selected-empty{grid-column:1/-1;color:#6a7680;font-size:13px}
.ranti-mosaic-tile[hidden]{display:none!important}
.ranti-mosaic-tile.is-selected{border-color:#dce3e8;box-shadow:none}
@media(max-width:480px){
  .ranti-mosaic-selected{grid-template-columns:64px minmax(0,1fr);padding:32px 12px 12px}
  .ranti-mosaic-selected img{width:64px;height:64px}
}

/* 1.24.13: podgląd projektu i czytelne dodawanie płytek do koszyka. */
.ranti-mosaic-toolbar{grid-template-columns:repeat(5,minmax(0,1fr))}
.ranti-mosaic-preview-button{font-weight:800!important}
.ranti-mosaic-modal[hidden]{display:none!important}
.ranti-mosaic-modal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:24px}
.ranti-mosaic-modal-backdrop{position:absolute;inset:0;background:rgba(9,25,39,.72);backdrop-filter:blur(3px)}
.ranti-mosaic-modal-dialog{position:relative;z-index:1;width:min(1180px,96vw);max-height:94vh;display:flex;flex-direction:column;background:#fff;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:hidden}
.ranti-mosaic-modal-head,.ranti-mosaic-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #e1e7eb}
.ranti-mosaic-modal-head h2{margin:0;color:#173c5e;font-size:21px}
.ranti-mosaic-modal-head button{width:42px;height:42px;border:0;border-radius:50%;background:#eef3f6;color:#173c5e;font-size:30px;line-height:1;cursor:pointer}
.ranti-mosaic-modal-body{display:flex;align-items:center;justify-content:center;min-height:240px;padding:20px;overflow:auto;background:#f3f5f6}
.ranti-mosaic-modal-body img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.ranti-mosaic-modal-foot{justify-content:flex-end;border-top:1px solid #e1e7eb;border-bottom:0}
body.ranti-mosaic-modal-open{overflow:hidden}
@media(max-width:767px){.ranti-mosaic-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.ranti-mosaic-preview-button{grid-column:1/-1}.ranti-mosaic-modal{padding:10px}.ranti-mosaic-modal-dialog{width:100%;max-height:96vh;border-radius:13px}.ranti-mosaic-modal-body{padding:10px}.ranti-mosaic-modal-head,.ranti-mosaic-modal-foot{padding:12px}}