/* =============================================================================
   Product page: gallery + buy box, tabs, highlights, specs, lightbox, mobile buy bar.
   ============================================================================= */

.dmh-pdp-page { padding-bottom: var(--dmh-section); }
.dmh-pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 14px; }

/* ---------- Gallery ---------- */
.dmh-pdp__gallery { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-self: start; }
.dmh-pdp__gallery:not(:has(.dmh-pdp__thumbs)) { grid-template-columns: 1fr; }
.dmh-pdp__thumbs { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; scrollbar-width: none; }
.dmh-pdp__thumbs::-webkit-scrollbar { display: none; }
.dmh-pdp__thumb { flex: none; width: 84px; height: 84px; padding: 6px; border: 1px solid var(--dmh-line); border-radius: 10px 3px 10px 3px; background: var(--dmh-stage); cursor: pointer; transition: border-color var(--dmh-dur); }
.dmh-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dmh-pdp__thumb:hover { border-color: var(--dmh-line-strong); }
.dmh-pdp__thumb[aria-current="true"] { border-color: var(--dmh-gold-500); box-shadow: 0 0 0 2px rgb(201 162 74 / 0.3); }

.dmh-pdp__stage { position: relative; isolation: isolate; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf); background: var(--dmh-stage); overflow: hidden; }
.dmh-pdp__stage::before { /* category glow behind the product */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 40% at 50% 56%, color-mix(in srgb, var(--tile, var(--dmh-gold-500)) 20%, transparent), transparent 72%);
}
.dmh-pdp__stage .dmh-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.dmh-pdp__stage .dmh-slider__track::-webkit-scrollbar { display: none; }
.dmh-pdp__slide { flex: 0 0 100%; aspect-ratio: 1; margin: 0; overflow: hidden; scroll-snap-align: start; }
.dmh-pdp__slide img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; transition: transform 380ms var(--dmh-ease); }
.dmh-pdp__slide:first-child img { animation: dmh-pdp-settle 900ms var(--dmh-ease) backwards; } /* LCP: scale only, never faded */
@keyframes dmh-pdp-settle { from { transform: scale(0.94); } }
.dmh-pdp__slide.is-zoom img { transform: scale(1.9); } /* site.js moves transform-origin with the pointer */
.dmh-pdp__off { position: absolute; top: 14px; left: 14px; font-size: 0.85rem; padding: 5px 12px; }
.dmh-pdp__zoom {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-pill); background: rgb(255 255 255 / 0.9); color: var(--dmh-brand);
  font: 600 0.75rem var(--dmh-font); cursor: zoom-in; backdrop-filter: blur(4px);
}
.dmh-pdp__counter { position: absolute; left: 12px; bottom: 14px; padding: 3px 10px; border-radius: var(--dmh-radius-pill); background: rgb(8 17 39 / 0.65); color: var(--dmh-white); font-size: 0.72rem; }
.dmh-pdp__stage .dmh-slider__nav {
  position: absolute; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; padding: 0;
  border: 1px solid var(--dmh-line); border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--dmh-brand); cursor: pointer;
  opacity: 0; transition: opacity var(--dmh-dur);
}
.dmh-pdp__stage .dmh-slider__nav.is-prev { left: 10px; }
.dmh-pdp__stage .dmh-slider__nav.is-next { right: 10px; }
.dmh-pdp__stage:hover .dmh-slider__nav, .dmh-pdp__stage .dmh-slider__nav:focus-visible { opacity: 1; }

/* ---------- Buy box (boxed, thin rules — editorial) ---------- */
.dmh-pdp__info { min-width: 0; }
.dmh-pdp__box { position: sticky; top: calc(var(--dmh-header-h) + var(--dmh-adminbar) + 14px); display: grid; gap: 14px; padding: clamp(16px, 2.4vw, 26px); border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf); background: var(--dmh-white); }
.dmh-pdp__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: 0.7rem; font-weight: 700; letter-spacing: var(--dmh-tracking-label); text-transform: uppercase; }
.dmh-pdp__kicker a { color: var(--dmh-accent-text); text-decoration: none; }
.dmh-pdp__kicker span { color: var(--dmh-text-muted); }
.dmh-pdp__kicker a + span::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--dmh-gold-500); }
.dmh-pdp__title { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); font-weight: 700; line-height: 1.3; }
.dmh-pdp__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--dmh-text-muted); font-size: 0.8rem; }
.dmh-pdp__meta strong { color: var(--dmh-text); }
.dmh-pdp__meta .is-in { color: var(--dmh-success); font-weight: 600; }
.dmh-pdp__meta .is-in::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(8 122 61 / 0.18); }
.dmh-pdp__meta .is-out { color: var(--dmh-red-700); font-weight: 600; }

