.meblovo-pspro-tiles-front{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.meblovo-pspro-tile{border:1px solid var(--meblovo-border);border-radius:14px;padding:10px 12px;cursor:pointer}
.meblovo-pspro-tile-label{font-size:12px;color:#555}
.meblovo-pspro-tile-value{font-weight:700;margin-top:4px}
.meblovo-pspro-tip{margin-left:8px;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid #c9a86a;color:#c9a86a;font-size:10px;position:relative}
.meblovo-pspro-tip:hover:after{
  content:attr(data-tip);
  position:absolute;
  right:0;
  top:120%;
  transform:none;
  /* Accent palette for fallback CSS tooltips */
  background:var(--meblovo-accent-soft);
  color:var(--meblovo-text);
  border:1px solid var(--meblovo-accent);
  padding:8px 10px;
  border-radius:10px;
  white-space:pre-line;
  min-width:180px;
  max-width:260px;
  z-index:99999;
  font-size:12px;
  line-height:1.35;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.meblovo-pspro-acc{border:1px solid #eee;border-radius:16px;margin:12px 0;overflow:visible}
.meblovo-pspro-acc-title{width:100%;text-align:left;border:none;background:#faf7f0;padding:14px 16px;font-weight:700;cursor:pointer}
.meblovo-pspro-acc-body{display:none;padding:12px 14px}
.meblovo-pspro-acc.is-open .meblovo-pspro-acc-body{display:block}
.meblovo-pspro-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f2f2f2;font-size:13px}
.meblovo-pspro-row:last-child{border-bottom:none}

/* === MEBLOVO Premium UI === */
:root{
  /*
   * Primary accent colour for Meblovo PSPRO UI.  This base shade (#cbbca0) and its
   * lighter variants are derived from the user's chosen colour.  Adjusting
   * these variables will propagate to icons, borders and tooltip backgrounds.
   */
  --meblovo-accent:#cbbca0;
  --meblovo-accent-soft:#d5c9b3;    /* ~20% lighter than accent */
  --meblovo-accent-soft-2:#e0d7c6; /* ~40% lighter than accent */
  /* Border colour matches the grey used in adjacent fabric configurator */
  /* Border colour now matches the primary accent colour for consistent frames */
  --meblovo-border:#cbbca0;
  --meblovo-text:#111;
}

.meblovo-pspro-acc{
  border:1px solid var(--meblovo-border);
  border-radius:16px;
  margin:14px 0;
  /* allow tooltips to escape the accordion frame */
  overflow:visible;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.meblovo-pspro-acc-title{
  background:var(--meblovo-accent-soft);
  border-bottom:1px solid var(--meblovo-border);
  padding:16px 18px;
  font-weight:700;
  font-size:14px;
  color:var(--meblovo-text);
}
.meblovo-pspro-acc.is-open{
  border-color:var(--meblovo-accent);
}
.meblovo-pspro-acc.is-open .meblovo-pspro-acc-title{
  background:var(--meblovo-accent-soft-2);
}
.meblovo-pspro-acc-body{
  background:#fff;
  padding:14px 18px;
}
.meblovo-pspro-row{
  padding:10px 0;
  border-bottom:1px solid #F1F1F1;
}
.meblovo-pspro-row:last-child{border-bottom:none;}

button.meblovo-pspro-acc-title{width:100%;display:block;appearance:none;-webkit-appearance:none;border:0;cursor:pointer}

#meblovo-pspro-spec{padding:10px 0}

.meblovo-pspro-carddl{margin:12px 0;text-align:right}
.meblovo-pspro-carddl .button{background:#c19a83;border:0;color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none;display:inline-block}


.meblovo-pspro-tiles-actions{margin-top:10px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.meblovo-pspro-tile-card:hover{background:#c19a83;color:#fff}

.meblovo-pspro-cardbtn{margin:10px 0 0;text-align:left}
.meblovo-pspro-cardlink{display:inline-block;font-size:12px;padding:7px 10px;border-radius:10px;border:1px solid #c19a83;color:#c19a83;background:transparent;text-decoration:none}
.meblovo-pspro-cardlink:hover{background:#c19a83;color:#fff}
.meblovo-pspro-btn{display:inline-block;font-size:12px;padding:7px 10px;border-radius:10px;border:1px solid #c19a83;color:#c19a83;background:transparent;text-decoration:none}
.meblovo-pspro-btn:hover{background:#c19a83;color:#fff}

/* MEBLOVO_STOCK_ABOVE_TILES */
.summary p.stock,
.summary .woocommerce-variation-availability .stock{
  margin:2px 0 12px!important;
  font-size:16px!important;
  line-height:1.3!important;
  font-weight:500!important;
}
.summary p.stock.in-stock,
.summary p.stock.available-on-backorder,
.summary .woocommerce-variation-availability .stock.in-stock,
.summary .woocommerce-variation-availability .stock.available-on-backorder{
  color:#5f9655!important;
}
.summary p.stock.out-of-stock,
.summary .woocommerce-variation-availability .stock.out-of-stock{
  color:#b14d43!important;
}

/* MEBLOVO_TILE_COMPACT */
.meblovo-pspro-tiles-front{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0}
.meblovo-pspro-tile{padding:12px 14px;border-radius:16px;min-height:74px}
.meblovo-pspro-tile .meblovo-pspro-tile-title{font-size:12px;margin-bottom:4px}
.meblovo-pspro-tile .meblovo-pspro-tile-value{font-size:14px}

/* MEBLOVO_TILE_COMPACT_FORCE */
.meblovo-pspro-tiles-front{grid-template-columns:repeat(3,1fr)!important}
@media(max-width:1024px){.meblovo-pspro-tiles-front{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){.meblovo-pspro-tiles-front{grid-template-columns:1fr!important}}
.meblovo-pspro-tile{padding:10px 12px!important;min-height:64px!important}

/* MEBLOVO_TILE_MOBILE_ADAPTIVE */
@media(max-width:600px){
  .meblovo-pspro-tiles-front{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin:12px 0!important;
    align-items:stretch;
  }
  .meblovo-pspro-tile{
    min-width:0!important;
    min-height:84px!important;
    padding:11px 10px!important;
    border-radius:18px!important;
  }
  .meblovo-pspro-tile--mobile-wide{
    grid-column:1 / -1!important;
    min-height:72px!important;
    padding:12px 14px!important;
  }
  .meblovo-pspro-tile-label{
    font-size:13px!important;
    line-height:1.2!important;
    gap:7px!important;
  }
  .meblovo-pspro-tile-value{
    font-size:15px!important;
    line-height:1.16!important;
    margin-top:8px!important;
    white-space:nowrap!important;
    letter-spacing:0!important;
  }
  .meblovo-pspro-tip{
    flex:0 0 auto;
  }
  .summary p.stock,
  .summary .woocommerce-variation-availability .stock{
    margin:0 0 12px!important;
    font-size:18px!important;
  }
  .meblovo-pspro-tiles-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    justify-content:stretch!important;
    margin-top:10px!important;
  }
  .meblovo-pspro-tiles-actions .meblovo-pspro-btn{
    width:100%!important;
    box-sizing:border-box!important;
    text-align:center!important;
    font-size:11px!important;
    line-height:1.2!important;
    padding:9px 6px!important;
    white-space:nowrap!important;
  }
}

@media(max-width:360px){
  .meblovo-pspro-tiles-front{
    grid-template-columns:1fr!important;
  }
  .meblovo-pspro-tiles-actions{
    grid-template-columns:1fr!important;
  }
  .meblovo-pspro-tile-value{
    font-size:14px!important;
  }
}

.meblovo-pspro-acc-body{overflow:visible}
.meblovo-pspro-row{overflow:visible;position:relative}

/* Podsekcje (np. Pojemniki / szczegóły pod parametrem głównym) */
.meblovo-pspro-subgroup{margin:6px 0 10px 0;padding-left:12px;border-left:3px solid var(--meblovo-accent-soft-2)}
.meblovo-pspro-subhead{font-weight:700;font-size:12px;color:#333;margin:10px 0 2px}
.meblovo-pspro-row.is-sub{padding:6px 0;border-bottom:none;font-size:12px;color:#333}

/* --- Premium rounded corners for accordion sections ---
   We keep overflow:visible to avoid clipping tooltips, so we explicitly round
   the header and the body to match the outer oval frame. */
.meblovo-pspro-acc-title{border-radius:16px;}
.meblovo-pspro-acc.is-open .meblovo-pspro-acc-title{border-radius:16px 16px 0 0;}
.meblovo-pspro-acc-body{border-radius:0 0 16px 16px;}

/* === MEBLOVO: tooltips (JS-driven, viewport-safe) === */
html.meblovo-pspro-js-tooltips .meblovo-pspro-tip:hover:after{display:none!important;}

#meblovo-pspro-tooltip{
  position:fixed;
  z-index:999999;
  /* Use accent palette for tooltip background and border */
  background:var(--meblovo-accent-soft);
  color:var(--meblovo-text);
  border:1px solid var(--meblovo-accent);
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1.35;
  white-space:pre-line;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

/* Bigger icon + magnifier look (no white background) */
.meblovo-pspro-tip{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--meblovo-accent);
  color:var(--meblovo-accent);
  font-size:0; /* hide ?/i */
  line-height:0;
  padding:0;
}
.meblovo-pspro-tip::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
  /* magnifier (stroke matches accent); use encoded HEX for #cbbca0 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%23cbbca0' stroke-width='2'/%3E%3Cpath d='M16.5 16.5L21 21' fill='none' stroke='%23cbbca0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Make it easier to tap on mobile */
@media(max-width:768px){
  .meblovo-pspro-tip{width:24px;height:24px;}
  .meblovo-pspro-tip::before{background-size:13px 13px;}
}

/* === Visual alignment: label text vs magnifier icon ===
   The magnifier is intentionally bigger; flex alignment keeps typography centered. */
.meblovo-pspro-tile-label{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.2;
}

.meblovo-pspro-tip{margin-left:0;flex:0 0 auto;}


/* === Visual alignment: spec rows (labels/values) vs magnifier icon === */
.meblovo-pspro-row .k,
.meblovo-pspro-row .v{
  display:flex;
  align-items:center;
}

.meblovo-pspro-row .k{
  gap:8px;
  min-width:0;
}

.meblovo-pspro-row .v{
  gap:8px;
  justify-content:flex-end;
}

/* On very small screens keep text readable and icon aligned */
@media(max-width:480px){
  .meblovo-pspro-row .v{gap:6px;}
}

/* === Desktop readability improvements ===
   On wider screens the distance between the label and its value can make
   the specification harder to scan.  We increase the font size and weight
   slightly for both the label (.k) and value (.v) columns when the
   viewport is at least 768 px wide.  This makes text more legible without
   affecting the mobile layout. */
@media(min-width:768px){
  .meblovo-pspro-row{
    font-size:14px;
  }
  .meblovo-pspro-row .k,
  .meblovo-pspro-row .v{
    font-weight:600;
  }
}


/* === 3.3.5 style hotfix: unified beige rounded spec layout === */
#meblovo-pspro-spec .meblovo-pspro-acc{
  border:1px solid var(--meblovo-border)!important;
  border-radius:26px!important;
  background:#fff!important;
  overflow:visible!important;
  box-shadow:none!important;
}

#meblovo-pspro-spec .meblovo-pspro-acc-title,
#meblovo-pspro-spec button.meblovo-pspro-acc-title{
  display:block!important;
  width:100%!important;
  background:var(--meblovo-accent-soft)!important;
  color:#fff!important;
  border:0!important;
  border-bottom:1px solid var(--meblovo-border)!important;
  border-radius:26px!important;
  padding:18px 24px!important;
  font-weight:800!important;
  font-size:16px!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  box-shadow:none!important;
}

#meblovo-pspro-spec .meblovo-pspro-acc.is-open .meblovo-pspro-acc-title,
#meblovo-pspro-spec .meblovo-pspro-acc.is-open > .meblovo-pspro-acc-title{
  background:var(--meblovo-accent-soft)!important;
  color:#fff!important;
  border-radius:26px 26px 0 0!important;
}

#meblovo-pspro-spec .meblovo-pspro-acc-body{
  background:#fff!important;
  border-radius:0 0 26px 26px!important;
  padding:20px 24px!important;
}

#meblovo-pspro-spec .meblovo-pspro-row{
  padding:16px 0!important;
  border-bottom:1px solid #ece9e2!important;
  font-size:15px!important;
}

#meblovo-pspro-spec .meblovo-pspro-row:last-child{border-bottom:none!important;}

#meblovo-pspro-spec .meblovo-pspro-row .k,
#meblovo-pspro-spec .meblovo-pspro-row .v{
  color:#5f5f5f!important;
  font-weight:500!important;
}

@media(max-width:768px){
  #meblovo-pspro-spec .meblovo-pspro-acc{border-radius:22px!important;}
  #meblovo-pspro-spec .meblovo-pspro-acc-title,
  #meblovo-pspro-spec button.meblovo-pspro-acc-title{
    border-radius:22px!important;
    padding:16px 18px!important;
    font-size:15px!important;
  }
  #meblovo-pspro-spec .meblovo-pspro-acc.is-open .meblovo-pspro-acc-title,
  #meblovo-pspro-spec .meblovo-pspro-acc.is-open > .meblovo-pspro-acc-title{
    border-radius:22px 22px 0 0!important;
  }
  #meblovo-pspro-spec .meblovo-pspro-acc-body{
    border-radius:0 0 22px 22px!important;
    padding:18px 18px!important;
  }
  #meblovo-pspro-spec .meblovo-pspro-row{font-size:14px!important;}
}


/* === 3.3.6 UX hotfix: accordion arrows for expandable sections === */
#meblovo-pspro-spec .meblovo-pspro-acc-title,
#meblovo-pspro-spec button.meblovo-pspro-acc-title{
  position:relative!important;
  padding-right:58px!important;
}

#meblovo-pspro-spec .meblovo-pspro-acc-title::after,
#meblovo-pspro-spec button.meblovo-pspro-acc-title::after{
  content:"";
  position:absolute;
  right:24px;
  top:50%;
  width:10px;
  height:10px;
  margin-top:-7px;
  border-right:3px solid rgba(255,255,255,.98);
  border-bottom:3px solid rgba(255,255,255,.98);
  transform:rotate(45deg);
  transition:transform .18s ease, margin-top .18s ease;
  pointer-events:none;
}

#meblovo-pspro-spec .meblovo-pspro-acc.is-open .meblovo-pspro-acc-title::after,
#meblovo-pspro-spec .meblovo-pspro-acc.is-open > .meblovo-pspro-acc-title::after{
  transform:rotate(-135deg);
  margin-top:-3px;
}

@media(max-width:768px){
  #meblovo-pspro-spec .meblovo-pspro-acc-title,
  #meblovo-pspro-spec button.meblovo-pspro-acc-title{
    padding-right:52px!important;
  }
  #meblovo-pspro-spec .meblovo-pspro-acc-title::after,
  #meblovo-pspro-spec button.meblovo-pspro-acc-title::after{
    right:20px;
    width:9px;
    height:9px;
    border-right-width:3px;
    border-bottom-width:3px;
  }
}


