.pd-page { padding: 10px 0 30px; }
.pd-card { box-sizing:border-box; background:#fff; border-radius:10px; box-shadow:0 2px 14px rgba(0,0,0,.08); padding:24px; margin-bottom:24px; overflow:hidden; }
.pd-card *, .pd-card *::before, .pd-card *::after { box-sizing:border-box; }

/* Top card: stacked by default; gallery + info side by side when the card is wide enough */
.pd-top { container-type:inline-size; }
.pd-top-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
@container (min-width: 820px) {
  .pd-top-grid { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:28px; }
  .pd-info { align-self:start; }
}

/* ---------- Carousel ---------- */
.pd-carousel { position:relative; min-width:0; outline:none; -webkit-user-select:none; user-select:none; }
.pd-carousel .pd-viewport { position:relative; overflow:hidden; border-radius:10px; background:#eef0f2; aspect-ratio:3/2; max-height:480px; touch-action:pan-y; cursor:grab; }
.pd-carousel .pd-viewport:active { cursor:grabbing; }
.pd-carousel .pd-track { display:flex; height:100%; transition:transform .45s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.pd-carousel .pd-slide { flex:0 0 100%; min-width:0; height:100%; }
.pd-carousel .pd-slide a { display:block; height:100%; cursor:zoom-in; }
.pd-carousel .pd-slide img { display:block; width:100%; height:100%; object-fit:contain; -webkit-user-drag:none; }

.pd-carousel .pd-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; margin:0; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#222; box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:.9; transition:background .2s,color .2s,transform .2s,opacity .2s; -webkit-appearance:none; appearance:none; }
.pd-carousel .pd-nav:hover { background:#c0392b; color:#fff; opacity:1; transform:translateY(-50%) scale(1.08); }
.pd-carousel .pd-nav:focus-visible { outline:3px solid #c0392b; outline-offset:2px; }
.pd-carousel .pd-prev { left:12px; }
.pd-carousel .pd-next { right:12px; }
.pd-carousel .pd-nav svg { width:22px; height:22px; display:block; }

.pd-carousel .pd-counter, .pd-carousel .pd-enlarge { position:absolute; bottom:12px; z-index:3; background:rgba(0,0,0,.66); color:#fff; font-size:13px; line-height:1; padding:7px 12px; border-radius:20px; pointer-events:none; }
.pd-carousel .pd-counter { right:12px; }
.pd-carousel .pd-enlarge { left:12px; display:flex; align-items:center; gap:6px; }
.pd-carousel .pd-enlarge svg { width:14px; height:14px; }

.pd-carousel .pd-thumbstrip { position:relative; display:flex; gap:8px; overflow-x:auto; padding:10px 2px 6px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.pd-carousel .pd-thumb { flex:0 0 86px; height:62px; margin:0; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; background:#e6e8ea; cursor:pointer; opacity:.6; transition:opacity .2s,border-color .2s,transform .2s; -webkit-appearance:none; appearance:none; }
.pd-carousel .pd-thumb:hover { opacity:1; transform:translateY(-2px); }
.pd-carousel .pd-thumb.is-active { opacity:1; border-color:#c0392b; }
.pd-carousel .pd-thumb img { display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.pd-carousel.pd-single .pd-nav, .pd-carousel.pd-single .pd-counter, .pd-carousel.pd-single .pd-thumbstrip { display:none; }

/* ---------- Info panel ---------- */
.pd-info { min-width:0; }
.pd-info h1 { font-size:30px; line-height:1.2; margin:0 0 14px; color:#222; }
.pd-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; list-style:none; }
.pd-chips li { background:#f4f6f8; border:1px solid #e3e7ea; border-radius:20px; padding:6px 14px; font-size:14px; color:#333; margin:0; }
.pd-cta { display:flex; flex-wrap:wrap; gap:10px; }
.pd-btn { display:inline-block; text-align:center; padding:13px 24px; border-radius:6px; font-size:17px; font-weight:700; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.pd-btn:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.18); }
.pd-btn-primary { background:#c0392b; color:#fff; }
.pd-btn-wa { background:#25d366; color:#fff; }
.pd-btn img { height:18px; vertical-align:middle; margin-right:6px; }

/* ---------- Description + specs ---------- */
.pd-desc { overflow-wrap:anywhere; }
.pd-desc img { max-width:100%; height:auto; }
.pd-desc h2 { font-size:21px; color:#222; margin:22px 0 8px; padding-left:12px; border-left:4px solid #c0392b; line-height:1.3; }
.pd-desc h2:first-child { margin-top:0; }
.pd-desc p { font-size:15px; line-height:1.75; color:#555; margin:0 0 10px; }
.product-specifications ul { margin:0; padding:0; list-style:none; }
.product-specifications li { padding:11px 14px; border-bottom:1px solid #eee; }
.product-specifications li:nth-child(odd) { background:#fafafa; }
.product-specifications .specification-heading { display:inline-block; min-width:140px; font-weight:700; color:#222; }
.product_desc iframe { max-width:100%; }

@media (max-width: 768px) {
  .pd-card { padding:14px; }
  .pd-info h1 { font-size:24px; }
  .pd-carousel .pd-nav { width:36px; height:36px; }
  .pd-carousel .pd-nav svg { width:18px; height:18px; }
  .pd-carousel .pd-enlarge { display:none; }
  .pd-carousel .pd-thumb { flex-basis:68px; height:50px; }
}