:root{ --ohb-green:#2e7d32; --ohb-ink:#184d2a; --ohb-soft:#f7fbf8; --ohb-shadow:0 8px 24px rgba(0,0,0,.08); }
    .site-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
    .p-header{display:grid;grid-template-columns:340px 1fr;gap:20px}
    @media(max-width:860px){.p-header{grid-template-columns:1fr}}
    .p-img{position:relative;background:linear-gradient(180deg,#f3f7f5,#eef5f0);border-radius:14px;overflow:hidden;box-shadow:var(--ohb-shadow)}
    .p-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transform:scale(1);transition:.35s ease transform}
    .p-img:hover img{transform:scale(1.02)}
    .p-card{position:relative;background:#fff;border-radius:14px;box-shadow:var(--ohb-shadow);padding:18px;border:1px solid #eef2ef}
    .price{color:var(--ohb-green);font-weight:800}
    .price-row{display:flex;gap:10px;align-items:baseline}
    .price-old{color:#888;text-decoration:line-through}
    .muted{color:#555}
    .wish-top{position:absolute; right:14px; top:14px; z-index:3;background:#fff;border:none;border-radius:999px;width:40px;height:40px;display:grid;place-items:center;box-shadow:0 10px 18px rgba(0,0,0,.14);cursor:pointer;transition:.2s transform}
    .wish-top:active{transform:scale(.96)}
    .form input,.form textarea,.form select{width:100%;padding:10px;border:1px solid #dde5dd;border-radius:10px;margin:6px 0 12px;background:#fff}
    .group{border:1px dashed #e2ebe2;border-radius:12px;padding:12px;margin:10px 0;background:var(--ohb-soft);transition:.25s}
    .group.hide{display:none}
    .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media(max-width:680px){.row-2{grid-template-columns:1fr}}
    .small-note{font-size:.85rem;color:#666}
    .total-line{display:flex;align-items:center;gap:10px;margin:8px 0 0}
    .total-line .badge{background:#e9f8ee;color:var(--ohb-ink);border:1px solid #d5edd9;border-radius:999px;padding:6px 12px;font-weight:800}
    .cta-button{padding:12px 22px;border-radius:12px;background:var(--ohb-green);color:#fff;font-weight:800;border:none;cursor:pointer;box-shadow:0 10px 20px rgba(46,125,50,.25);transition:.2s}
    .cta-button:hover{transform:translateY(-1px);box-shadow:0 16px 26px rgba(46,125,50,.28)}
    .badge-corner{position:absolute;left:0;top:0;z-index:2;background:#e91e63;color:#fff;font-weight:800;padding:6px 10px;border-bottom-right-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.12);font-size:.9rem;}
    .badge-sold{background:#333}
    .dim{opacity:.75}
    .rv-wrap{margin-top:26px}
    .rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
    .rv-card{position:relative;background:#fff;border-radius:12px;box-shadow:var(--ohb-shadow);overflow:hidden;border:1px solid #eef2ef}
    .rv-img{aspect-ratio:4/3;background:#f4f6f5;display:grid;place-items:center}
    .rv-img img{ width:100%; height:100%; object-fit:contain; }
    .rv-body{padding:10px 12px}
    .rv-title{margin:0;font-weight:800;font-size:1rem}
    .rv-price{color:#2e7d32;font-weight:800}
    .wish-mini{position:absolute;right:10px;top:10px;background:#fff;border:none;border-radius:999px;width:34px;height:34px;display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.12);cursor:pointer}
    .icon-row{display:flex;gap:14px;align-items:center;margin-top:6px}
    /* tiny autoplay video on product image */
    .mini-vid{position:absolute; right:14px; bottom:14px; z-index:3; width:120px; height:160px; padding:0; border:0; border-radius:12px; overflow:hidden; background:#000; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.18);}
    .mini-vid video{ width:100%; height:100%; display:block; object-fit:cover; }
    #ohbVidModal { position: relative; }
#ohbVidModal .ohb-x{
  position:absolute; top:8px; right:8px;
  width:36px; height:36px; border:none; border-radius:999px;
  background:rgba(0,0,0,.6); color:#fff; font-size:22px; line-height:36px;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25);
}

#ohbVidModal{ padding:0; border:none; background:transparent; }
#ohbVidModal::backdrop{ background:rgba(0,0,0,.6); }
#ohbVidModal video{
  width:min(920px, 92vw);
  max-height:72vh;
  display:block;
  background:#000;
  border-radius:12px;
}

#ohbVidModal .ohb-x{
  position:absolute; top:8px; right:8px;
  width:36px; height:36px; border:none; border-radius:999px;
  background:rgba(0,0,0,.6); color:#fff; font-size:22px; line-height:36px;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25);
  z-index:5; /* ensure above the video */
}
#ohbVidModal .ohb-x:focus{ outline:2px solid #fff; outline-offset:2px; }
#ohbVidModal video{ display:block; }
@media (max-width: 480px){
  .mini-vid{ width:86px; height:120px; right:10px; bottom:10px; border-radius:10px; }
}

/* Product image frame (keeps a nice box but never distorts the photo) */
.p-img{
  position:relative;
  display:grid;
  place-items:center;                    /* center image */
  background:linear-gradient(180deg,#f3f7f5,#eef5f0);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--ohb-shadow);
  min-height: 280px;                     /* gives a frame on small screens */
  max-height: 72vh;                      /* don’t let it get too tall */
}

/* Stop all stretching/distortion on the big image */
.p-img img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;                           /* <— key: keep natural ratio */
  object-fit:contain;                    /* no crop, show full image */
  aspect-ratio:auto;                     /* cancel the forced 1:1 */
  transform:none;                        /* remove tiny hover zoom on detail */
  transition:none;
}

/* Keep the mini-video button positioned nicely on smaller screens */
@media (max-width: 480px){
  .p-img{ min-height:220px; max-height:60vh; }
}

/* RECENTLY VIEWED — make all cards even height without distortion */
.rv-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  overflow: hidden;
  background: #fff;
}

.rv-img {
  width: 100%;
  aspect-ratio: 1 / 1;           /* makes every image area a perfect square */
  background: #f5f5f5;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rv-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* no cropping or stretching */
}

.rv-body {
  padding: 10px 12px;
  text-align: center;
}



/* --- OHB product gallery --- */
.ohb-gallery {
  margin: 0;
  background: transparent;
  border-radius: 14px;
  /* overflow: hidden;  <-- DON'T hide here, or extra thumb rows get cut */
  position: relative;
  width: 100%;
  max-width: 500px;
}

/* main viewer box — fixed square */
.ohb-viewer {
  position: relative;
  overflow: hidden;             /* we only clip the big image */
  border-radius: 14px;
  background: transparent;
  aspect-ratio: 1 / 1;          /* 👈 keeps the box same height on ALL products */
}

/* slides wrapper – JS moves this with --idx */
.ohb-track {
  display: flex;
  height: 100%;
  transition: transform .35s ease;
  transform: translateX(calc(-100% * var(--idx, 0)));
}

/* each main image (you print <img class="ohb-slide" ...>) */
.ohb-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* show whole product, no stretch */
  background: #fff0;
}

/* arrows — stay centered because viewer now has fixed height */
.ohb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(76, 175, 80, 0.85);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.ohb-prev { left: 8px; }
.ohb-next { right: 8px; }

/* thumbs row under the image */
.ohb-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;              /* 👈 2+ rows on mobile */
  padding-bottom: 18px;         /* space under last row */
}

/* each thumb */
.ohb-thumb {
  border: none;
  background: #fff;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;
  border: 2px solid transparent;
}
.ohb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* active thumb highlight */
.ohb-thumb.is-active {
  border-color: #4CAF50;
  box-shadow: 0 6px 20px rgba(76,175,80,.35);
}

/* small screens */
@media (max-width: 520px) {
  .ohb-thumb { width: 52px; height: 52px; }
}