/* === 3.3.7 typography hotfix: restore original font proportions/look === */
#meblovo-pspro-spec .meblovo-pspro-acc-title,
#meblovo-pspro-spec button.meblovo-pspro-acc-title{
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  color:var(--meblovo-text)!important;
}

#meblovo-pspro-spec .meblovo-pspro-acc.is-open .meblovo-pspro-acc-title,
#meblovo-pspro-spec .meblovo-pspro-acc.is-open > .meblovo-pspro-acc-title{
  color:var(--meblovo-text)!important;
}

#meblovo-pspro-spec .meblovo-pspro-acc-title::after,
#meblovo-pspro-spec button.meblovo-pspro-acc-title::after{
  border-right-color:rgba(17,17,17,.92)!important;
  border-bottom-color:rgba(17,17,17,.92)!important;
}

#meblovo-pspro-spec .meblovo-pspro-row{
  font-size:13px!important;
  line-height:1.45!important;
}

#meblovo-pspro-spec .meblovo-pspro-row .k,
#meblovo-pspro-spec .meblovo-pspro-row .v{
  font-weight:400!important;
  color:#333!important;
}

#meblovo-pspro-spec .meblovo-pspro-subhead{
  font-size:12px!important;
  font-weight:700!important;
}

#meblovo-pspro-spec .meblovo-pspro-row.is-sub{
  font-size:12px!important;
}

@media(min-width:768px){
  #meblovo-pspro-spec .meblovo-pspro-row{
    font-size:14px!important;
  }
  #meblovo-pspro-spec .meblovo-pspro-row .k,
  #meblovo-pspro-spec .meblovo-pspro-row .v{
    font-weight:600!important;
  }
}

@media(max-width:768px){
  #meblovo-pspro-spec .meblovo-pspro-acc-title,
  #meblovo-pspro-spec button.meblovo-pspro-acc-title{
    font-size:14px!important;
    line-height:1.25!important;
  }

  #meblovo-pspro-spec .meblovo-pspro-row{
    font-size:13px!important;
  }
}