/* [hatiku_reviews] — static Google reviews block (pro-child).
   Palette sampled from the live site: gold #DDAE51, charcoal #272727, Lato. */

.htk-reviews, .htk-reviews *{box-sizing:border-box}
.htk-reviews{
  box-sizing:border-box;
  --htk-gold:#DDAE51;
  --htk-ink:#272727;
  --htk-line:rgba(39,39,39,.12);
  font-family:Lato,-apple-system,sans-serif;
  color:var(--htk-ink);
  /* full-bleed: break out of any constrained parent to span the viewport */
  width:100vw;
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
  padding:2.5rem 1.25rem;
}

.htk-head{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem;margin-bottom:1.6rem;font-size:1rem;line-height:1.3;
}
.htk-head strong{font-size:1.2rem}
.htk-head a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.htk-head a:hover{color:var(--htk-gold)}
.htk-g{width:22px;height:22px;flex:none}
.htk-star-ico svg{width:18px;height:18px;fill:var(--htk-gold);vertical-align:-3px}
.htk-dot{opacity:.5}

.htk-body{position:relative}
/* T + M: arrows bottom-center under the row */
.htk-navs{display:flex;justify-content:center;gap:.6rem;margin-top:.35rem}
/* L + D: arrows flank the row, vertically centred */
@media (min-width:768px){
  .htk-reviews{padding-inline:3.25rem}   /* side gutters so the arrows never sit over card text */
  .htk-navs{display:contents}
  .htk-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;box-shadow:0 6px 16px -6px rgba(39,39,39,.35)}
  .htk-prev{left:-2.75rem}
  .htk-next{right:-2.75rem}
}
.htk-nav{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--htk-line);
  background:#fff;color:var(--htk-ink);display:grid;place-items:center;cursor:pointer;
  transition:all .2s ease;
}
.htk-nav svg{width:16px;height:16px}
.htk-nav:hover{background:var(--htk-gold);border-color:var(--htk-gold);color:#fff}
.htk-nav:focus-visible{outline:2px solid var(--htk-gold);outline-offset:2px}

/* one-row scroll-snap carousel */
.htk-row{
  display:flex;gap:1.1rem;text-align:left;
  scroll-padding-inline:2px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:2px 2px .9rem;               /* room for card shadow + scrollbar */
  scrollbar-width:thin;scrollbar-color:var(--htk-gold) transparent;
}
.htk-row::-webkit-scrollbar{height:6px}
.htk-row::-webkit-scrollbar-thumb{background:var(--htk-gold);border-radius:3px}
.htk-row::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:no-preference){ .htk-row{scroll-behavior:smooth} }

.htk-card{
  flex:0 0 min(84vw, 350px);scroll-snap-align:start;
  margin:0;background:#fff;border:1px solid var(--htk-line);border-radius:12px;
  padding:1.3rem 1.4rem;box-shadow:0 12px 28px -20px rgba(39,39,39,.4);
}
.htk-who{display:flex;align-items:center;gap:.75rem}
.htk-who img{width:44px;height:44px;border-radius:50%;flex:none}
.htk-avi{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:1.15rem;
}
.htk-avi-0{background:#7B1FA2}.htk-avi-1{background:#00796B}.htk-avi-2{background:#C2185B}
.htk-avi-3{background:#303F9F}.htk-avi-4{background:#E64A19}.htk-avi-5{background:#455A64}
.htk-who .htk-g{width:18px;height:18px;align-self:flex-start;margin-top:2px}
.htk-id{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.htk-id strong{font-size:.98rem}
.htk-id time{font-size:.82rem;color:rgba(39,39,39,.55)}

.htk-stars{display:flex;gap:2px;margin:.7rem 0 .55rem}
.htk-stars svg{width:17px;height:17px;fill:var(--htk-gold)}

.htk-card blockquote{margin:0;padding:0;border:0;font-size:.95rem;line-height:1.55}
/* JS clamps long reviews to ~6 lines and adds a Read more toggle */
.htk-card.is-clamped blockquote{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.htk-card.is-expanded blockquote{display:block;-webkit-line-clamp:unset;overflow:visible}
.htk-more{
  background:none;border:0;padding:0;margin-top:.55rem;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:700;color:var(--htk-ink);
  text-decoration:underline;text-decoration-color:var(--htk-gold);text-decoration-thickness:2px;text-underline-offset:3px;
}
.htk-more:hover{color:var(--htk-gold)}
.htk-more:focus-visible{outline:2px solid var(--htk-gold);outline-offset:2px}