/**
 * AVYN shop archive. Brand tokens come from tokens.css + the inline tokens.
 * Checkerboard image wells: (row+col) odd cells get the tint, expressed as
 * nth-child cycles per column count.
 */

/* An explicit width keeps the shop block full-bleed inside any container
   (a flex-row container would otherwise shrink it to content). */
.avyn-shop { width: 100%; padding: 2rem 0 4rem; }
.avyn-shell { max-width: 74rem; margin: 0 auto; padding: 0 1rem; }

.avyn-label {
  display: block; font-family: var(--avyn-mono); font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--avyn-slate);
}

/* ── Header ─────────────────────────────────────────── */
.avyn-shop-head { max-width: 48rem; margin-bottom: 2rem; }
.avyn-shop-title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 650; line-height: 1.05; margin: 0.4rem 0 0; color: var(--avyn-ink); }
.avyn-shop-intro { margin-top: 1rem; font-size: 0.875rem; line-height: 1.65; color: var(--avyn-graphite); max-width: 42rem; }

/* ── Controls ───────────────────────────────────────── */
.avyn-shop-controls { border-top: 1px solid var(--avyn-rule); border-bottom: 1px solid var(--avyn-rule); background: var(--avyn-panel); padding: 1rem 1.1rem; margin-bottom: 2.25rem; }
.avyn-controls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.avyn-shop-search { display: flex; gap: 0.5rem; flex: 1 1 22rem; max-width: 28rem; }
.avyn-input { flex: 1; padding: 0.55rem 0.75rem; border: 1px solid var(--avyn-rule); background: var(--avyn-panel); font-size: 0.875rem; min-width: 0; }
.avyn-input:focus { outline: 2px solid var(--avyn-brand); outline-offset: -1px; }
.avyn-btn { display: inline-block; padding: 0.55rem 1rem; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--avyn-ink); background: transparent; color: var(--avyn-ink); cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2; }
.avyn-btn-primary { background: var(--avyn-ink); border-color: var(--avyn-ink); color: var(--avyn-panel); transition: background-color 180ms ease, border-color 180ms ease; }
.avyn-btn-primary:hover { background: var(--avyn-brand-deep); border-color: var(--avyn-brand-deep); color: var(--avyn-panel); }
.avyn-controls-right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.avyn-stock-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--avyn-graphite); cursor: pointer; }
.avyn-stock-toggle input { width: 1rem; height: 1rem; accent-color: var(--avyn-brand-deep); }
.avyn-sort { display: flex; align-items: center; gap: 0.5rem; }
.avyn-sort select { border: 1px solid var(--avyn-rule); background: var(--avyn-panel); font-size: 0.75rem; padding: 0.45rem 0.5rem; max-width: 12rem; }

.avyn-cat-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.9rem; }
.avyn-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; min-height: 34px; border: 1px solid var(--avyn-rule); background: var(--avyn-panel); font-family: var(--avyn-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--avyn-graphite); text-decoration: none; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; }
.avyn-chip:hover { border-color: var(--avyn-ink); color: var(--avyn-graphite); }
.avyn-chip.is-active { background: var(--avyn-ink); border-color: var(--avyn-ink); color: var(--avyn-panel); }
.avyn-chip-count { color: var(--avyn-slate); }
.avyn-chip.is-active .avyn-chip-count { color: rgba(255, 254, 251, 0.6); }

.avyn-controls-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--avyn-rule); margin-top: 0.9rem; padding-top: 0.8rem; }
.avyn-result-count { font-family: var(--avyn-mono); font-size: 0.6875rem; color: var(--avyn-slate); margin: 0; }
.avyn-clear { font-family: var(--avyn-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--avyn-slate); text-decoration: underline; text-underline-offset: 4px; }
.avyn-clear:hover { color: var(--avyn-ink); }

