/* E-hely product detail (loaded after site.css). */

/* ---------- Top: gallery + info ---------- */
.hx-pd{padding:clamp(16px,2vw,24px) 0 clamp(48px,6vw,80px)}
.hx-crumbs-current{max-width:min(48ch,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-pd-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start;margin-top:clamp(8px,1.4vw,16px)}
.hx-pd-gallery{position:sticky;top:104px}
.hx-pd-media{position:relative;aspect-ratio:1/1;background:var(--soft);border-radius:calc(var(--radius) + 4px);display:grid;place-items:center;padding:clamp(24px,6%,64px);overflow:hidden}
.hx-pd-media img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hx-pd-media.is-placeholder img{width:55%;height:55%;opacity:.22;filter:grayscale(1)}
.hx-pd-media figcaption{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:13px;color:var(--gray);background:#fff;padding:6px 14px;border-radius:999px;white-space:nowrap}

.hx-pd-info{padding-top:clamp(0px,1vw,8px)}
.hx-pd-cat{display:inline-block;font-size:13px;font-weight:500;color:var(--gray);transition:color .2s}
.hx-pd-cat:hover{color:var(--ink)}
.hx-pd-info h1{font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.03em;margin-top:10px}
.hx-pd-status{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:500;color:var(--ink);background:var(--soft);padding:7px 14px;border-radius:999px}
.hx-pd-dot{width:7px;height:7px;border-radius:50%;background:#25d366;box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.hx-pd-lead{margin-top:20px;color:var(--gray);font-size:16px;max-width:560px}

.hx-pd-meta{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px;margin-top:26px;padding:18px 0;border-block:1px solid var(--line)}
.hx-pd-meta dt{font-size:12px;color:var(--gray);margin-bottom:2px}
.hx-pd-meta dd{font-size:15px;font-weight:500;color:var(--ink);word-break:break-word}
.hx-pd-meta a{border-bottom:1px solid var(--line);transition:border-color .2s}.hx-pd-meta a:hover{border-color:var(--ink)}

.hx-pd-variant{margin-top:24px}
.hx-pd-variant label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:8px}
.hx-pd-select{position:relative}
.hx-pd-select select{width:100%;height:48px;appearance:none;-webkit-appearance:none;border:1px solid #d4d4d3;border-radius:12px;background:#fff;padding:0 44px 0 16px;font:400 15px var(--body);color:var(--ink);cursor:pointer;transition:border-color .2s}
.hx-pd-select select:hover,.hx-pd-select select:focus{border-color:var(--ink);outline:0}
.hx-pd-select .ui-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--gray)}
.hx-pd-variant p{font-size:13px;color:var(--gray);margin-top:8px}

.hx-pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hx-pd-actions .hx-btn{height:52px;padding:0 26px}
.hx-btn-wa{background:#25d366;color:#fff}.hx-btn-wa:hover{background:#1ebe5b}
.hx-btn-wa .ui-icon{font-size:1.15em}

.hx-pd-perks{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hx-pd-perks li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:14px}
.hx-pd-perk-icon{flex:none;width:36px;height:36px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--ink);font-size:15px}
.hx-pd-perks b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.hx-pd-perks span{font-size:13px;color:var(--gray);line-height:1.45}
.hx-pd-note{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:13px;line-height:1.55;color:var(--gray)}
.hx-pd-note .ui-icon{margin-top:4px}

/* ---------- Description ---------- */
.hx-pd-details{border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) 0}
.hx-pd-details-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);align-items:start}
.hx-pd-details h2{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em;line-height:1.15}
.hx-pd-copy{max-width:760px;color:var(--text);font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.hx-pd-copy p+p{margin-top:16px}

/* ---------- Related ---------- */
.hx-pd-related{background:var(--soft);padding:clamp(56px,7vw,96px) 0}
.hx-pd-related .hx-head h2{font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em}

@media (max-width:900px){
  .hx-pd-layout{grid-template-columns:1fr}
  .hx-pd-gallery{position:static}
  .hx-pd-details-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hx-pd-meta{grid-template-columns:1fr 1fr}
  .hx-pd-perks{grid-template-columns:1fr}
  .hx-pd-actions .hx-btn{flex:1 1 100%}
}