/*
 * ── Gem image controls (cart, cart preview, product modal) ──
 * Packs sorted by gemAmount smallest → largest: gem-1 … gem-6
 *
 * offset-x: + right, − left
 * offset-y: + down, − up
 * scale:    1 = default size
 *
 * Gems shop page uses shop.css (nth-child rules) — not this file.
 */
:root {
  --gem-1-offset-x: -5px;
  --gem-1-offset-y: 0px;
  --gem-1-scale: 3.5;

  --gem-2-offset-x: 5px;
  --gem-2-offset-y: 0px;
  --gem-2-scale: 3.3;

  --gem-3-offset-x: -2px;
  --gem-3-offset-y: 0px;
  --gem-3-scale: 2.6;

  --gem-4-offset-x: -5px;
  --gem-4-offset-y: 0px;
  --gem-4-scale: 1.5;

  --gem-5-offset-x: -5px;
  --gem-5-offset-y: 0px;
  --gem-5-scale: 1.5;

  --gem-6-offset-x: -5px;
  --gem-6-offset-y: 0px;
  --gem-6-scale: 1.5;

  /*
   * Cart page — "Maybe something else?" offer cards (left → right = slot 1–3)
   * offset-x: + right, − left
   * offset-y: + down, − up
   * scale:    1 = default size
   */
  --cart-offer-1-offset-x: 10px;
  --cart-offer-1-offset-y: 0px;
  --cart-offer-1-scale: 2.1;

  --cart-offer-2-offset-x: 3px;
  --cart-offer-2-offset-y: 0px;
  --cart-offer-2-scale: 1.4;

  --cart-offer-3-offset-x: -2px;
  --cart-offer-3-offset-y: 0px;
  --cart-offer-3-scale: 1.35;
}

/* Cart page */
.cart-item-gem.gem-slot-1 .cart-item-image img,
.cart-item-gem.gem-slot-2 .cart-item-image img,
.cart-item-gem.gem-slot-3 .cart-item-image img,
.cart-item-gem.gem-slot-4 .cart-item-image img,
.cart-item-gem.gem-slot-5 .cart-item-image img,
.cart-item-gem.gem-slot-6 .cart-item-image img {
  transform-origin: center center;
}

.cart-item-gem.gem-slot-1 .cart-item-image img {
  transform: translate(var(--gem-1-offset-x), var(--gem-1-offset-y)) scale(var(--gem-1-scale));
}

.cart-item-gem.gem-slot-2 .cart-item-image img {
  transform: translate(var(--gem-2-offset-x), var(--gem-2-offset-y)) scale(var(--gem-2-scale));
}

.cart-item-gem.gem-slot-3 .cart-item-image img {
  transform: translate(var(--gem-3-offset-x), var(--gem-3-offset-y)) scale(var(--gem-3-scale));
}

.cart-item-gem.gem-slot-4 .cart-item-image img {
  transform: translate(var(--gem-4-offset-x), var(--gem-4-offset-y)) scale(var(--gem-4-scale));
}

.cart-item-gem.gem-slot-5 .cart-item-image img {
  transform: translate(var(--gem-5-offset-x), var(--gem-5-offset-y)) scale(var(--gem-5-scale));
}

.cart-item-gem.gem-slot-6 .cart-item-image img {
  transform: translate(var(--gem-6-offset-x), var(--gem-6-offset-y)) scale(var(--gem-6-scale));
}

.cart-item-gem .cart-item-image {
  overflow: visible;
  background: transparent;
}

.shopping-cart-special-offers .shop-bundle-card .special-offer-image-box {
  background: transparent;
}

/* Cart page — "Maybe something else?" */
.shopping-cart-special-offers .shop-bundle-card .special-offer-image-box img {
  transform-origin: center center;
}

.shopping-cart-special-offers .shop-bundle-card:nth-child(1) .special-offer-image-box img {
  transform: translate(var(--cart-offer-1-offset-x), var(--cart-offer-1-offset-y)) scale(var(--cart-offer-1-scale));
}

.shopping-cart-special-offers .shop-bundle-card:nth-child(2) .special-offer-image-box img {
  transform: translate(var(--cart-offer-2-offset-x), var(--cart-offer-2-offset-y)) scale(var(--cart-offer-2-scale));
}

.shopping-cart-special-offers .shop-bundle-card:nth-child(3) .special-offer-image-box img {
  transform: translate(var(--cart-offer-3-offset-x), var(--cart-offer-3-offset-y)) scale(var(--cart-offer-3-scale));
}