/* ---------- Themeable variables ---------- */
:root {
  --dh-gap: 14px;
  --dh-tile-mobile: 180px; /* Mobile tile width */
  --dh-tile-tablet: 220px; /* Tablet tile width */
  --dh-tile-desktop: 220px; /* Desktop tile width */
  --dh-radius: 14px;
  --dh-shadow: 0 6px 18px rgba(0,0,0,.08);
  --dh-border: 1px solid #e9e9e9;
}

/* ---------- Title & layout ---------- */
.dh-product .entry-title {
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.2;
}
.dh-product .cat-links {
  display:block;
  text-align:center;
  color:#666;
  margin-bottom: 12px;
}
.dh-price {
  text-align: center;
  font-size: 1.05rem;
  margin: 0 0 10px;
}

/* Featured image centered */
.dh-featured {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}
.dh-featured img {
  border-radius: var(--dh-radius);
  box-shadow: var(--dh-shadow);
  border: var(--dh-border);
  max-width: 95%;
  height: auto;
}

/* ---------- Centered responsive gallery ---------- */
/* Use fixed-size tiles to keep images pleasantly small and consistent,
   while still enforcing Desktop=4, Tablet=3, Mobile=2 columns. */
.dh-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--dh-tile-mobile)); /* Mobile: 2 columns */
  justify-content: center; /* Center the grid block */
  gap: var(--dh-gap);
  margin: 12px auto 0;
  width: 100%;
}
@media (min-width: 640px) { /* Tablet */
  .dh-gallery-grid {
    grid-template-columns: repeat(3, var(--dh-tile-tablet)); /* Tablet: 3 columns */
  }
}
@media (min-width: 1024px) { /* Desktop */
  .dh-gallery-grid {
    grid-template-columns: repeat(4, var(--dh-tile-desktop)); /* Desktop: 4 columns */
  }
}
.dh-gallery-item {
  display:block;
  border-radius: var(--dh-radius);
  overflow: hidden;
  box-shadow: var(--dh-shadow);
  border: var(--dh-border);
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fff;
}
.dh-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.dh-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Lightbox ---------- */
.dh-lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.dh-lightbox-overlay.active { display: flex; }
.dh-lightbox-content { position: relative; max-width: 95vw; max-height: 90vh; }
.dh-lightbox-img { max-width: 95vw; max-height: 90vh; display:block; border-radius: 8px; }

.dh-lightbox-close,
.dh-lightbox-prev,
.dh-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.dh-lightbox-close {
  top: 10px; right: 10px; transform: none;
  border-radius: 6px; background: rgba(255,255,255,0.2);
}
.dh-lightbox-prev { left: -60px; border-radius: 6px; }
.dh-lightbox-next { right: -60px; border-radius: 6px; }
@media (max-width: 640px) {
  .dh-lightbox-prev { left: 10px; }
  .dh-lightbox-next { right: 10px; }
}


/* ---------- Center the whole product area & add bottom spacing ---------- */
.dh-product {
  display: flex;
  flex-direction: column;
  align-items: center;        /* Center everything horizontally */
  margin-bottom: 40px;        /* Extra space overall */
}
.dh-product .entry-header,
.dh-product .entry-content {
  width: 100%;
  max-width: 980px;           /* keep text line-length pleasant */
  margin-left: auto;
  margin-right: auto;
}
.dh-product .entry-title { margin-top: 6px; margin-bottom: 14px; }
.dh-page-spacer { height: 80px; } /* space before footer */