/* ── Grid + checkerboard ────────────────────────────── */
.avyn-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .avyn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .avyn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* (row+col) odd → tinted well. 2-col cycle: 2,3 of 4. */
@media (max-width: 767px) {
  .avyn-grid .avyn-card:nth-child(4n+2) .avyn-card-well,
  .avyn-grid .avyn-card:nth-child(4n+3) .avyn-card-well { background-color: rgba(151, 216, 180, 0.4); }
}
/* 3-col cycle: 2,4,6 of 6. */
@media (min-width: 768px) and (max-width: 1023px) {
  .avyn-grid .avyn-card:nth-child(6n+2) .avyn-card-well,
  .avyn-grid .avyn-card:nth-child(6n+4) .avyn-card-well,
  .avyn-grid .avyn-card:nth-child(6n+6) .avyn-card-well { background-color: rgba(151, 216, 180, 0.4); }
}
/* 4-col cycle: 2,4,5,7 of 8. */
@media (min-width: 1024px) {
  .avyn-grid .avyn-card:nth-child(8n+2) .avyn-card-well,
  .avyn-grid .avyn-card:nth-child(8n+4) .avyn-card-well,
  .avyn-grid .avyn-card:nth-child(8n+5) .avyn-card-well,
  .avyn-grid .avyn-card:nth-child(8n+7) .avyn-card-well { background-color: rgba(151, 216, 180, 0.4); }
}

/* ── Card ───────────────────────────────────────────── */
.avyn-card { display: flex; flex-direction: column; border: 1px solid var(--avyn-rule); background: var(--avyn-panel); transition: border-color 140ms ease; position: relative; }
.avyn-card:hover { border-color: var(--avyn-ink); }
.avyn-card-well { position: relative; display: block; background: var(--avyn-shell); overflow: hidden; text-decoration: none; }
.avyn-card-cat { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 2; padding: 0.25rem 0.6rem; border: 1px solid var(--avyn-rule); background: rgba(255, 255, 255, 0.9); font-family: var(--avyn-mono); font-size: 0.625rem; color: var(--avyn-graphite); }
.avyn-vial { display: block; height: 13rem; width: auto; margin: 0 auto; padding: 1.1rem 0; transition: transform 300ms ease; }
.avyn-card:hover .avyn-vial { transform: scale(1.045); }
.avyn-card-hover { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(255, 255, 255, 0.95); border-top: 1px solid var(--avyn-rule); font-family: var(--avyn-mono); font-size: 0.6875rem; color: var(--avyn-slate); transform: translateY(100%); transition: transform 200ms ease; }
.avyn-card:hover .avyn-card-hover, .avyn-card:focus-within .avyn-card-hover { transform: translateY(0); }

.avyn-card-body { display: flex; flex-direction: column; flex: 1; padding: 1rem; }
.avyn-card-name { font-size: 1rem; font-weight: 650; line-height: 1.25; margin: 0; min-height: 2.5rem; }
.avyn-card-name a { color: var(--avyn-ink); text-decoration: none; }
.avyn-card-name a:hover { color: var(--avyn-brand); }
.avyn-card-sub { margin: 0.25rem 0 0; font-size: 0.75rem; line-height: 1.55; color: var(--avyn-slate); min-height: 2.1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.avyn-card-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.avyn-card-chips .avyn-chip { min-height: 30px; padding: 0.3rem 0.6rem; }

.avyn-card-meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 0.75rem; border-top: 1px solid var(--avyn-rule); margin-top: 1rem; padding-top: 0.75rem; }
.avyn-card-price { font-family: var(--avyn-mono); font-size: 1.125rem; font-weight: 600; margin: 0.1rem 0 0; color: var(--avyn-ink); }
.avyn-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.avyn-card-stock { font-family: var(--avyn-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; }
.avyn-card-stock[data-stock="instock"] { color: var(--avyn-ok); }
.avyn-card-stock[data-stock="onbackorder"] { color: var(--avyn-warn); }
.avyn-card-stock[data-stock="outofstock"] { color: var(--avyn-slate); }
.avyn-card-coa { font-family: var(--avyn-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--avyn-brand); text-decoration: underline; text-underline-offset: 4px; }
.avyn-card-coa:hover { color: var(--avyn-brand-deep); }
.avyn-card-add { margin-top: 0.75rem; }
.avyn-card-add.is-disabled { pointer-events: none; opacity: 0.5; }

/* ── Misc ───────────────────────────────────────────── */
.avyn-pagination { margin-top: 2rem; text-align: center; }
.avyn-empty { max-width: 26rem; margin: 0 auto; border: 1px solid var(--avyn-rule); background: var(--avyn-panel); padding: 3rem 1.5rem; text-align: center; }
.avyn-empty-title { font-size: 1.1rem; font-weight: 650; margin: 0 0 0.5rem; }
.avyn-empty .avyn-btn { margin-top: 1.25rem; }
.avyn-ruo-note { margin-top: 3rem; font-size: 0.6875rem; color: var(--avyn-slate); }

.avyn-shop-body.is-loading .avyn-shop-results { opacity: 0.45; transition: opacity 120ms ease; }

/* ── Single product ─────────────────────────────────── */
.single-product div.product .avyn-product-well { position: relative; background: var(--avyn-shell); border: 1px solid var(--avyn-rule); }
.single-product .avyn-product-well .avyn-vial { height: 20rem; padding: 2rem 0; }
.avyn-product-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0.75rem; }
.avyn-badge-purity { display: inline-block; padding: 0.3rem 0.65rem; background: var(--avyn-tint); color: var(--avyn-brand-deep); font-family: var(--avyn-mono); font-size: 0.6875rem; letter-spacing: 0.04em; }
.avyn-product-aliases { font-size: 0.75rem; color: var(--avyn-slate); }
.avyn-product-section { max-width: 46rem; margin: 2.25rem 0 0; }
.avyn-spec-table th { width: 11rem; font-size: 0.75rem; color: var(--avyn-graphite); font-weight: 600; }
.avyn-prose { font-size: 0.875rem; line-height: 1.7; color: var(--avyn-graphite); }
.avyn-prose ul { padding-left: 1.1rem; }
.avyn-lot-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.avyn-lot-list a { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border: 1px solid var(--avyn-rule); background: var(--avyn-panel); padding: 0.7rem 0.9rem; text-decoration: none; color: inherit; transition: border-color 120ms ease; }
.avyn-lot-list a:hover { border-color: var(--avyn-ink); }
.avyn-lot-list .avyn-mono-2xs { display: block; }
.avyn-lot-purity { font-family: var(--avyn-mono); font-weight: 600; color: var(--avyn-brand); }

