/* ================================================================
   product-detail-new.css  —  Technofloor-style product detail UI
   All selectors scoped to .pdn-* so they don't clash with theme.
   ================================================================ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --pdn-blue:    #5b8fa8;
  --pdn-dark:    #111111;
  --pdn-darker:  #1a1a1a;
  --pdn-cream:   #EFEAE3;
  --pdn-muted:   rgba(0,0,0,0.45);
  --pdn-border:  rgba(0,0,0,0.12);
  --pdn-radius:  0;
}

/* ── Page wrapper ────────────────────────────────────────────────── */
.pdn-page {
  background: #fff;
  font-family: inherit;
}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.pdn-breadcrumb-bar {
  padding: 24px 24px 8px;
  /* push content below sticky header (~100px nav + ~40px top bar) */
  padding-top: 148px;
  max-width: 1400px;
  margin: 0 auto;
}
.pdn-breadcrumb-bar a,
.pdn-breadcrumb-bar span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pdn-muted);
  text-decoration: none;
}
.pdn-breadcrumb-bar a:hover { color: #111; }
.pdn-breadcrumb-bar .sep { margin: 0 6px; }

/* ── 2-column main wrap ──────────────────────────────────────────── */
.pdn-wrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}
@media (max-width: 1100px) {
  .pdn-wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ═══ GALLERY ═══════════════════════════════════════════════════════ */
.pdn-gallery { display: flex; gap: 12px; }

/* Vertical thumbs */
.pdn-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 88px;
  flex-shrink: 0;
  max-height: 700px;
  overflow-y: auto;
}
.pdn-thumb {
  width: 88px; height: 88px;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.55;
  transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
  position: relative;
}
.pdn-thumb:hover { opacity: 0.85; }
.pdn-thumb.active {
  opacity: 1;
  border-color: #111;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
}
.pdn-thumb img { width:100%; height:100%; object-fit:contain; display:block; background:#f5f5f5; }
.pdn-thumb .pdn-thumb-progress {
  position: absolute; bottom:0; left:0; right:0; height:2px;
  background:#111; transform:scaleX(0); transform-origin:left;
  transition:transform 4s linear;
}
.pdn-thumb.active.playing .pdn-thumb-progress { transform:scaleX(1); }

/* Main image */
.pdn-main-image {
  position: relative;
  flex: 1;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  height: auto;
  min-height: 400px;
  user-select: none;
}
.pdn-main-img {
  width:100%; height:auto;
  max-height: 700px;
  object-fit: contain;
  display: block;
  transition: opacity 0.4s ease, transform 0.3s ease-out;
  transform-origin: center;
}
.pdn-main-image .pdn-img-grad {
  display: none;
}
.pdn-img-counter {
  position: absolute; bottom:16px; left:16px;
  font-size:10px; letter-spacing:0.25em; font-weight:700;
  color:#fff; background:rgba(0,0,0,0.85);
  padding:6px 14px; backdrop-filter:blur(4px);
  pointer-events:none;
}
.pdn-zoom-hint {
  position:absolute; bottom:16px; right:16px;
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600;
  color:#fff; background:rgba(0,0,0,0.85);
  padding:6px 12px; backdrop-filter:blur(4px);
  opacity:0; transition:opacity 0.3s; pointer-events:none;
}
.pdn-main-image:hover .pdn-zoom-hint { opacity:1; }

/* Nav arrows */
.pdn-nav { 
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(4px);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:all 0.3s; z-index:2;
  font-size:18px; color:#111; font-weight:400; line-height:1;
}
.pdn-main-image:hover .pdn-nav { opacity:1; }
.pdn-nav.prev { left:12px; }
.pdn-nav.next { right:12px; }
.pdn-nav:hover { background:#111; color:#fff; }

/* Autoplay toggle */
.pdn-autoplay {
  position:absolute; top:12px; right:12px;
  width:40px; height:40px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(4px);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#111; z-index:2; transition:all 0.3s;
}
.pdn-autoplay:hover { background:#111; color:#fff; }

/* Mobile thumbs */
.pdn-mobile-thumbs {
  display:none; gap:8px; margin-top:12px;
  overflow-x:auto; padding-bottom:4px;
}
@media (max-width:768px) {
  .pdn-thumbs { display:none; }
  .pdn-mobile-thumbs { display:flex; }
  .pdn-mobile-thumbs .pdn-thumb { width:64px; height:64px; }
  .pdn-main-image { min-height:300px; }
}

/* ─── Performance highlights ─────────────────────────────────────── */
.pdn-performance {
  margin-top:32px;
  border:1px solid var(--pdn-border);
  background:rgba(0,0,0,0.02);
  padding:24px;
}
.pdn-perf-hdr {
  display:flex; align-items:center; gap:8px;
  margin-bottom:20px;
  font-size:11px; font-weight:700;
  letter-spacing:0.25em; text-transform:uppercase; color:#111;
}
.pdn-perf-hdr::before { content:'✦'; }
.pdn-perf-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pdn-perf-row { display:flex; justify-content:space-between; margin-bottom:6px; }
.pdn-perf-lbl { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--pdn-muted); }
.pdn-perf-val { font-size:10px; font-weight:700; color:#111; }
.pdn-perf-track { height:4px; background:#e0e0e0; overflow:hidden; }
.pdn-perf-fill {
  height:100%; background:var(--pdn-blue); width:0;
  transition:width 1.2s cubic-bezier(0.22,1,0.36,1);
}

/* ─── Feature cards ──────────────────────────────────────────────── */
.pdn-feature-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; margin-top:24px;
}
@media (max-width:768px) { .pdn-feature-grid { grid-template-columns:repeat(2,1fr); } }
.pdn-feature-card {
  border:1px solid var(--pdn-border); padding:16px;
  background:#fff; transition:all 0.3s;
}
.pdn-feature-card:hover {
  background:rgba(0,0,0,0.02); border-color:rgba(0,0,0,0.2);
}
.pdn-fc-icon { width:28px; height:28px; margin-bottom:10px; display:block; color:rgba(0,0,0,0.6); }
.pdn-fc-icon svg { width:100%; height:100%; }
.pdn-fc-title { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#111; }
.pdn-fc-sub { font-size:10px; color:var(--pdn-muted); margin-top:2px; }

/* ─── Export note ────────────────────────────────────────────────── */
.pdn-export-note {
  border-left:2px solid var(--pdn-blue);
  background:rgba(0,0,0,0.02);
  padding:24px 24px 24px 32px;
  margin-top:24px;
}
.pdn-export-note p { font-size:13px; line-height:1.85; color:rgba(0,0,0,0.85); margin:0; }
.pdn-export-badge { display:flex; align-items:center; gap:12px; margin-top:16px; }
.pdn-eb-icon {
  width:36px; height:36px;
  background:var(--pdn-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.pdn-eb-icon svg { width:20px; height:20px; }
.pdn-eb-title { font-size:11px; font-weight:700; color:#111; }
.pdn-eb-sub { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--pdn-muted); }

/* ═══ INFO COLUMN ════════════════════════════════════════════════════ */
.pdn-info {}

/* Badges row */
.pdn-badges-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pdn-badge {
  display:inline-block; padding:4px 12px;
  font-size:9px; letter-spacing:0.3em; text-transform:uppercase;
  font-weight:700; color:#fff; background:var(--pdn-blue);
}
.pdn-badge-stock {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700;
  background:hsl(145,40%,95%); color:hsl(145,40%,25%);
}
.pdn-badge-stock::before {
  content:''; display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:hsl(145,55%,40%);
  animation:pdn-pulse 2s infinite;
}
@keyframes pdn-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.pdn-title {
  font-size:26px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color:#111; line-height:1.1; margin:0 0 12px;
}

.pdn-sub-badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.pdn-sub-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  font-size:9px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700;
  background:rgba(91,143,168,0.1); color:var(--pdn-blue);
  border:1px solid rgba(91,143,168,0.3);
}
.pdn-sub-badge svg { width:12px; height:12px; flex-shrink:0; }

.pdn-desc { font-size:13px; color:var(--pdn-muted); line-height:1.85; margin-bottom:24px; }

/* Specs table */
.pdn-specs {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px 24px; padding:20px 0;
  border-top:1px solid var(--pdn-border);
  border-bottom:1px solid var(--pdn-border);
  margin-bottom:24px;
}
.pdn-spec { display:flex; justify-content:space-between; align-items:baseline; }
.pdn-spec-lbl { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--pdn-muted); }
.pdn-spec-val { font-size:14px; font-weight:600; color:#111; }

/* CTA buttons */
.pdn-ctas { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.pdn-btn-primary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; background:var(--pdn-blue); color:#fff;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700;
  text-decoration:none; border:none; cursor:pointer;
  transition:opacity 0.3s; width:100%; box-sizing:border-box;
}
.pdn-btn-primary:hover { opacity:0.9; color:#fff; }
.pdn-btn-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pdn-btn-secondary {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border:2px solid #111; color:#111;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase; font-weight:700;
  text-decoration:none; background:transparent; cursor:pointer;
  transition:all 0.3s; box-sizing:border-box;
}
.pdn-btn-secondary:hover { background:#111; color:#fff; }
.pdn-btn-outline {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border:1px solid var(--pdn-border); color:var(--pdn-muted);
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600;
  text-decoration:none; background:transparent; cursor:pointer;
  transition:all 0.3s; box-sizing:border-box;
}
.pdn-btn-outline:hover { color:#111; border-color:rgba(0,0,0,0.3); }

/* 360 button */
.pdn-btn-360 {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:12px;
  background:linear-gradient(to right,#5b8fa8,#4a7a91,#5b8fa8);
  color:#fff;
  font-size:11px; letter-spacing:0.25em; text-transform:uppercase; font-weight:700;
  text-decoration:none; margin-bottom:16px; transition:box-shadow 0.3s;
  position:relative; overflow:hidden; box-sizing:border-box;
}
.pdn-btn-360:hover { box-shadow:0 4px 20px rgba(91,143,168,0.4); color:#fff; }
.pdn-btn-360-icon { animation:pdn-spin 4s linear infinite; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.pdn-btn-360-icon svg { width:18px; height:18px; }
.pdn-btn-ico { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.pdn-btn-ico svg { width:15px; height:15px; }
@keyframes pdn-spin { to { transform:rotate(360deg); } }
.pdn-btn-small-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }

/* Applications */
.pdn-section-label {
  font-size:10px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--pdn-muted); margin-bottom:12px; display:block;
}
.pdn-app-grid, .pdn-suitable-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:24px;
}
.pdn-app-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--pdn-border); background:rgba(0,0,0,0.02);
  font-size:11px; font-weight:500; color:#111;
  transition:all 0.3s;
}
.pdn-app-item:hover { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.2); }
.pdn-app-icon { width:16px; height:16px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:rgba(0,0,0,0.5); }
.pdn-app-icon svg { width:16px; height:16px; }

/* Trust strip */
.pdn-trust {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  padding-top:20px; border-top:1px solid var(--pdn-border);
}
.pdn-trust-item {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:6px; padding:12px 8px; transition:background 0.3s;
}
.pdn-trust-item:hover { background:rgba(0,0,0,0.02); }
.pdn-trust-icon { width:28px; height:28px; color:var(--pdn-blue); display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.pdn-trust-icon svg { width:28px; height:28px; }
.pdn-trust-name { font-size:11px; font-weight:700; color:#111; line-height:1.2; }
.pdn-trust-sub { font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--pdn-muted); }

/* ═══ VARIANTS SECTION ═══════════════════════════════════════════════ */
.pdn-variants-section {
  background:var(--pdn-cream);
  padding:72px 0;
}
.pdn-variants-inner { max-width:1400px; margin:0 auto; padding:0 24px; }
.pdn-variants-hdr { text-align:center; margin-bottom:48px; }
.pdn-eyebrow {
  display:block; font-size:10px; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--pdn-blue); margin-bottom:8px;
}
.pdn-heading {
  font-size:26px; font-weight:600; letter-spacing:-0.01em; color:#111; margin:0;
}
.pdn-variants-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(0,0,0,0.08);
}
@media (max-width:1024px) { .pdn-variants-grid { grid-template-columns:1fr; } }

/* ─── Sizes panel ────────────────────────────────────────────────── */
.pdn-sizes-panel, .pdn-surfaces-panel {
  background:#fff; padding:40px 32px;
  border-right:1px solid rgba(0,0,0,0.08);
  display:flex; flex-direction:column;
}
.pdn-sizes-panel:last-child, .pdn-surfaces-panel:last-child { border-right:none; }
.pdn-sizes-svg { width:100%; height:auto; max-width:380px; display:block; margin:0 auto; }
.pdn-svg-tile { cursor:pointer; transition:all 0.6s cubic-bezier(0.22,1,0.36,1); }
.pdn-svg-tile:hover rect, .pdn-svg-tile.active rect {}
.pdn-sizes-list {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:20px; justify-content:center;
}
.pdn-size-btn {
  padding:8px 14px;
  border:1px solid var(--pdn-border); background:#fff;
  font-size:10px; font-weight:600; cursor:pointer;
  transition:all 0.3s; color:var(--pdn-muted);
}
.pdn-size-btn.active, .pdn-size-btn:hover {
  border-color:var(--pdn-blue); color:var(--pdn-blue);
  background:rgba(91,143,168,0.08);
}
.pdn-sizes-foot {
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--pdn-muted); text-align:center; margin-top:12px;
}

/* ─── Colours panel ──────────────────────────────────────────────── */
.pdn-colours-panel {
  padding:40px 32px;
  display:flex; flex-direction:column; align-items:center;
  transition:background-color 0.9s cubic-bezier(0.22,1,0.36,1);
  background:#EFEAE3;
  border-right:1px solid rgba(0,0,0,0.08);
}
.pdn-colour-stage {
  position:relative; width:100%; height:360px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px;
}
.pdn-colour-card {
  position:absolute; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  cursor:pointer;
  transition:all 1.1s cubic-bezier(0.22,1,0.36,1);
}
.pdn-colour-card img { width:100%; height:100%; object-fit:cover; display:block; }
.pdn-swatches { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.pdn-swatch-btn {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer; padding:0;
}
.pdn-swatch {
  width:44px; height:44px; border-radius:50%;
  border:2px solid transparent;
  transition:all 0.3s;
  background-size:cover; background-position:center;
  background-color:#ccc;
}
.pdn-swatch.active {
  border-color:var(--pdn-blue);
  transform:scale(1.1);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.pdn-swatch-lbl {
  font-size:9px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500;
  color:rgba(0,0,0,0.4); transition:color 0.3s;
}
.pdn-swatch-btn.active .pdn-swatch-lbl,
.pdn-swatch-btn:hover .pdn-swatch-lbl { color:var(--pdn-blue); }

/* ─── Surfaces panel ─────────────────────────────────────────────── */
.pdn-surfaces-panel { border-right:none; }
.pdn-surface-item {
  display:flex; align-items:center; gap:20px;
  padding:14px 18px;
  border:1px solid rgba(0,0,0,0.12); margin-bottom:10px;
  cursor:pointer; transition:all 0.7s;
  position:relative; overflow:hidden;
}
.pdn-surface-item.active { border-color:#111; background:#111; }
.pdn-surface-accent {
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:transparent; transition:background 0.4s;
}
.pdn-surface-item.active .pdn-surface-accent { background:#fff; }
.pdn-surface-icon-wrap {
  width:56px; height:56px; flex-shrink:0; border-radius:2px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.04); transition:background 0.7s;
}
.pdn-surface-item.active .pdn-surface-icon-wrap { background:rgba(255,255,255,0.08); }
.pdn-surface-icon-wrap svg { width:36px; height:36px; }
.pdn-surface-name {
  font-size:11px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase;
  color:#111; transition:color 0.7s;
}
.pdn-surface-item.active .pdn-surface-name { color:#fff; }
.pdn-surface-desc {
  font-size:10px; line-height:1.6; margin-top:4px;
  color:rgba(255,255,255,0.55);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height 0.4s, opacity 0.4s;
}
.pdn-surface-item.active .pdn-surface-desc { max-height:80px; opacity:1; }
.pdn-surface-dots { display:flex; gap:8px; justify-content:center; margin-top:16px; }
.pdn-sdot {
  height:8px; border-radius:4px;
  background:rgba(0,0,0,0.2);
  transition:all 0.7s; cursor:pointer; border:none;
}
.pdn-sdot.active { background:var(--pdn-blue); width:24px; }
.pdn-sdot:not(.active) { width:8px; }

/* ═══ TOOLS SECTION (dark) ═══════════════════════════════════════════ */
.pdn-tools-section {
  background:#111;
  border-top:1px solid #222; border-bottom:1px solid #222;
  padding:56px 0;
}
.pdn-tools-inner { max-width:1400px; margin:0 auto; padding:0 24px; }
.pdn-tools-hdr { text-align:center; margin-bottom:40px; }
.pdn-tools-title { font-size:26px; font-weight:600; color:#fff; margin:8px 0 20px; }
.pdn-tools-divider { width:64px; height:1px; background:var(--pdn-blue); margin:0 auto; }
.pdn-tools-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:768px) { .pdn-tools-grid { grid-template-columns:1fr; } }

/* Cards */
.pdn-card {
  border:1px solid rgba(91,143,168,0.25); background:#1a1a1a;
  padding:20px; position:relative; overflow:hidden;
}
.pdn-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, transparent, var(--pdn-blue), transparent);
}
.pdn-card-hdr { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pdn-card-ico {
  width:32px; height:32px; background:var(--pdn-blue);
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
}
.pdn-card-ico svg { width:18px; height:18px; }
.pdn-card-title {
  font-size:11px; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:#fff;
}
.pdn-card-desc { font-size:11px; line-height:1.7; color:rgba(255,255,255,0.5); margin-bottom:16px; }
.pdn-card-desc strong { color:rgba(255,255,255,0.8); font-weight:600; }
.pdn-card-btns { display:flex; gap:8px; }
.pdn-cbtn-primary {
  flex:1; padding:10px;
  background:var(--pdn-blue); color:#fff;
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600;
  text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:opacity 0.3s; border:none; cursor:pointer;
}
.pdn-cbtn-primary:hover { opacity:0.9; color:#fff; }
.pdn-cbtn-secondary {
  flex:1; padding:10px;
  background:#2a2a2a; border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.7);
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600;
  text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all 0.3s; cursor:pointer;
}
.pdn-cbtn-secondary:hover { color:#fff; border-color:rgba(255,255,255,0.3); }

/* Calculator */
.pdn-calc-tabs { display:flex; border:1px solid rgba(255,255,255,0.12); margin-bottom:16px; }
.pdn-calc-tab {
  flex:1; padding:8px;
  font-size:10px; letter-spacing:0.15em; text-transform:uppercase; font-weight:600;
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,0.4); transition:all 0.3s;
}
.pdn-calc-tab.active { background:var(--pdn-blue); color:#fff; }
.pdn-calc-input-row { display:block; }
.pdn-calc-input {
  width:100%; padding:10px 12px;
  background:#111; border:1px solid rgba(255,255,255,0.12);
  color:#fff; font-size:14px; outline:none;
  box-sizing:border-box; transition:border-color 0.3s;
}
.pdn-calc-input:focus { border-color:var(--pdn-blue); }
.pdn-calc-input::placeholder { color:rgba(255,255,255,0.3); }
.pdn-calc-hint {
  font-size:10px; color:rgba(255,255,255,0.35);
  margin:8px 0 12px;
}
.pdn-calc-result {
  display:none; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px;
}
.pdn-calc-result.show { display:grid; }
.pdn-calc-cell {
  background:var(--pdn-blue); padding:12px 8px; text-align:center;
}
.pdn-calc-val { font-size:22px; font-weight:700; color:#fff; display:block; }
.pdn-calc-lbl { font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.6); display:block; margin-top:4px; }

/* ═══ RELATED ════════════════════════════════════════════════════════ */
.pdn-related {
  padding:64px 0;
  border-top:1px solid var(--pdn-border); background:#fff;
}
.pdn-related-inner { max-width:1400px; margin:0 auto; padding:0 24px; }
.pdn-related-title { font-size:20px; font-weight:600; color:#111; margin:0 0 40px; }
.pdn-related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:768px) { .pdn-related-grid { grid-template-columns:repeat(2,1fr); } }
.pdn-related-item { display:block; text-decoration:none; color:inherit; }
.pdn-related-img { aspect-ratio:3/4; overflow:hidden; background:#f0f0f0; }
.pdn-related-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.7s;
}
.pdn-related-item:hover .pdn-related-img img { transform:scale(1.05); }
.pdn-related-name { font-size:14px; font-weight:500; color:#111; margin:12px 0 4px; }
.pdn-related-meta { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--pdn-muted); }

/* ═══ LIGHTBOX ═══════════════════════════════════════════════════════ */
.pdn-lightbox {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.95); backdrop-filter:blur(8px);
  z-index:9999; display:none;
  align-items:center; justify-content:center;
}
.pdn-lightbox.open { display:flex; }
.pdn-lightbox-img { max-width:94vw; max-height:94vh; object-fit:contain; cursor:zoom-in; transition: transform 0.3s ease; }
.pdn-lb-close, .pdn-lb-prev, .pdn-lb-next {
  position:absolute; background:rgba(255,255,255,0.1);
  border:none; cursor:pointer; color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.3s;
}
.pdn-lb-close:hover, .pdn-lb-prev:hover, .pdn-lb-next:hover { background:rgba(255,255,255,0.2); }
.pdn-lb-close { top:24px; right:24px; width:40px; height:40px; }
.pdn-lb-prev { left:24px; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:24px; }
.pdn-lb-next { right:24px; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:24px; }

/* ═══ UTILITY ════════════════════════════════════════════════════════ */
.pdn-mt-0 { margin-top:0 !important; }
.pdn-separator { height:1px; background:var(--pdn-border); margin:20px 0; }

/* Override theme's max-width constraint for the full-width sections */
.pdn-page .pdn-variants-section,
.pdn-page .pdn-tools-section,
.pdn-page .pdn-related {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 0;
  padding-right: 0;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


/* Lightbox zoom-in on click */
.pdn-lightbox-img.zoomed {
  transform: scale(2);
  cursor: zoom-out;
}

/* ── Gap fix: collapse empty containers ────────────── */
.pdn-ctas:empty, .pdn-btn-small-row:empty,
.pdn-badges-row:empty, .pdn-sub-badges:empty { display: none; }

/* ── Right column: sticky scroll for short content ─── */
.pdn-info {
  position: sticky;
  top: 100px;
  align-self: flex-start;
}