.dmh-pdp__pricebox { padding: 14px 16px; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-surface-alt); }
.dmh-price--lg .dmh-price__now { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.dmh-price--lg .dmh-price__old { font-size: 0.95rem; }
.dmh-price--lg .dmh-price__off { padding: 2px 8px; border-radius: var(--dmh-radius-pill); background: var(--dmh-hot-gradient); color: var(--dmh-white); font-size: 0.8rem; }
.dmh-pdp__save { margin: 4px 0 0; color: var(--dmh-red-700); font-size: 0.8rem; font-weight: 600; }

/* Headline specs: big values, small labels, hairline grid. */
.dmh-pdp__highs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-line); }
.dmh-pdp__highs > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 3px; padding: 12px 14px; background: var(--dmh-white); }
.dmh-pdp__highs dt { color: var(--dmh-text-muted); font-size: 0.7rem; line-height: 1.3; }
.dmh-pdp__highs dd { margin: 0; color: var(--dmh-navy-900); font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.js .dmh-pdp__highs > div { animation: dmh-stagger-in 600ms var(--dmh-ease) backwards; animation-delay: calc(240ms + var(--i, 0) * 80ms); }
.dmh-pdp__keyspecs ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dmh-pdp__keyspecs li { position: relative; padding-left: 20px; color: var(--dmh-text-muted); font-size: var(--dmh-text-sm); }
.dmh-pdp__keyspecs li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 2px 0 2px 0; background: var(--dmh-gold-gradient); }
.dmh-pdp__keyspecs strong { color: var(--dmh-text); }

.dmh-pdp__buy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.dmh-pdp__buynow { min-height: 56px; }
.dmh-pdp__addcart { grid-column: 1 / -1; }

.dmh-pdp__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dmh-pdp__call { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf-sm); color: var(--dmh-text); text-decoration: none; transition: border-color var(--dmh-dur); }
.dmh-pdp__call:hover { border-color: var(--dmh-gold-500); }
.dmh-pdp__call .dmh-icon { width: 22px; height: 22px; color: var(--dmh-accent-text); }
.dmh-pdp__call span { display: flex; flex-direction: column; line-height: 1.25; }
.dmh-pdp__call small { color: var(--dmh-text-muted); font-size: 0.7rem; }
.dmh-pdp__call strong { color: var(--dmh-brand); font-size: 0.95rem; }
.dmh-pdp__zalo { grid-column: 1 / -1; }

.dmh-pdp__promises { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--dmh-line); list-style: none; }
.dmh-pdp__promises li { display: flex; align-items: center; gap: 8px; color: var(--dmh-text-muted); font-size: 0.78rem; }
.dmh-pdp__promises .dmh-icon { color: var(--dmh-accent-text); }

/* ---------- Tabs (anchors) ---------- */
.dmh-pdp__tabs {
  position: sticky; top: calc(var(--dmh-header-h) + var(--dmh-adminbar)); z-index: 20; margin: clamp(26px, 4vw, 44px) 0 18px;
  border-block: 1px solid var(--dmh-line); background: rgb(247 244 238 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dmh-pdp__tabs ul { display: flex; gap: clamp(4px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.dmh-pdp__tabs li { flex: none; }
.dmh-pdp__tabs a {
  position: relative; display: block; padding: 15px 4px; color: var(--dmh-text-muted); font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--dmh-tracking-label); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color var(--dmh-dur);
}
.dmh-pdp__tabs a::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--dmh-gold-gradient); transform: scaleX(0); transform-origin: left center; transition: transform 320ms var(--dmh-ease); }
.dmh-pdp__tabs a:hover, .dmh-pdp__tabs a[aria-current="true"] { color: var(--dmh-navy-950); }
.dmh-pdp__tabs a[aria-current="true"]::after { transform: none; }

/* ---------- Body: highlights + specs ---------- */
.dmh-pdp__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.dmh-pdp__h2 { position: relative; margin: 0 0 14px; padding-left: 12px; font-size: var(--dmh-text-h3); font-weight: 700; scroll-margin-top: calc(var(--dmh-header-h) + var(--dmh-adminbar) + 60px); }
.dmh-pdp__h2::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 4px; background: var(--tile, var(--dmh-gold-500)); }
.dmh-pdp__desc, .dmh-pdp__specs { padding: clamp(16px, 2.4vw, 26px); border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf); background: var(--dmh-white); scroll-margin-top: calc(var(--dmh-header-h) + var(--dmh-adminbar) + 60px); }
.dmh-pdp__desc-body { max-height: 720px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
.dmh-pdp__desc.is-open .dmh-pdp__desc-body { max-height: none; -webkit-mask-image: none; mask-image: none; }
.dmh-pdp__desc .dmh-btn { display: flex; margin: 14px auto 0; }
.dmh-pdp__desc-body img { display: block; margin-inline: auto; }
.dmh-pdp__specs { position: sticky; top: calc(var(--dmh-header-h) + var(--dmh-adminbar) + 70px); }
.dmh-specs { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.82rem; }
.dmh-specs th, .dmh-specs td { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--dmh-line); text-align: left; vertical-align: top; }
.dmh-specs th { width: 44%; padding-left: 0; color: var(--dmh-text-muted); font-weight: 400; }
.dmh-specs td { color: var(--dmh-text); font-weight: 600; }
.dmh-specs tr:last-child th, .dmh-specs tr:last-child td { border-bottom: 0; }

