/**
 * Shop archive (Peptides redesign) — ported from Elementor draft
 * "Peptides (New Design)" (post 1000424), adapted to render on real
 * WooCommerce data via woocommerce/archive-product.php + assets/js/shop.js.
 *
 * Enqueued only on the shop / product_cat / product_tag archives
 * (see inc/enqueue.php). Site header/footer are the theme's own real
 * header.php/footer.php — not reproduced here, unlike the standalone
 * Elementor Canvas draft which had to embed its own nav+footer markup.
 *
 * Colors: wherever the draft's raw hex value has an exact (or
 * near-exact) match in the theme's Design System tokens
 * (assets/css/base.css :root), we reference that token so this stays
 * in sync with Theme Options > Branding. The draft's warm cream/tan
 * accent colors (#FFF8F3 bg tint, #FFE8D5 borders, #181410 footer-style
 * dark) have no equivalent theme token (the theme's own tokens are a
 * neutral gray palette), so those are kept as local custom properties
 * scoped to .shop-mp2 rather than invented as new global tokens.
 *
 * @package METAPEPS
 */

.shop-mp2 {
	--mp2-primary: var( --metapeps-color-primary );      /* #FC710C — exact match to draft's accent orange. */
	--mp2-primary-hover: #E76100;
	--mp2-bg: var( --metapeps-color-accent );            /* closest existing token to draft's #FFF8F3 cream. */
	--mp2-surface: var( --metapeps-color-surface );
	--mp2-text: var( --metapeps-color-text-primary );
	--mp2-text-muted: var( --metapeps-color-text-secondary );
	--mp2-border: #FFE8D5;                               /* draft's warm accent border — no theme token equivalent. */
	--mp2-border-soft: #FFF1E6;
	--mp2-radius-pill: var( --metapeps-radius-pill );
	--mp2-radius-lg: var( --metapeps-radius-lg );
	--mp2-shadow-sm: var( --metapeps-shadow-sm );
	--mp2-shadow-md: var( --metapeps-shadow-md );

	background: var( --mp2-bg );
}

.shop-mp2 a { text-decoration: none; color: inherit; }

/* ---------- hero ---------- */
.mp2-shop-hero { max-width: 720px; margin: 0 auto; text-align: center; padding: 56px 5% 8px; }
.mp2-eyebrow { display: inline-block; background: var( --mp2-border-soft ); color: var( --mp2-primary ); font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: var( --mp2-radius-pill ); letter-spacing: .3px; margin-bottom: 14px; }
.mp2-eyebrow-dot { display: inline-flex; align-items: center; gap: 8px; }
.mp2-eyebrow-dot i { width: 6px; height: 6px; border-radius: 999px; background: var( --mp2-primary ); display: inline-block; }
.mp2-shop-hero h1 { font-size: 40px; line-height: 1.16; font-weight: 800; margin: 0 0 14px; }
.mp2-shop-hero p { font-size: 15.5px; line-height: 1.7; color: var( --mp2-text-muted ); margin: 0 auto; max-width: 560px; }
@media ( max-width: 600px ) { .mp2-shop-hero h1 { font-size: 30px; } }

/* ---------- tools: search + filter chips ---------- */
/* Normal static section — previously pinned to the viewport top on
   scroll via JS; removed per request, this is plain document flow now. */
