.hero-image {
  background: #dce3fa;
  border: 0;
}

.dock-icon > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.story.story-bio {
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.story-bio > img {
  width: 120px;
  height: auto;
  margin-top: 35px;
}

.story-bio .bio-copy h2 {
  font-size: 32px;
  line-height: 1.7;
  letter-spacing: 0;
}

.story-bio .bio-copy p {
  font-size: 14px;
  line-height: 2.3;
  margin: 14px 0;
}

.story-bio .bio-contact {
  grid-column: 2;
  border-top: 1px solid #b8943f40;
  padding-top: 20px;
}

.bio-contact h3 { font-size: 16px; margin: 0 0 12px; }
.bio-contact address { font-style: normal; font-size: 14px; line-height: 2; }
.bio-phones { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 15px; }
.bio-phones a { font-size: 15px; font-weight: 700; white-space: nowrap; }
footer a[href^="tel:"], .bio-phones a {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  width: fit-content;
  align-self: flex-start;
}

.footer-brand img {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.gallery { min-width: 0; }
.main-photo.wc-main-photo {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
}
.main-photo.wc-main-photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.gallery .thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery .thumbs > button {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  height: auto;
  aspect-ratio: 1;
  padding: 4px;
}
.gallery .thumbs > button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
}
.product-meta > div { background: #fff; border-radius: 8px; padding: 14px; }
.product-meta small { display: block; font-size: 11px; color: var(--muted); }
.product-meta b { display: block; font-size: 13px; margin-top: 7px; overflow-wrap: anywhere; }
.product-features-title { font-size: 16px; margin: 22px 0 12px; }
@media (max-width: 420px) {
  .product-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery .thumbs > button { flex-basis: 64px; width: 64px; }
}
.story-bio .bio-contact p { font-size: 13px; line-height: 2; }

@media (max-width: 700px) {
  .story.story-bio { grid-template-columns: 1fr; gap: 15px; }
  .story-bio > img { width: 80px; margin-top: 0; }
  .story-bio .bio-copy h2 { font-size: 25px; }
  .story-bio .bio-contact { grid-column: 1; }
}

.hero-image::after {
  display: none;
}

.hero-image > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
}

/* The iPhone banner includes copy at both ends; preserve its full ratio. */
.bento .bento-main.category-tile {
  aspect-ratio: 56 / 75;
  min-height: 0;
}

.bento .bento-main.category-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

@media (min-width: 1101px) {
  .bento:has(.category-tile) {
    height: auto;
    grid-template-columns: .9fr 1fr 1fr;
    grid-template-rows: 1fr 1.22fr;
  }

  .bento .category-tile {
    min-height: 0;
  }

  .bento .bento-small.category-tile > img,
  .bento .bento-wide.category-tile > img {
    position: absolute;
    inset: 0;
  }
}