/* ==========================================================================
   Produktová (SEO) podstránka – spoločné štýly pre všetky produkty
   nadväzuje na realizacie.css (hero .rh, .rp__kota, .rp__cta, .kontakt2)
   ========================================================================== */

/* hero – tlačidlá */
.ph { min-height: clamp(600px, 82vh, 800px); padding-bottom: clamp(56px, 7vw, 96px); }
.ph__akcie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.ph__akcie .rp__cta svg { width: 18px; height: 18px; }
.ph__line { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid var(--gold); transition: gap .3s, color .3s; }
.ph__line svg { width: 16px; height: 16px; }
.ph__line:hover { gap: 14px; color: var(--gold); }
.ph .rh__fakty { margin-top: clamp(36px, 4vw, 54px); }

/* sekcie */
.psek { position: relative; padding: clamp(80px, 9vw, 130px) 0; }
.psek--tma { background: var(--tma, #16120F); color: rgba(243, 237, 227, .72); z-index: 1;
  margin-block: calc(-1 * var(--sikma, 48px)); padding-block: calc(clamp(80px, 9vw, 130px) + var(--sikma, 48px));
  clip-path: polygon(0 var(--sikma, 48px), 100% 0, 100% calc(100% - var(--sikma, 48px)), 0 100%); }
.psek--tma .rp__kota { color: var(--gold); }
.p-h { margin: 14px 0 0; font-family: var(--f-cond); font-weight: 600; font-size: clamp(40px, 4.2vw, 64px); line-height: .96; text-transform: uppercase; color: var(--ink); }
.p-h em { display: block; font-style: normal; color: var(--gold-2); }
.psek--tma .p-h { color: #fff; }
.psek--tma .p-h em { color: var(--gold); }
.phlava { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 60px; margin-bottom: clamp(36px, 4.4vw, 60px); }
.phlava > p { margin: 0; max-width: 32em; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.psek--tma .phlava > p { color: rgba(243, 237, 227, .7); }
.ph__line--svetla { color: #fff; }

/* úvod */
.puvod__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.puvod p { margin: 18px 0 0; max-width: 36em; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.puvod .p-h { margin-bottom: 8px; }
.puvod__body { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(27, 23, 20, .14); }
.puvod__body li { position: relative; padding-left: 28px; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.puvod__body li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--gold-2); }
.puvod__body li::after { content: ""; position: absolute; left: 5px; top: 6px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.puvod__foto { position: relative; margin: 0; padding: 0 22px 22px 0; }
.puvod__foto::before { content: ""; position: absolute; left: 22px; top: 22px; right: 0; bottom: 0; border: 1.5px solid var(--gold); border-radius: 6px; }
.puvod__foto img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 6px; box-shadow: 0 40px 70px -40px rgba(27, 23, 20, .55); }
.puvod__foto figcaption { position: absolute; left: 0; bottom: 22px; padding: 12px 18px; background: var(--tma, #16120F); color: #F3EDE3; border-radius: 0 6px 0 6px; font-size: 13.5px; font-weight: 500; }

/* tvary */
.ptvary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ptvar { position: relative; padding: 26px 24px 28px; border: 1px solid rgba(243, 237, 227, .1); border-radius: 8px; background: #1E1915; transition: border-color .35s, transform .35s; }
.ptvar:hover { border-color: rgba(217, 164, 65, .6); transform: translateY(-4px); }
.ptvar__plan { display: block; width: 100%; height: auto; margin-bottom: 22px; }
.ptvar__miestnost { fill: none; stroke: rgba(243, 237, 227, .22); stroke-width: 1.5; stroke-dasharray: 5 5; }
.ptvar__linka > * { fill: var(--gold); transition: fill .35s; }
.ptvar:hover .ptvar__linka > * { fill: #F0C26A; }
.ptvar__cislo { position: absolute; right: 22px; top: 18px; font-family: var(--f-cond); font-weight: 600; font-size: 15px; letter-spacing: .1em; color: rgba(243, 237, 227, .35); }
.ptvar h3 { margin: 0 0 8px; font-family: var(--f-cond); font-weight: 600; font-size: 24px; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.ptvar p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(243, 237, 227, .65); }

/* materiály */
.pmaty { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pmat { position: relative; padding: 28px 26px; border-radius: 8px; background: #fff; box-shadow: 0 24px 50px -40px rgba(22, 18, 15, .5); overflow: hidden; transition: transform .35s, box-shadow .35s; }
.pmat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(.25); transform-origin: top; transition: transform .45s; }
.pmat:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(22, 18, 15, .55); }
.pmat:hover::before { transform: scaleY(1); }
.pmat__vyrobca { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.pmat h3 { margin: 8px 0 8px; font-family: var(--f-cond); font-weight: 600; font-size: 26px; text-transform: uppercase; color: var(--ink); }
.pmat p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* realizácie */
.preals { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.preal { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 8px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.preal img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease, ease); }
.preal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(22, 18, 15, .92)); }
.preal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease, ease); }
.preal:hover img { transform: scale(1.05); }
.preal:hover::after { transform: scaleX(1); }
.preal__in { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: clamp(22px, 2.6vw, 34px); }
.preal small { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.preal b { font-family: var(--f-cond); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; }
.preal span { font-size: 15px; color: rgba(243, 237, 227, .75); }
.preal .preal__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; color: #fff; }
.preal__link svg { width: 15px; height: 15px; color: var(--gold); transition: transform .3s; }
.preal:hover .preal__link svg { transform: translateX(4px); }

/* postup – zlatý zvinovací meter ako na úvodnej stránke */
.pkroky { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pkroky::before { content: ""; position: absolute; left: -2vw; right: -2vw; top: 26px; height: 30px; z-index: 0; border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, #2A2014 0 2px, transparent 2px 100px) 0 0 / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(42, 32, 20, .85) 0 1.5px, transparent 1.5px 20px) 0 0 / 100% 9px no-repeat,
    linear-gradient(180deg, #F2C14E, #D9A441 60%, #B98A2E);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8), inset 0 -3px 0 rgba(0, 0, 0, .18);
  transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease, ease); }
.pkroky:has(.is-in)::before { transform: none; }
.pkroky li { position: relative; display: flex; flex-direction: column; padding: 0 18px 0 0; }
.pkrok__c { position: relative; z-index: 1; display: grid; place-items: center; width: 82px; height: 82px; margin-bottom: 26px; border-radius: 50%;
  background: var(--tma, #16120F); border: 3px solid var(--gold); color: var(--gold); font-family: var(--f-cond); font-weight: 600; font-size: 38px; line-height: 1;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .9); }
.pkroky li:last-child .pkrok__c { background: var(--gold); color: var(--tma, #16120F); box-shadow: 0 0 0 8px rgba(217, 164, 65, .18), 0 16px 30px -12px rgba(0, 0, 0, .9); }
.pkroky h3 { margin: 0 0 10px; font-family: var(--f-cond); font-weight: 600; font-size: 24px; letter-spacing: .02em; text-transform: uppercase; color: #fff; line-height: 1.1; }
.pkroky p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(243, 237, 227, .7); }
.pkrok__tag { align-self: flex-start; margin-top: 14px; padding: 4px 12px; border: 1px solid rgba(217, 164, 65, .5); border-radius: 999px; font-family: var(--f-cond); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ph__line--tmava { color: var(--ink); }
.ph__line--tmava:hover { color: var(--gold-2); }

/* otázky */
.pfaq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pfaq__tel { margin: 20px 0 0; font-size: 16px; color: rgba(243, 237, 227, .7); }
.pfaq__tel a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--gold); }
.pfaq__zoznam { border-top: 1px solid rgba(243, 237, 227, .12); }
.pfaq__q { border-bottom: 1px solid rgba(243, 237, 227, .12); }
.pfaq__q summary { position: relative; list-style: none; cursor: pointer; padding: 24px 50px 24px 0; font-family: var(--f-cond); font-weight: 600; font-size: clamp(20px, 1.8vw, 25px); text-transform: uppercase; letter-spacing: .02em; color: #fff; transition: color .25s; }
.pfaq__q summary::-webkit-details-marker { display: none; }
.pfaq__q summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform .35s, margin .35s; }
.pfaq__q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pfaq__q summary:hover { color: var(--gold); }
.pfaq__q p { margin: 0; padding: 0 40px 26px 0; font-size: 16px; line-height: 1.7; color: rgba(243, 237, 227, .72); }

/* dopyt */
.pdopyt { padding-bottom: calc(clamp(80px, 9vw, 130px) + var(--sikma, 48px)); }
.pdopyt__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pdopyt__lead { margin: 18px 0 30px; max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.pdopyt .formular { border-radius: 8px; }
.pdopyt .formular__hlava h3 { font-family: var(--f-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 34px; }
.pdopyt .pole input, .pdopyt .pole select, .pdopyt .pole textarea { border-radius: 4px; }
.pdopyt .formular__pata .btn { --bg: var(--gold-2); --fg: #fff; border-radius: 4px; }

/* responzívne */
@media (max-width: 1100px) {
  .pkroky { grid-template-columns: 1fr; }
  .pkroky::before { left: 32px; right: auto; top: 0; bottom: 0; width: 18px; height: auto; transform: scaleY(0); transform-origin: top;
    background: repeating-linear-gradient(180deg, #2A2014 0 2px, transparent 2px 100px) 0 0 / 9px 100% no-repeat, linear-gradient(90deg, #F2C14E, #D9A441 60%, #B98A2E); }
  .pkroky:has(.is-in)::before { transform: none; }
  .pkroky li { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 20px; padding: 0 0 34px; }
  .pkroky li > *:not(.pkrok__c) { grid-column: 2; }
  .pkrok__c { grid-row: 1 / span 3; width: 82px; height: 82px; margin: 0; }
  .pkrok__tag { justify-self: start; }
  .ptvary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .puvod__in, .pfaq, .pdopyt__in { grid-template-columns: 1fr; }
  .pmaty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preals { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ptvary, .pmaty { grid-template-columns: 1fr; }
  .ptvar { display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; align-items: start; padding: 20px; }
  .ptvar__plan { grid-row: 1 / span 2; margin: 2px 0 0; }
  .ptvar h3 { font-size: 21px; }
  .puvod__body { grid-template-columns: 1fr; }
  .ph { min-height: 0; }
}

/* ---------- 3D konfigurátor v sekcii tvarov ---------- */
.pkonf { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(28px, 3vw, 40px); border-radius: 8px; border: 1px solid rgba(217, 164, 65, .35);
  scroll-margin-top: calc(var(--hl-main, 88px) + 16px); }
.pkonf__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease, ease); }
.pkonf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(22, 18, 15, .96) 0%, rgba(22, 18, 15, .86) 50%, rgba(22, 18, 15, .55) 100%); }
.pkonf:not(.is-on):hover .pkonf__bg { transform: scale(1.04); }
.pkonf__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; padding: clamp(30px, 4vw, 52px); }
.pkonf__h { margin: 12px 0 18px; font-family: var(--f-cond); font-weight: 600; font-size: clamp(30px, 3vw, 44px); line-height: 1; text-transform: uppercase; color: #fff; }
.pkonf__kroky { list-style: none; counter-reset: pk; margin: 0; padding: 0; display: grid; gap: 10px; }
.pkonf__kroky li { counter-increment: pk; display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: rgba(243, 237, 227, .85); }
.pkonf__kroky li::before { content: counter(pk); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(217, 164, 65, .6); font-family: var(--f-cond); font-weight: 600; font-size: 15px; color: var(--gold); }
.pkonf__akcie { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pkonf__spust { display: inline-flex; align-items: center; gap: 16px; height: 68px; padding: 0 30px 0 10px; border: 0; border-radius: 999px; background: var(--gold); color: var(--tma, #16120F);
  font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 20px 40px -18px rgba(217, 164, 65, .6); transition: transform .3s, box-shadow .3s; }
.pkonf__play { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tma, #16120F); color: var(--gold); }
.pkonf__play::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(22, 18, 15, .35); animation: pkonfPuls 2s ease-out infinite; }
@keyframes pkonfPuls { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.pkonf__play svg { width: 22px; height: 22px; }
.pkonf__spust:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -18px rgba(217, 164, 65, .75); }
/* po spustení */
.pkonf.is-on { border-color: rgba(243, 237, 227, .12); background: var(--svetla, #F3EDE3); }
.pkonf.is-on .pkonf__bg, .pkonf.is-on .pkonf__in, .pkonf.is-on::before { display: none; }
.pkonf__iframe { display: block; width: 100%; height: calc(100vh - 88px - 32px); height: calc(100dvh - 88px - 32px); min-height: 680px; border: 0; }
@media (max-width: 860px) { .pkonf__iframe { height: 900px; min-height: 0; } }
@media (max-width: 560px) { .pkonf__spust { height: 60px; font-size: 16px; padding-right: 22px; } .pkonf__play { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .pkonf__play::after { animation: none; } .pkroky::before { transition: none; transform: none; } }
.pkonf__h em { font-style: normal; color: var(--gold); }
/* pôdorysy/čelá skríň – obrys steny a čiary sa nevypĺňajú */
.ptvar__plan { color: rgba(243, 237, 227, .45); }
.ptvar__linka > [fill="none"] { fill: none !important; }

/* ---------- produkty bez fotiek ---------- */
/* hero: tmavé pozadie, letokruhy a veľká obrysová ikona */
.ph--bez { background: radial-gradient(90% 120% at 85% 40%, #2A2119 0%, var(--tma, #16120F) 60%); min-height: clamp(520px, 70vh, 680px); }
.ph--bez::before { display: none; }
.ph__kruhy { position: absolute; z-index: -1; right: -8%; top: 50%; width: min(820px, 70vw); aspect-ratio: 1; transform: translateY(-50%) rotate(-12deg);
  background: url("../img/deko/letokruhy.svg") center / contain no-repeat; filter: invert(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(.9); opacity: .1; }
.ph__ikona { position: absolute; z-index: -1; right: 12%; top: 50%; width: clamp(160px, 20vw, 300px); height: clamp(160px, 20vw, 300px); transform: translateY(-50%); color: var(--gold); opacity: .22; stroke-width: .6; }
.ph--bez .rh__fakty li { background: rgba(243, 237, 227, .04); }

/* karty typov s ikonou */
.ptvar__ikona { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 50%; border: 1px solid rgba(217, 164, 65, .45); color: var(--gold); transition: background .35s, color .35s; }
.ptvar__ikona svg { width: 30px; height: 30px; }
.ptvar--ikona:hover .ptvar__ikona { background: var(--gold); color: var(--tma, #16120F); }

/* úvod bez fotky – karta s výhodami */
.puvod__karta { position: relative; padding: clamp(28px, 3vw, 40px); border-radius: 8px; background: #fff; box-shadow: 0 40px 70px -45px rgba(22, 18, 15, .55); border-top: 3px solid var(--gold); }
.puvod__karta .puvod__body { grid-template-columns: 1fr; margin: 20px 0 28px; padding: 0; border: 0; gap: 16px; }

/* prečo s nami */
.ppreco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ppreco li { padding: 28px 24px; border-radius: 8px; background: #fff; box-shadow: 0 24px 50px -40px rgba(22, 18, 15, .5); }
.ppreco__ikona { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 50%; background: var(--tma, #16120F); color: var(--gold); }
.ppreco__ikona svg { width: 24px; height: 24px; }
.ppreco h3 { margin: 0 0 8px; font-family: var(--f-cond); font-weight: 600; font-size: 22px; text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.ppreco p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 1100px) { .ppreco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ppreco { grid-template-columns: 1fr; } .ph__ikona { right: -30px; top: 30%; opacity: .12; } .ph__kruhy { width: 120vw; right: -50%; } }
.ph__ikona { display: none; }