.mp2-shop-tools-wrap { z-index: 30; background: var( --mp2-bg ); padding: 10px 5% 18px; }
.mp2-search-wrap { position: relative; max-width: 480px; margin: 0 auto 20px; }
.mp2-search-wrap svg { position: absolute; left: 18px; top: 50%; transform: translateY( -50% ); color: #999; pointer-events: none; }
.mp2-search-wrap input { width: 100%; padding: 14px 18px 14px 46px; border-radius: var( --mp2-radius-pill ); border: 1px solid var( --mp2-border ); background: var( --mp2-surface ); font-size: 14.5px; font-family: inherit; color: var( --mp2-text ); box-shadow: var( --mp2-shadow-sm ); }
.mp2-search-wrap input:focus { outline: none; border-color: var( --mp2-primary ); }
.mp2-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mp2-filter-chip { background: var( --mp2-surface ); border: 1px solid var( --mp2-border ); color: var( --mp2-text-muted ); font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: var( --mp2-radius-pill ); cursor: pointer; transition: .2s; white-space: nowrap; font-family: inherit; }
.mp2-filter-chip:hover { border-color: var( --mp2-primary ); color: var( --mp2-primary ); }
.mp2-filter-chip.is-active { background: var( --mp2-primary ); border-color: var( --mp2-primary ); color: #fff; }

.mp2-result-count { text-align: center; color: #999; font-size: 13px; margin: 6px 0 22px; }

/* ---------- grid + cards ---------- */
.mp2-shop { max-width: 1180px; margin: 0 auto; padding: 36px 5% 90px; }
.mp2-shop-grid { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 14px; }
.mp2-card { background: var( --mp2-surface ); border: 1px solid var( --mp2-border ); border-radius: var( --mp2-radius-lg ); overflow: hidden; transition: .25s; display: flex; flex-direction: column; }
.mp2-card:hover { transform: translateY( -4px ); box-shadow: var( --mp2-shadow-md ); border-color: var( --mp2-primary ); }
.mp2-card-media-link { display: block; }
.mp2-card-media { position: relative; aspect-ratio: 1/1; background: var( --mp2-bg ); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mp2-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s, opacity .2s; }
.mp2-card:hover .mp2-card-media img { transform: scale( 1.06 ); }
.mp2-pure-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: var( --mp2-surface ); border: 1px solid var( --mp2-border ); color: var( --mp2-primary ); font-size: 7px; font-weight: 800; line-height: 1.2; text-align: center; width: 26px; height: 26px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var( --mp2-shadow-sm ); }
.mp2-cart-fab { position: absolute; bottom: 10px; right: 10px; width: 34px; height: 34px; border-radius: 999px; background: var( --mp2-surface ); border: 1px solid var( --mp2-border ); color: var( --mp2-primary ); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY( 6px ); transition: .2s; }
.mp2-card:hover .mp2-cart-fab { opacity: 1; transform: translateY( 0 ); }
.mp2-cart-fab:hover { background: var( --mp2-primary ); color: #fff; }
.mp2-cart-fab.is-loading { opacity: 1; pointer-events: none; }
.mp2-cart-fab.is-added { background: var( --mp2-primary ); color: #fff; opacity: 1; }
.mp2-card-body { padding: 10px 10px 13px; display: flex; flex-direction: column; flex: 1; }
.mp2-card-cat { font-size: 9px; font-weight: 700; color: var( --mp2-primary ); text-transform: uppercase; letter-spacing: .4px; }
.mp2-card-title-link { display: block; }
.mp2-card-body h3 { font-size: 13px; font-weight: 700; margin: 4px 0 2px; transition: color .2s; }
.mp2-card-title-link:hover h3 { color: var( --mp2-primary ); }

.mp2-size-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.mp2-size-chip { background: var( --mp2-bg ); border: 1px solid var( --mp2-border ); color: var( --mp2-text-muted ); font-size: 10px; font-weight: 700; padding: 5px 9px; border-radius: var( --mp2-radius-pill ); cursor: pointer; transition: .15s; font-family: inherit; }
.mp2-size-chip:hover { border-color: var( --mp2-primary ); color: var( --mp2-primary ); }
.mp2-size-chip.is-active { background: var( --mp2-primary ); border-color: var( --mp2-primary ); color: #fff; }

.mp2-card-price { font-size: 13.5px; font-weight: 700; color: var( --mp2-text ); margin: 8px 0 12px; }
.mp2-price-prefix { font-weight: 500; color: #999; font-size: 12px; }
.mp2-card-price-muted { color: #999; font-weight: 600; font-size: 13.5px; }

.mp2-view-btn { display: block; width: 100%; text-align: center; padding: 7px; border-radius: var( --mp2-radius-pill ); border: 1.5px solid var( --mp2-text ); font-size: 11px; font-weight: 700; color: var( --mp2-text ); transition: .2s; margin-top: auto; }
.mp2-card:hover .mp2-view-btn { background: var( --mp2-primary ); border-color: var( --mp2-primary ); color: #fff; }

.mp2-empty { text-align: center; color: #999; font-size: 14.5px; padding: 60px 0; }

@media ( max-width: 860px ) { .mp2-shop-grid { grid-template-columns: repeat( 3, 1fr ); } }
@media ( max-width: 768px )  {
  .mp2-shop-grid { grid-template-columns: repeat( 2, 1fr ); gap: 12px; }
  .mp2-card-body { padding: 11px 11px 14px; }
  .mp2-card-body h3 { font-size: 13px; }
  .mp2-card-price { font-size: 12.5px; }
  .mp2-view-btn { padding: 8px; font-size: 11.5px; }
}
@media ( max-width: 480px )  {
  .mp2-shop-grid { grid-template-columns: repeat( 2, 1fr ); gap: 10px; }
  .mp2-card-body { padding: 9px 9px 11px; }
  .mp2-card-cat { font-size: 8.5px; }
  .mp2-card-body h3 { font-size: 12px; margin: 4px 0 2px; }
  .mp2-size-chip { font-size: 8.5px; padding: 4px 7px; }
  .mp2-card-price { font-size: 11.5px; margin: 6px 0 8px; }
  .mp2-price-prefix { font-size: 10px; }
  .mp2-card-price-muted { font-size: 11.5px; }
  .mp2-view-btn { padding: 7px; font-size: 10.5px; }
  .mp2-pure-badge { width: 26px; height: 26px; font-size: 7px; top: 6px; left: 6px; }
  .mp2-cart-fab { width: 30px; height: 30px; bottom: 8px; right: 8px; }
}