/* =====================================================================
   tilt-3d.css — purely additive visual enhancements
   1) Subtle 3D tilt scaffolding for product / cattle / membership cards
   2) Soft 3D press on CTA buttons
   3) Hero video parallax/float scaffolding
   4) Shop page (#productGrid) 3-up grid on phones only
   No content, color, type or layout on other pages is changed here.
   ===================================================================== */

/* ---- 1. Tilt scaffolding -------------------------------------------- */
/* JS adds .tilt-card to product cards (.product-card) and membership
   cards (.tier). The transform itself is written inline by tilt-3d.js;
   here we only set up the 3D context, performance hints and the easing
   used when the pointer leaves (snap-back). */
.tilt-card {
  will-change: transform;
  transform-style: preserve-3d;
  /* Smooth snap-back when not actively tilting. */
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
/* While the pointer is actively over/pressing the card, follow it instantly. */
.tilt-card.is-tilting {
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* The inner photo gets a touch of counter-depth so the lift feels real. */
.tilt-card .product-photo,
.tilt-card .tier-inner { will-change: transform; }

/* ---- 2. CTA soft 3D press ------------------------------------------- */
/* Applies to the site's pill buttons + add-to-cart + cart icon button.
   Scale down to 0.98 on press for a tactile feel; works for mouse + touch. */
.btn,
.add-to-cart,
.cart-btn { transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease; }
.btn.is-pressed,
.add-to-cart.is-pressed,
.cart-btn.is-pressed { transform: scale(.98) !important; }

/* ---- 3. Hero video parallax / float --------------------------------- */
/* tilt-3d.js writes the transform inline. We add a base scale through the
   inline transform so a few px of movement never reveals the video edges. */
.hero-video { will-change: transform; }

/* ---- 4. Shop page: 3 products per row on phones only ----------------- */
/* Only the shop grid (#productGrid) is affected. Cattle grid, membership,
   tours and every other grid keep their existing responsive behaviour.
   #id specificity beats the generic `.product-grid { 1fr }` phone rule. */
@media (max-width: 768px) {
  #productGrid.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  /* Shrink the card chrome proportionally so all info still fits & reads. */
  #productGrid .product-card { border-radius: 12px; }
  #productGrid .product-body { padding: 8px 8px 10px; }
  #productGrid .product-body h3 { font-size: 12px; line-height: 1.25; margin-bottom: 3px; }
  #productGrid .product-body .desc { font-size: 11px; line-height: 1.3; margin-bottom: 8px; }
  #productGrid .product-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  #productGrid .price { font-size: 12px; }
  #productGrid .rating { font-size: 11px; }
  #productGrid .product-img .tag { font-size: 8px; padding: 3px 6px; top: 6px; left: 6px; }
  /* Keep the add-to-cart button tappable: full width, >=44px tall. */
  #productGrid .add-to-cart {
    width: 100%;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 11px;
    gap: 4px;
    line-height: 1.1;
  }
  #productGrid .add-to-cart svg { width: 13px; height: 13px; }
}

/* ---- Reduced motion: respect the user's OS preference --------------- */
@media (prefers-reduced-motion: reduce) {
  .tilt-card { transform: none !important; transition: box-shadow .25s ease, border-color .25s ease; }
  .btn.is-pressed,
  .add-to-cart.is-pressed,
  .cart-btn.is-pressed { transform: none !important; }
  .hero-video { transform: none !important; }
}