/* PRQNO – konfigurator_v2.css
   Replaces konfigurator.css. Scope: product detail page (body.type-detail) —
   surcharge/parameter option buttons generated by Konfigurator/konfigurator7.js,
   plus a new look for the product gallery (main image + thumbnails), using the
   same forest/oak/cream/beige palette as prqno-category.css and header_v3/footer_v3.
   konfigurator7.js itself is unchanged — it only sets a handful of inline
   width/height/margin styles on thumbnails, which this file overrides with
   !important where a different look is wanted (border-radius, shadow, border). */

body.type-detail{font-family:Montserrat,Arial,sans-serif}

/* ===== PRODUCT GALLERY: main image =====
   Background stays plain white (per feedback) — just padding + rounding
   so the photo isn't edge-to-edge with no breathing room. */
body.type-detail .p-image-wrapper{
  background:#fff!important;
  border-radius:20px!important;
  overflow:hidden!important;
  padding:16px!important;
}
body.type-detail .p-image{
  border-radius:14px!important;
  overflow:hidden!important;
}
body.type-detail .p-image img{
  border-radius:14px!important;
}

/* ===== PRODUCT GALLERY: thumbnails =====
   Same white background + real padding, so the row breathes instead of
   sitting edge-to-edge with the gaps reading as stray white stripes. */
body.type-detail .p-thumbnails-wrapper{
  background:#fff!important;
  padding:0 16px 16px!important;
}
body.type-detail .p-thumbnails-inner{
  gap:12px!important;
}
body.type-detail .p-thumbnail,
body.type-detail .p-thumbnails-inner a.p-thumbnail{
  border-radius:10px!important;
  overflow:hidden!important;
  border:1px solid #e8e4dc!important;
  background:#fff!important;
  transition:border-color .18s,box-shadow .18s,transform .18s!important;
}
body.type-detail .p-thumbnail img{
  border-radius:9px!important;
}
body.type-detail .p-thumbnails-inner a.p-thumbnail:hover{
  border-color:#DCD7C9!important;
  box-shadow:0 6px 16px rgba(44,57,48,.12)!important;
  transform:translateY(-2px)!important;
}
body.type-detail .p-thumbnails-inner a.p-thumbnail.highlighted,
body.type-detail .p-thumbnail.highlighted{
  border-color:#c1894a!important;
  box-shadow:0 0 0 1px #c1894a!important;
}

/* Lupa (Cloud Zoom) na hlavní fotce — dřív se ukazovala při najetí myší
   a přes tu vznikaly bílé pruhy/artefakty. Skryté natvrdo, takže se
   zvětšenina už při hoveru neobjeví; klik na fotku pořád vede na
   plnou velikost (je to normální <a href>). */
body.type-detail .cloud-zoom-lens,
body.type-detail .cloud-zoom-big,
body.type-detail .cloud-zoom-loading{
  display:none!important;
}

/* ===== POPIS (tabs widget z product-description.js i z Visual/product_details_new.js) =====
   Oba skripty mají natvrdo border-radius:0!important ("no rounded
   corners") a taby stylované jako obyčejné šedé obdélníky. Přebíjíme
   vším potřebným (proměnná --radius i přímo border-radius), vyšší
   specificitou + !important, ať vyhraje bez ohledu na pořadí načtení. */
body.type-detail #description .basic-description .prqno-desc{
  --radius:14px!important;
}

/* product_details_new.js (.prqnoPD*) */
body.type-detail .prqnoPDTab{
  border-radius:8px!important;
  border-color:#DCD7C9!important;
  background:#fff!important;
  color:#2c3930!important;
  font-weight:600!important;
  transition:background .18s,border-color .18s,color .18s!important;
}
body.type-detail .prqnoPDTab:hover{
  background:#faf8f3!important;
  border-color:#c1894a!important;
}
body.type-detail .prqnoPDTab.isActive{
  background:#2c3930!important;
  border-color:#2c3930!important;
  color:#fff!important;
}
body.type-detail .prqnoPDPanel img,
body.type-detail .prqnoPDMediaText img,
body.type-detail .prqnoPDGalleryItem img{
  border-radius:10px!important;
}
body.type-detail .prqnoPDGalleryItem{
  border-radius:10px!important;
  border-color:#e8e4dc!important;
}
body.type-detail .prqnoLightboxImg{
  border-radius:12px!important;
}

/* ===== SURCHARGE / PARAMETER INLINE OPTION BUTTONS (built by konfigurator7.js) ===== */
.custom-inline-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.custom-option-btn {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: Montserrat, Arial, sans-serif;
    color: #2c3930;
    border: 1px solid #DCD7C9;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}

.custom-option-btn:hover {
    border-color: #c1894a;
    background: #faf8f3;
}

.custom-option-btn.active {
    background: #2c3930;
    color: #fff;
    border-color: #2c3930;
}

.custom-price-info {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2c3930;
}

@media (max-width: 767px) {
  body.type-detail .p-image-wrapper,
  body.type-detail .p-image,
  body.type-detail .p-image img{
    border-radius:14px!important;
  }
}