.dmh-pdp__posts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

/* ---------- Lightbox ---------- */
.dmh-lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--dmh-stage-solid); color: var(--dmh-text); }
.dmh-lightbox::backdrop { background: rgb(8 17 39 / 0.7); }
.dmh-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.dmh-lightbox__bar { display: flex; justify-content: space-between; padding: 16px clamp(12px, 3vw, 40px); }
.dmh-lightbox__zoom { display: flex; }
.dmh-lightbox__zoom button, .dmh-lightbox__close {
  display: grid; place-items: center; min-width: 56px; height: 46px; padding: 0 18px; border: 1px solid var(--dmh-ink-900); background: transparent; color: var(--dmh-ink-900);
  font: 600 0.75rem var(--dmh-font); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.dmh-lightbox__zoom button + button { border-left: 0; }
.dmh-lightbox__zoom button:hover, .dmh-lightbox__close:hover { background: var(--dmh-ink-900); color: var(--dmh-white); }
.dmh-lightbox__stage { overflow: auto; display: grid; place-items: center; padding: 0 clamp(12px, 3vw, 40px); }
.dmh-lightbox__stage img { width: min(100%, 900px); max-width: none; height: auto; mix-blend-mode: multiply; transition: width var(--dmh-dur) var(--dmh-ease); }
.dmh-lightbox__thumbs { display: flex; gap: 10px; padding: 14px clamp(12px, 3vw, 40px) 18px; overflow-x: auto; }
.dmh-lightbox__thumbs button { flex: none; width: 96px; height: 64px; padding: 4px; border: 1px solid var(--dmh-line); background: var(--dmh-white); cursor: pointer; }
.dmh-lightbox__thumbs button[aria-current="true"] { border-color: var(--dmh-ink-900); }
.dmh-lightbox__thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Buy bar: always on phones; on desktop it rises once the price box scrolls away (site.js) ---------- */
.dmh-pdp__sticky { display: none; }
@media (min-width: 1024px) {
  .dmh-pdp__sticky {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--dmh-z-fab); display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 46px 46px auto;
    align-items: center; gap: 14px; padding: 10px var(--dmh-gutter); border-top: 1px solid var(--dmh-line);
    background: rgb(255 255 255 / 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -18px 40px -26px rgb(8 17 39 / 0.45);
    visibility: hidden; transform: translateY(105%); transition: transform 380ms var(--dmh-ease), visibility 380ms;
  }
  .dmh-pdp__sticky.is-on { visibility: visible; transform: none; }
  .dmh-pdp__sticky-thumb { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-stage); }
  .dmh-pdp__sticky-thumb img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
  .dmh-pdp__sticky-name { margin: 0; overflow: hidden; font-size: 0.92rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
  .dmh-pdp__sticky .dmh-price__now { font-size: 1.15rem; }
  .dmh-pdp__sticky-zalo, .dmh-pdp__sticky-call { display: grid; place-items: center; height: 46px; border-radius: 12px 3px 12px 3px; color: var(--dmh-white); }
  .dmh-pdp__sticky-zalo { background: var(--dmh-zalo); }
  .dmh-pdp__sticky-call { background: var(--dmh-navy-800); }
  .dmh-pdp__sticky .dmh-btn { min-height: 46px; padding-inline: 26px; }
  .dmh-fab { transition: transform 380ms var(--dmh-ease); }
  body.dmh-buybar-on .dmh-fab { transform: translateY(-72px); }
}

@media (max-width: 1199px) {
  .dmh-pdp__posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .dmh-pdp { grid-template-columns: 1fr; }
  .dmh-pdp__gallery { grid-template-columns: 1fr; }
  .dmh-pdp__thumbs { order: 2; flex-direction: row; max-height: none; overflow-x: auto; }
  .dmh-pdp__thumb { width: 64px; height: 64px; }
  .dmh-pdp__box { position: static; }
  .dmh-pdp__body { grid-template-columns: 1fr; }
  .dmh-pdp__specs { position: static; }
  body.single-product .dmh-bottombar { display: none; }
  .dmh-pdp__sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--dmh-z-fab); display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px auto; align-items: center; gap: 8px;
    padding: 8px var(--dmh-gutter) calc(8px + env(safe-area-inset-bottom)); background: var(--dmh-white); box-shadow: 0 -10px 30px -14px rgb(8 17 39 / 0.35);
  }
  .dmh-pdp__sticky .dmh-price__now { font-size: 1.05rem; }
  .dmh-pdp__sticky .dmh-price__old, .dmh-pdp__sticky .dmh-price__off { font-size: 0.7rem; }
  .dmh-pdp__sticky-zalo, .dmh-pdp__sticky-call { display: grid; place-items: center; height: 46px; border-radius: 12px 3px 12px 3px; color: var(--dmh-white); }
  .dmh-pdp__sticky-zalo { background: var(--dmh-zalo); }
  .dmh-pdp__sticky-call { background: var(--dmh-navy-800); }
  .dmh-pdp__sticky .dmh-btn { min-height: 46px; padding-inline: 18px; }
  .dmh-pdp__sticky-thumb, .dmh-pdp__sticky-name { display: none; }
  body.single-product.dmh { padding-bottom: 66px; }
}
@media (max-width: 767px) {
  .dmh-pdp__contact, .dmh-pdp__promises { grid-template-columns: 1fr; }
  .dmh-pdp__posts-grid { grid-template-columns: 1fr; }
  .dmh-pdp__tabs a { padding: 12px 14px; }
}

