/* ============================================================
   EXIST GREEN — SHOP LANDING (/shop/)
   Enqueued in existgreen-custom.php when is_shop() is the bare
   landing (no search / pagination / filters). The WooCommerce
   product loop is suppressed for this case so only the pasted
   shop-page.html contents render.

   Palette, spacing, and typography mirror homepage-controlling-styles.css
   so the page reads as part of the same system, not a new surface.

   Brand palette used throughout:
     --primary:   #2c5e54  (dark green)
     --primary-2: #1f3a33  (deeper green)
     --sage:      #a5ccbc  (mid-sage, borders + underline)
     --mint:      #bfe2dc  (button gradient stop)
     --soft-bg:   #f0f5f3  (soft sage surface)
     --sage-bg:   #e8f0ed  (section band)
     --body:      #3a4a43  (body)
     --muted:     #5a6b65  (secondary)

   Structure:
     1. Section wrapper + centered header (matches .eg-section family)
     2. Intent chip grid (compact icon cards, responsive 1 → 2 → 3 columns)
     3. Product wall (dense thumbnail grid)
     4. Aisle fallback nav (quiet text row)
   ============================================================ */


/* ---- 1. Section wrapper + header ----
   The shop landing uses shared classes from homepage-controlling-styles.css:
     .eg-section                -> max-width 1160px, margin, padding, box-sizing
     .eg-section__header        -> margin-bottom
     .eg-section__header--center -> text-align:center, h2 border-bottom sage underline
   Shop-specific overrides only. */

.eg-shop {
  --eg-shop-primary: #2c5e54;
  --eg-shop-primary-2: #1f3a33;
  --eg-shop-sage: #a5ccbc;
  --eg-shop-mint: #bfe2dc;
  --eg-shop-card: #f8fafb;
  --eg-shop-card-hover: #f0f7f5;
  --eg-shop-card-border: #d3d6da;
  --eg-shop-sage-border: #d1dfd9;
  --eg-shop-subtle-border: #e2ece7;
  --eg-shop-text: #1f1f1f;
  --eg-shop-muted: #555;
  --eg-shop-label: #8b9a8f;
  --eg-shop-section-gradient: linear-gradient(135deg, #e8f5f3 0%, #dce8e4 50%, #e0eef0 100%);

  color: var(--eg-shop-text);
  font-family: brandon-grotesque, "Brandon Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.eg-shop,
.eg-shop *,
.eg-shop *::before,
.eg-shop *::after {
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .eg-shop {
    /* Matches the other page templates that switch to 1.5rem horizontal
       padding on wider screens. */
    padding: 2.5rem 1.5rem 3rem;
  }
}

.eg-shop__header {
  max-width: 720px;
  margin: 0 auto 1.25rem;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.eg-shop__title {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0 0 0.32rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  color: var(--eg-shop-primary);
  line-height: 1.25;
  letter-spacing: 0.01em;
  border-bottom: 3px solid var(--eg-shop-sage);
}

.eg-shop__lede {
  margin: 0;
  color: var(--eg-shop-muted);
  font-size: 0.95rem;
  line-height: 1.45;
  font-style: italic;
}


/* ---- 2. Intent chip grid ----
   The chip copy is evocative and specific (invitations, not categories),
   so each chip needs room to breathe. We give the copy its full depth
   at every viewport rather than truncating or stacking letters onto
   slivers of space.

   Mobile: compact one-column rows. Tablet: two columns. Desktop: three columns.

   WordPress may insert <br> tags between inline elements when this HTML is
   pasted into the page editor. Those breaks are not part of the component;
   hiding them is the key to preventing giant vertical gaps. */

/* Kill the theme's global <ul> bullets. The homepage does this explicitly
   per-component (see homepage-controlling-styles.css section 16) so we
   follow the same pattern rather than relying on a global reset. */
.eg-shop__chips,
.eg-shop__chips li {
  list-style: none !important;
  margin: 0;
  padding-left: 0 !important;
}

.eg-shop__chips li {
  display: flex;
  align-self: start;
  margin: 0;
  min-width: 0;
}

.eg-shop-chip br {
  display: none !important;
}

.eg-shop__chips {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.6rem;
  margin: 0 auto;
  max-width: 1120px;
  padding: 0;
}

.eg-shop-chip {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  gap: 0.28rem;
  flex: 1;
  min-height: 0 !important;
  height: auto !important;
  padding: 0.72rem 0.82rem 0.78rem;
  width: 100%;
  background: var(--eg-shop-card);
  border: 1.5px solid var(--eg-shop-card-border);
  border-radius: 6px;
  color: var(--eg-shop-text);
  text-align: left;
  text-decoration: none !important;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.eg-shop-chip::after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  right: 1rem;
  color: var(--eg-shop-label);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-50%);
}

.eg-shop-chip:hover,
.eg-shop-chip:focus-visible {
  border-color: var(--eg-shop-sage);
  background: var(--eg-shop-card-hover);
  text-decoration: none !important;
}

.eg-shop-chip:active {
  transform: scale(0.98);
}

.eg-shop-chip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--eg-shop-mint);
  border-color: var(--eg-shop-primary);
  outline-offset: 2px;
}

