/* Small, isolated corrections for the original storefront. No layout or hierarchy changes. */

/* Product packshots are portrait (4:5) but sit in landscape or square boxes with object-cover,
   which cut off jar lids, bases and label text. Show the whole pack inside the existing box. */
img.object-cover[src*="/uploads/products/"] {
  object-fit: contain;
}

/* Fill scene artwork edge to edge; crop only background around the subject. */
img[src*="category_"] { object-fit: cover; background-color: transparent; }
img[src*="honey_banner"],
img[src*="tea_banner"],
img[src*="spice_banner"],
img[src*="shop_banner"],
img[src*="story_banner"] { object-fit: cover; background-color: transparent; }
img[src*="honey_banner"], img[src*="tea_banner"], img[src*="spice_banner"] { object-position: center bottom; }
div:has(> img[alt="Pure Honey"]) h3,
div:has(> img[alt="Premium Teas"]) h3 { color: #fff; text-shadow: 0 1px 3px #0008; }
img[src*="/certificates/"] { object-fit: contain; }
img[src*="/farm/"],
img[src*="/stores/"] { object-fit: cover; }

/* Card image areas follow the supplied photo ratio, rather than letterboxing
   a portrait pack into a landscape box. The grid/section hierarchy stays intact. */
.ax-product-frame, .ax-artwork-frame {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--ax-image-ratio);
}
.ax-product-frame { padding: 0 !important; }
/* Let listing photos meet the card border; retain padding around names/prices. */
.group\/card:has(> .ax-product-frame) { padding: 0 !important; overflow: hidden; }
.group\/card > .ax-product-frame { margin-bottom: 0; border-radius: 0; }
.group\/card:has(> .ax-product-frame) > div:not(.ax-product-frame) { padding: 16px; }
.ax-product-frame img[src*="/products/"], .ax-artwork-frame > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}
/* A hover zoom would reintroduce the crop that the fit correction removes. */
.group:hover img[src*="category_"],
.group:hover img[src*="_banner"],
.group:hover img[src*="/products/"] { transform: none; scale: 1; }

/* Inherit every original card/heading style when making its title a real link. */
.ax-card-link { color: inherit; text-decoration: inherit; }
a:focus-visible, button:focus-visible, [role="link"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1a531a; outline-offset: 4px;
}
.ax-article { white-space: normal; overflow-wrap: anywhere; }
.ax-article h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 700; color: #111; margin: 1.75rem 0 .75rem; line-height: 1.2; scroll-margin-top: 8rem; }
.ax-article p { margin: .8rem 0; }
.ax-article a { color: #1a531a; text-decoration: underline; text-underline-offset: 3px; }
.ax-related-products { border-top: 1px solid #eee; margin-top: 2rem; padding-top: .5rem; }
.ax-static nav { margin: 1rem 0; }
.ax-static h1 { font-family: 'Cormorant Garamond', serif; font-size: 2.25rem; margin: 1.5rem 0; }
@media (max-width: 767px) {
  /* Leave safe-area space below the unchanged mobile navigation and floating action. */
  .fixed.bottom-0 { padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .fixed.bottom-20 { bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Top-bar social icons render at 12-14px. Widen the hit area to 24px (WCAG 2.2 target size)
   without moving the icon. */
a[title]:has(> span.w-3, > span.w-3\.5) {
  position: relative;
}
a[title]:has(> span.w-3, > span.w-3\.5)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}

/* Hero slider dots are 6px. Keep the dot, widen the tap area. */
button[aria-label^="Go to slide"] {
  position: relative;
}
button[aria-label^="Go to slide"]::after {
  content: "";
  position: absolute;
  inset: -9px;
}