/* ---------- Reviews / Q&A (template-parts/reviews.php) ---------- */
.dmh-reviews { scroll-margin-top: calc(var(--dmh-header-h) + var(--dmh-adminbar) + 60px); }
.dmh-reviews__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.dmh-reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-white); }
.dmh-reviews__score { margin: 0; color: var(--dmh-text-muted); }
.dmh-reviews__score strong { color: var(--dmh-text); font-size: 2rem; line-height: 1; }
.dmh-reviews__count, .dmh-reviews__empty { margin: 0; color: var(--dmh-text-muted); font-size: var(--dmh-text-sm); }
.dmh-reviews__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dmh-review { padding: 14px 16px; border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf-sm); background: var(--dmh-white); }
.dmh-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; font-size: 0.9rem; }
.dmh-review__head time { color: var(--dmh-text-muted); font-size: 0.78rem; }
.dmh-review__text { font-size: var(--dmh-text-sm); }
.dmh-review__text p { margin: 6px 0 0; }
.dmh-review__reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--dmh-gold-500); border-radius: 0 8px 8px 0; background: var(--dmh-surface-alt); }
.dmh-reviews__formwrap { padding: clamp(16px, 2.4vw, 24px); border: 1px solid var(--dmh-line); border-radius: var(--dmh-radius-leaf); background: var(--dmh-white); }
.dmh-reviewform__title { margin: 0; font-size: var(--dmh-text-h3); }
.dmh-pdp__rating { display: inline-flex; align-items: center; gap: 6px; color: var(--dmh-text-muted); text-decoration: none; }

/* Rating input: radios in reverse DOM order so "checked ~ label" fills the lower stars. */
.dmh-rate { margin: 0; padding: 0; border: 0; }
.dmh-rate legend { margin-bottom: 4px; padding: 0; font-size: 0.8rem; font-weight: 600; }
.dmh-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.dmh-rate__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dmh-rate__stars label {
  width: 34px; height: 34px; background: var(--dmh-line-strong); cursor: pointer;
  -webkit-mask: var(--dmh-star-mask) center / 28px 28px no-repeat; mask: var(--dmh-star-mask) center / 28px 28px no-repeat;
}
.dmh-rate__stars input:checked ~ label, .dmh-rate__stars label:hover, .dmh-rate__stars label:hover ~ label { background: var(--dmh-gold-500); }
.dmh-rate__stars input:focus-visible + label { outline: 2px solid var(--dmh-focus); outline-offset: 2px; }

@media (max-width: 1023px) {
  .dmh-reviews__grid { grid-template-columns: 1fr; }
}