.eg-shop-chip__icon {
  display: block !important;
  margin: 0 0 0.08rem;
  font-size: 1.15rem;
  line-height: 1;
}

.eg-shop-chip__label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--eg-shop-primary);
  overflow-wrap: break-word;
}

.eg-shop-chip__hint {
  display: block;
  margin-top: 0.05rem;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--eg-shop-muted);
  font-weight: 400;
  overflow-wrap: break-word;
}

/* Italic/warm treatment for shipping caveats (e.g. "local pickup only") */
.eg-shop-chip__hint--local {
  font-style: italic;
  color: var(--eg-shop-muted);
}

@supports (text-wrap: balance) {
  .eg-shop-chip__label {
    text-wrap: balance;
  }
}

@media (max-width: 639px) {
  .eg-shop {
    padding-right: clamp(1rem, 4vw, 1.25rem);
    padding-left: clamp(1rem, 4vw, 1.25rem);
  }

  .eg-shop__header {
    margin-bottom: 1rem;
  }

  .eg-shop__chips {
    gap: 0.55rem;
    max-width: 520px;
  }

  .eg-shop-chip {
    grid-template-columns: 1.4rem minmax(0, 1fr);
    grid-template-areas:
      "icon label"
      "icon hint";
    align-items: start;
    column-gap: 0.62rem;
    row-gap: 0.08rem;
    padding: 0.66rem 0.74rem;
  }

  .eg-shop-chip__icon {
    grid-area: icon;
    margin: 0.08rem 0 0;
    font-size: 1.05rem;
  }

  .eg-shop-chip__label {
    grid-area: label;
    font-size: 0.9rem;
  }

  .eg-shop-chip__hint {
    grid-area: hint;
    margin-top: 0;
    font-size: 0.78rem;
  }
}

@media (min-width: 640px) {
  .eg-shop__chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .eg-shop-chip {
    padding: 0.72rem 0.82rem 0.78rem;
  }
}

@media (min-width: 1024px) {
  .eg-shop__chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .eg-shop-chip {
    padding: 0.78rem 0.9rem 0.82rem;
  }
}

@media (max-width: 380px) {
  .eg-shop-chip {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: 0.5rem;
    padding: 0.58rem 0.62rem;
  }

  .eg-shop-chip__icon {
    font-size: 1rem;
  }

  .eg-shop-chip__label {
    font-size: 0.88rem;
  }

  .eg-shop-chip__hint {
    font-size: 0.76rem;
  }
}


/* ---- 3. Product wall ----
   Dense thumbnail mosaic. Quiet chrome — the products do the work.
   Hover-capable breakpoints: 4 cols mobile, 6 cols tablet, 10 cols desktop.
   Touch breakpoints: 3 cols mobile, 5 cols tablet, 7 cols large touch.
   Sits inside a sage band so it reads as its own editorial moment. */

.eg-shop__wall-intro {
  max-width: 720px;
  margin: clamp(1.4rem, 3vw, 2rem) auto 0.85rem;
  padding: 0.85rem 1rem;
  text-align: left;
  background: rgba(165, 204, 188, 0.08);
  border-left: 3px solid var(--eg-shop-mint);
  border-radius: 0 6px 6px 0;
}

.eg-shop__wall-intro-text {
  margin: 0;
  color: var(--eg-shop-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Legacy — still supported in case any older copy of the template is in use. */
.eg-shop__wall-label {
  margin: 0;
  color: var(--eg-shop-muted);
  font-size: 0.92rem;
  font-style: italic;
}

/* Column density grows with screen width. Touch devices override with
   fewer columns below so tiles stay readable with their always-visible
   caption underneath. */
.eg-shop-wall {
  --eg-wall-cols: 4;
  margin: 0 auto 0.5rem;
  max-width: 980px;
}

/* Sharp corners — the wall reads as "actual contents of the store",
   not another rounded UI panel. Breaking the 12px brand convention here
   is intentional: the wall is inventory, not a content card. */
.eg-shop-wall__grid {
  display: grid;
  grid-template-columns: repeat(var(--eg-wall-cols), minmax(0, 1fr));
  gap: 2px;
  background: var(--eg-shop-sage-border);
  border: 1px solid var(--eg-shop-sage-border);
}

.eg-shop-wall__tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  line-height: 0;
  transition: z-index 0s 0.15s;
}

.eg-shop-wall__tile:hover,
.eg-shop-wall__tile:focus-visible {
  z-index: 2;
  transition: z-index 0s;
  outline: none;
}

.eg-shop-wall__tile:focus-visible {
  outline: 2px solid var(--eg-shop-primary);
  outline-offset: 2px;
}

.eg-shop-wall__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.15s ease;
}

.eg-shop-wall__tile:hover .eg-shop-wall__img,
.eg-shop-wall__tile:focus-visible .eg-shop-wall__img {
  filter: brightness(0.88) saturate(0.95);
}

