/* TLCF Age Tiles — subtle compact pills */

/* Keep Woo's native select in DOM but visually hidden */
.tlcf-age-row--hidden {
  position: relative !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

/* Layout: compact grid */
.tlcf-age-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 8px;
  font-family: "Lora", Georgia, serif;
}

/* Mobile: 2-up is fine */
@media (max-width: 640px) {
  .tlcf-age-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Base pill */
.tlcf-age-tile {
  appearance: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 12px 10px 28px;   /* room for the left dot */
  min-height: 44px;               /* compact height */
  background: #fff;
  color: #2F3D4C;
  text-align: center;
  line-height: 1.25;
  border: 1px solid rgba(47, 61, 76, 0.22);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease;
  font-weight: 700;
  font-size: 14px;                /* smaller text */
  outline: 2px solid transparent; /* focus ring handled below */
  position: relative;
}

/* Small brand-colored dot on the left */
.tlcf-age-tile::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--tile-bg, #93A394);
  opacity: .9;
}

/* Hover / keyboard focus */
.tlcf-age-tile:hover,
.tlcf-age-tile:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.10);
  border-color: rgba(47, 61, 76, 0.35);
  outline: 2px solid rgba(47,61,76,.15);
  outline-offset: 0;
}

/* Active/selected — strong but still tasteful */
.tlcf-age-tile.is-active {
  background: #2F3D4C;           /* Slate */
  color: #fff;
  border-color: #2F3D4C;
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}
.tlcf-age-tile.is-active::before { opacity: 1; }

/* Disabled/unavailable — greyed + strikethrough like Talking Hens */
.tlcf-age-tile.is-disabled {
  cursor: not-allowed;
  background: #F3F4F6;           /* light grey */
  color: #9CA3AF;                /* grey text */
  border-color: #E5E7EB;
  box-shadow: none;
  opacity: 1;                    /* keep solid; rely on grey + strike */
}
.tlcf-age-tile.is-disabled .tlcf-age-tile__label {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(156, 163, 175, .9);
}
.tlcf-age-tile.is-disabled::before { opacity: .35; }

/* Label */
.tlcf-age-tile__label {
  display: block;
  max-width: 100%;
  white-space: normal;         /* allow wrapping */
  word-wrap: break-word;
  font-family: "Honeysuckle Market", "Lora", Georgia, serif;
  letter-spacing: .1px;
}

/* Optional helper note */
.tlcf-age-tiles + .tlcf-age-note {
  margin-top: 6px;
  font-size: 13px;
  color: #2F3D4C;
  opacity: .70;
}

/* Tighter spacing to price/variation area */
.variations_form + .single_variation_wrap,
.tlcf-age-tiles + .price,
.tlcf-age-tiles + .single_variation {
  margin-top: 8px;
}

/* Remove hidden attribute row spacing (WooCommerce variation table) */
table.variations tr.tlcf-age-row--hidden {
  display: none !important;
}

/* === TLCF: Variation price theme styling === */

/* Put a little breathing room below the tiles */
.single_variation_wrap { margin-top: 8px; }

/* Typography + spacing to match theme headings/body */
.single_variation .price,
.woocommerce-variation-price .price {
  display: inline-block;
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  font-size: 22px;              /* tweak to 20/24 if you prefer */
  line-height: 1.2;
  color: #2F3D4C;               /* Slate */
  margin: 0 0 4px 0;
  padding: 0;
}

/* Sale formatting: muted old price, clean current price */
.single_variation .price del,
.woocommerce-variation-price .price del {
  opacity: .55;
  margin-right: 6px;
}
.single_variation .price ins,
.woocommerce-variation-price .price ins {
  text-decoration: none;
  color: #2F3D4C;
}

/* Smooth change when switching ages */
.single_variation { transition: opacity .15s ease; }
.single_variation.tlcf-updating { opacity: .45; }

/* Hide only the static range price (shown before a variation is chosen) */
.single-product .summary > .price {
  display: none !important;
}

/* But show the selected variation price (WooCommerce renders this inside .woocommerce-variation-price) */
.single_variation_wrap .woocommerce-variation-price .price {
  display: inline-block !important;
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #2F3D4C;
  margin: 10px 0;
  transition: opacity .2s ease;
}

/* === TLCF: Fix faint variation price opacity === */
.single_variation_wrap .woocommerce-variation-price .price,
.single_variation_wrap .woocommerce-variation-price .price ins,
.single_variation_wrap .woocommerce-variation-price .price del {
  color: #2F3D4C !important; /* Slate tone from your palette */
  opacity: 1 !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* Ensure the container doesn't inherit lower contrast */
.single_variation_wrap .woocommerce-variation-price {
  opacity: 1 !important;
}

/* Optional: make the price stand out slightly more */
.single_variation_wrap .woocommerce-variation-price .price {
  font-size: 22px;
  font-family: "Lora", Georgia, serif;
  margin: 6px 0 4px;
  display: inline-block;
}

/* --- TLCF: force variation price to full contrast --- */
.single_variation,
.single_variation.tlcf-updating,
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-price .price,
.single_variation_wrap .woocommerce-variation-price .price ins,
.single_variation_wrap .woocommerce-variation-price .price del {
  opacity: 1 !important;
  color: #2F3D4C !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* keep the tidy theme styling */
.single_variation_wrap .woocommerce-variation-price .price {
  display: inline-block !important;
  font-family: "Lora", Georgia, serif;
  font-size: 22px;
  line-height: 1.2;
  margin: 6px 0 4px;
}