/* Live-site fixes verified against the deployed storefront on July 26, 2026. */

/* The older positioning sheet targets every direct div inside a category card.
   These more-specific rules separate the copy from the artwork and give the
   artwork a real containing-block height, so images cannot collapse to 0px. */
.categories-section .category-grid--tz .category-card > .category-card__copy {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  padding: 28px 30px 8px;
}
.categories-section .category-grid--tz .category-card > .category-card__copy > span {
  display: block;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.categories-section .category-grid--tz .category-card > .category-card__copy h3,
.categories-section .category-grid--tz .category-card--large > .category-card__copy h3 {
  max-width: 78%;
  margin: 8px 0 0;
  line-height: .96;
}
.categories-section .category-grid--tz .category-card > .category-card__copy p {
  max-width: 52%;
  margin: 9px 0 0;
}
.categories-section .category-grid--tz .category-card > .category-card__art {
  position: relative;
  z-index: 1;
  display: block;
  align-self: end;
  width: 100%;
  max-width: none;
  min-height: 205px;
  height: 205px;
  padding: 0;
  isolation: isolate;
}
.categories-section .category-grid--tz .category-card--large > .category-card__art {
  min-height: 405px;
  height: 405px;
}
.categories-section .category-grid--tz .category-card > .category-card__art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5% 3% -18% 19%;
  background: rgba(255,255,255,.3);
  border-radius: 52% 46% 0 0;
}
.categories-section .category-grid--tz .category-card .category-card__category-image {
  position: absolute;
  z-index: 2;
  right: -4%;
  bottom: -17%;
  width: 64%;
  height: 112%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  border: 7px solid rgba(251,247,240,.55);
  border-radius: 51% 49% 8% 8% / 42% 42% 8% 8%;
  box-shadow: 0 16px 32px rgba(38,58,30,.16);
  transition: transform var(--transition), box-shadow var(--transition);
}
.categories-section .category-grid--tz .category-card--large .category-card__category-image {
  right: -5%;
  bottom: -10%;
  width: 72%;
  height: 110%;
  object-position: center 52%;
}
.categories-section .category-grid--tz .category-card:hover .category-card__category-image {
  transform: translateY(-7px) rotate(.5deg);
  box-shadow: 0 24px 42px rgba(38,58,30,.22);
}

/* Direct WebP files are now used for supplied photography and decoration. */
.founder-shared-frame > img,
.about-collage--shared > img,
.founders-common-photo > img,
.farmers-preview figure > img,
.farmers-link-grid > img,
.farmers-hero figure > img,
.farmers-gallery__grid > img,
.review-editorial > img,
.boutique-card > img {
  visibility: visible;
  opacity: 1;
}

/* Keep the large jasmine artwork readable on desktop and intentionally faded
   behind copy on tablet/mobile. */
.page-hero--reviews > .container > img {
  visibility: visible;
  opacity: .72;
}
@media (max-width: 900px) {
  .page-hero--reviews > .container > img { opacity: .32; }
}

/* Prevent the decorative selector flower from widening the mobile page. */
@media (max-width: 680px) {
  .selector-hero--overflow {
    overflow-x: clip;
  }
  .selector-hero--overflow .selector-hero-flower {
    right: -24px !important;
    width: 220px !important;
    max-width: 58vw !important;
  }
  .selector-layout,
  .selector-card,
  .selector-step,
  .selector-options,
  .selector-result,
  .result-products {
    min-width: 0;
    max-width: 100%;
  }
  .selector-card {
    overflow: hidden;
  }
  .selector-nav {
    flex-wrap: wrap;
  }
  .selector-nav .button {
    min-width: 0;
    max-width: 100%;
  }

  .categories-section .category-grid--tz .category-card > .category-card__copy {
    padding: 22px 22px 6px;
  }
  .categories-section .category-grid--tz .category-card > .category-card__copy h3,
  .categories-section .category-grid--tz .category-card--large > .category-card__copy h3 {
    max-width: 82%;
    margin-top: 8px;
  }
  .categories-section .category-grid--tz .category-card > .category-card__copy p {
    max-width: 72%;
  }
  .categories-section .category-grid--tz .category-card > .category-card__art {
    min-height: 235px;
    height: 235px;
  }
  .categories-section .category-grid--tz .category-card--large > .category-card__art {
    min-height: 270px;
    height: 270px;
  }
  .categories-section .category-grid--tz .category-card .category-card__category-image,
  .categories-section .category-grid--tz .category-card--large .category-card__category-image {
    right: -5%;
    bottom: -12%;
    width: 70%;
    height: 108%;
    border-width: 5px;
  }
  .page-hero--reviews > .container > img { opacity: .24; }
}

/* Long legal headings and contact values must wrap on narrow screens. */
.page-legal .legal-layout,
.page-legal .legal-content,
.page-legal .legal-content section,
.page-legal .legal-contact-card {
  min-width: 0;
  max-width: 100%;
}
.page-legal .legal-header h1,
.page-legal .legal-content h2,
.page-legal .legal-content h3,
.page-legal .legal-content p,
.page-legal .legal-content li,
.page-legal .legal-content a,
.page-legal .legal-contact-card > * {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
@media (max-width: 680px) {
  .page-legal .legal-header h1 {
    font-size: clamp(2.45rem, 11vw, 3.55rem);
    line-height: 1;
  }
  .page-legal .legal-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page-legal .legal-toc {
    position: static;
    width: 100%;
  }
}