/* Product name reveal — like museum wall labels.
   Desktop + tablet: hidden at rest, fades in on hover or keyboard focus.
     Uses @media (hover: hover) to avoid sticky-hover on touch devices.
   Mobile (<600px): always visible as a caption below the image. This is
     the override block further down — mobile shoppers have no hover and
     the tiles are big enough to warrant a permanent name. */
.eg-shop-wall__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4rem 0.45rem 0.35rem;
  background: linear-gradient(to top, rgba(20, 30, 25, 0.82) 0%, rgba(20, 30, 25, 0.55) 70%, transparent 100%);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  /* Clamp long product names to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eg-shop-wall__tile:focus-visible .eg-shop-wall__name {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .eg-shop-wall__tile:hover .eg-shop-wall__name {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Touch-device wall override ----
   Detected via @media (hover: none) — fires on any device where the primary
   input can't hover. That's iPhone AND iPad (any size) AND Android tablets,
   not just narrow screens. A narrow laptop browser with a mouse will NOT
   trigger this block — it keeps the hover-reveal mosaic because hover works.

   On touch:
   - Hover reveal doesn't work, so every tile shows its name as a permanent
     caption underneath the image
   - Tile layout changes from pure square to flex-column (image + caption)
   - Column count drops so tiles stay readable with captions
   - Zoom-on-hover is disabled (no hover to trigger it) */
@media (hover: none) {
  /* Column density for touch: fewer than hover-capable devices at the same
     width, because each tile also needs room for its caption. */
  .eg-shop-wall {
    --eg-wall-cols: 3;
  }

  .eg-shop-wall__grid {
    gap: 6px;
    /* No sage hairline at lower density — it would read as ugly thick
       lines. Swap for transparent gaps on a neutral bordered container. */
    background: transparent;
    border: 1px solid var(--eg-shop-sage-border);
  }

  .eg-shop-wall__tile {
    /* Tile becomes image + caption stack, not a pure square. */
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    /* Reset the line-height: 0 that strips whitespace under <img> so the
       caption text breathes normally. */
    line-height: normal;
  }

  .eg-shop-wall__tile:hover,
  .eg-shop-wall__tile:focus-visible {
    /* Disable the zoom-on-hover effect — no hover on touch. */
    transform: none;
    box-shadow: none;
  }

  .eg-shop-wall__img {
    /* Image stays square; tile height adapts to include the caption below. */
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
  }

  .eg-shop-wall__name {
    /* Always visible caption. Static positioning, no overlay gradient. */
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    background: transparent;
    color: var(--eg-shop-primary);
    padding: 0.4rem 0.35rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
  }
}

@media (min-width: 600px) {
  .eg-shop-wall {
    --eg-wall-cols: 6;
  }
  .eg-shop-wall__grid {
    gap: 3px;
  }
}

@media (min-width: 900px) {
  .eg-shop-wall {
    --eg-wall-cols: 10;
  }
}

/* Touch at tablet portrait (~600-899px): 5 columns.
   iPad mini portrait is 768px, iPad portrait is 820px, iPad Pro portrait
   is 1024px on a 12.9". All get 5-col grid with readable tiles + captions. */
@media (hover: none) and (min-width: 600px) {
  .eg-shop-wall {
    --eg-wall-cols: 5;
  }
}

/* Touch at tablet landscape / large touch screens (>=900px): 7 columns.
   Denser than portrait but still leaves room for the caption line. */
@media (hover: none) and (min-width: 900px) {
  .eg-shop-wall {
    --eg-wall-cols: 7;
  }
}


/* ---- 4. Aisle fallback nav ----
   Uses the shared .eg-link--arrow class from homepage-controlling-styles.css
   for the aisle links. Only layout (flex row, separators, spacing) is
   shop-specific and lives here. */

.eg-shop__aisles {
  max-width: 720px;
  margin: 1.4rem auto 0;
  text-align: center;
}

.eg-shop__aisles-label {
  margin: 0 0 0.55rem;
  color: var(--eg-shop-label);
  font-size: 0.8125rem;
  font-style: italic;
}

.eg-shop__aisles-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.eg-shop__aisles-sep {
  display: none;
}

.eg-shop__aisles-nav .eg-link--arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(31, 74, 66, 0.08);
  border-radius: 6px;
  color: var(--eg-shop-primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.eg-shop__aisles-nav .eg-link--arrow:hover,
.eg-shop__aisles-nav .eg-link--arrow:focus-visible {
  background: rgba(191, 226, 220, 0.3);
  border-color: var(--eg-shop-sage);
  text-decoration: none;
}

@media (min-width: 900px) {
  .eg-shop__aisles {
    margin-top: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eg-shop-chip,
  .eg-shop-wall__tile,
  .eg-shop-wall__name {
    transition: none;
  }

  .eg-shop-chip:hover,
  .eg-shop-chip:focus-visible,
  .eg-shop-chip:active,
  .eg-shop-wall__tile:hover,
  .eg-shop-wall__tile:focus-visible {
    transform: none;
  }

  .eg-shop-wall__img {
    transition: none;
  }
}