/* AJAX add-to-cart states */
.avyn-card-add.is-adding { opacity: 0.7; pointer-events: none; }

/* Added-to-cart confirmation shares the primary hover family. */
.avyn-card-add.is-added { background: var(--avyn-brand-deep); border-color: var(--avyn-brand-deep); color: var(--avyn-panel); }

/* Elementor's kit styles buttons globally at body.elementor-kit-N specificity;
   restate every chip/button state above it so nothing turns kit-blue. */
body button.avyn-chip, body a.avyn-chip {
  background: var(--avyn-panel); border: 1px solid var(--avyn-rule); color: var(--avyn-graphite);
}
body button.avyn-chip:hover, body a.avyn-chip:hover,
body button.avyn-chip:focus, body a.avyn-chip:focus {
  background: var(--avyn-panel); border-color: var(--avyn-ink); color: var(--avyn-graphite); outline: none;
}
body button.avyn-chip.is-active, body a.avyn-chip.is-active,
body button.avyn-chip.is-active:hover, body a.avyn-chip.is-active:hover {
  background: var(--avyn-ink); border-color: var(--avyn-ink); color: var(--avyn-panel);
}
body .avyn-btn-primary, body button.avyn-btn-primary, body a.avyn-btn-primary {
  background: var(--avyn-ink); border-color: var(--avyn-ink); color: var(--avyn-panel);
}
body .avyn-btn-primary:hover, body button.avyn-btn-primary:hover, body a.avyn-btn-primary:hover,
body .avyn-btn-primary:focus, body button.avyn-btn-primary:focus {
  background: var(--avyn-brand-deep); border-color: var(--avyn-brand-deep); color: var(--avyn-panel);
}
body .avyn-card-add.is-added { background: var(--avyn-brand-deep); border-color: var(--avyn-brand-deep); color: var(--avyn-panel); }


/* ── Sale badges (colors from Theme Options → WooCommerce) ─────────── */
.avyn-sale-badges { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.avyn-sale-badge, .avyn-sale-pct { display: inline-block; padding: 3px 8px; font-family: var(--avyn-mono); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.4; }
.avyn-sale-badge { background: var(--avyn-data); color: #FFFEFB; }
.avyn-sale-pct { background: var(--avyn-ink); color: #FFFEFB; font-variant-numeric: tabular-nums; }
.avyn-card-well { position: relative; }

/* Sale pricing on cards: struck regular beside the sale price. */
.avyn-card-price del { margin-right: 0.375rem; font-size: 0.8em; font-weight: 400; color: var(--avyn-slate); text-decoration: line-through; }