/* Akewz copy — local tweaks. Loaded after the main stylesheet on every page.
   Images sit at normal size; they only magnify on hover. */

/* Shop grid cards: original hover was 1.05x — bump it up. */
.group:hover a.aspect-square.overflow-hidden > img.object-cover,
a.aspect-square.overflow-hidden:hover > img.object-cover {
  transform: scale(1.25);
}

/* Mobile menu row: was one non-wrapping line in 12px text that got clipped at the right edge on phones.
   Let it wrap, centre it, and give each link a finger-sized tap area. */
nav[aria-label="Mobile navigation"] {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 6px;
  padding: 4px 10px;
  font-size: 14px;
}
nav[aria-label="Mobile navigation"] a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 8px;
}
/* The shared header is on every page now, but the md:hidden / md:flex rules it relies on only existed in the
   home page's inline styles. Spell them out here so phones get the menu row and desktops get the menu bar. */
nav[aria-label="Main navigation"] { display: none; }
@media (min-width: 768px) {
  nav[aria-label="Main navigation"] { display: flex; }
  nav[aria-label="Mobile navigation"] { display: none; }
}

/* Product page main photo: same magnify-on-hover (the live site's zoom needed JS). */
div.aspect-square.cursor-zoom-in.overflow-hidden > img.object-contain {
  transition: transform 0.3s ease;
  transform-origin: center;
}
div.aspect-square.cursor-zoom-in.overflow-hidden:hover > img.object-contain {
  transform: scale(1.25);
}