/* =========================================================
   PHYSICAL OBJECTS — everything scales with its own width (cqw),
   so one object works at 60px in the cart and 520px on the product page.
   ========================================================= */

.obj { position: relative; width: var(--w, 100%); container-type: inline-size; flex: none; }

/* the frame / magnet / box "addon" layer — variant changes animate here */
.obj__frame {
  position: relative; isolation: isolate;
  padding: 0; border: 0 solid transparent;
  border-image: linear-gradient(135deg, #5a715c, #3F5142 38%, #4f6651 55%, #34453a 80%, #4a5f4c) 1;
  background-color: transparent;
  transition: padding .6s var(--spring), border-width .6s var(--spring), background-color .35s, box-shadow .45s, transform .5s var(--spring);
}
.obj[data-addon="frame"] > .obj__frame {
  padding: 8cqw;
  border-width: 5.5cqw;
  background-color: var(--paper);
  box-shadow: inset 2px 3px 7px rgba(42, 31, 23, .32), inset 0 0 0 1px rgba(42, 31, 23, .08), var(--shadow-3);
}
.obj[data-addon="frame"] > .obj__frame::after { /* glass glare */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .32) 42%, transparent 50%, transparent 64%, rgba(255, 255, 255, .14) 70%, transparent 76%);
  animation: glare .7s var(--ease);
}
@keyframes glare { from { opacity: 0; transform: translateX(-20%); } }
.obj[data-addon="frame"] > .obj__frame > :not(.obj__magnet) { box-shadow: 0 1px 2px rgba(42, 31, 23, .2); }

.obj__magnet { /* magnetic backing (or gift box) peeking out behind */
  position: absolute; inset: 0; z-index: -1; border-radius: 2cqw;
  background: linear-gradient(140deg, #34453a, var(--sage-x));
  opacity: 0; transform: translate(0, 0);
  transition: opacity .3s, transform .55s var(--spring);
}
.obj[data-addon="magnet"] > .obj__frame { transform: translate(-1.5cqw, -2cqw) rotate(-1deg); }
.obj[data-addon="magnet"] .obj__magnet { opacity: 1; transform: translate(3.4cqw, 4cqw); box-shadow: var(--shadow-2); }
.obj[data-addon="magnet"] .obj__magnet::after { /* little "MAGNET" foil label */
  content: "MAGNET"; position: absolute; right: 4cqw; bottom: -1cqw; transform: translateY(100%) rotate(-3deg);
  font: 800 5.5cqw/1 var(--f-body); letter-spacing: .12em; color: var(--sage-d); white-space: nowrap;
}
.obj[data-addon="box"] .obj__magnet {
  opacity: 1; inset: 14cqw -8cqw -8cqw -8cqw; border-radius: 1.5cqw;
  background: var(--kraft); box-shadow: var(--shadow-3), inset 0 0 0 1.2cqw rgba(154, 65, 11, .08);
  transform: translateY(2cqw);
}
.obj[data-addon="box"] .obj__magnet::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .5; mix-blend-mode: multiply; border-radius: inherit; }
.obj[data-addon="box"] .obj__magnet::after { content: ""; position: absolute; top: 0; bottom: 0; left: 46%; width: 8cqw; background: var(--orange); }

/* ---------- photo surface ---------- */
.ph { position: relative; display: block; overflow: hidden; background: var(--sage-x); aspect-ratio: 1; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s, transform .6s var(--ease); }
.ph::after { /* gloss + edge burn */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .04) 32%, transparent 45%, transparent 80%, rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px rgba(42, 31, 23, .14), inset 0 0 6cqw rgba(42, 31, 23, .14);
}
.obj[data-finish="B&W"] .ph img { filter: grayscale(1) contrast(1.12) brightness(1.03); }
.obj[data-finish="WARM FILM"] .ph img { filter: sepia(.4) saturate(1.25) contrast(1.05); }
.obj[data-finish="MATTE"] .ph img { filter: contrast(.9) brightness(1.04) saturate(.9); }
.obj[data-finish="MATTE"] .ph::after { background: none; }

/* paper surface shared by printed things */
.polaroid, .strip, .print, .bookmark, .card-sm { position: relative; background: var(--paper); }
.polaroid::before, .strip::before, .print::before, .bookmark::before, .card-sm::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: var(--noise), linear-gradient(160deg, rgba(255, 255, 255, .5), transparent 40%, rgba(42, 31, 23, .05));
  opacity: .5; mix-blend-mode: multiply;
}

/* ---------- Polaroid ---------- */
/* 86 × 54 mm instant print: portrait card, rounded corners */
.polaroid { padding: 7cqw 7cqw 27cqw; box-shadow: var(--shadow-2); border-radius: 4.5cqw; }
.polaroid .ph { border-radius: 1.2cqw; }
.polaroid::before { border-radius: inherit; }
.polaroid .ph { aspect-ratio: 46 / 62; }
.polaroid__cap {
  position: absolute; left: 6cqw; right: 6cqw; bottom: 5cqw; z-index: 3;
  font: 700 10.5cqw/1 var(--f-hand); color: var(--ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: rotate(-2deg);
}

/* ---------- Photostrip ---------- */
.strip { display: flex; flex-direction: column; gap: 5cqw; padding: 7cqw 7cqw 0; box-shadow: var(--shadow-2); }
.strip .ph { aspect-ratio: 4 / 3.2; }
.strip__foot { display: block; padding: 6cqw 0 8cqw; font: 600 6.6cqw/1 var(--f-body); letter-spacing: .08em; text-align: center; color: var(--ink-2); text-transform: uppercase; white-space: nowrap; }

/* ---------- Print (4x6) ---------- */
.print { padding: 3.4cqw; box-shadow: var(--shadow-2); }
.print .ph { aspect-ratio: 3 / 2; }
.print--tall .ph { aspect-ratio: 4 / 5; }
.easel { position: absolute; z-index: -2; right: 14%; bottom: -5%; width: 26%; height: 45%; background: #34453a; transform: skewX(-14deg); border-radius: 2px; }

/* ---------- Magazine ---------- */
.mag {
  position: relative; aspect-ratio: 5.8 / 8.3; overflow: hidden; border-radius: .6cqw 1.6cqw 1.6cqw .6cqw;
  box-shadow: var(--shadow-2), 1.2cqw 1.2cqw 0 -.4cqw var(--paper), 1.6cqw 1.6cqw 0 -.4cqw var(--cream-x), 2cqw 2cqw 0 -.4cqw var(--paper);
  color: var(--paper);
}
.mag .ph { position: absolute; inset: 0; aspect-ratio: auto; }
.mag .ph img { filter: saturate(1.05) contrast(1.05); }
.mag::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(42, 31, 23, .45), rgba(255, 255, 255, .22) 2.5%, transparent 6%), linear-gradient(130deg, rgba(255, 255, 255, .25), transparent 35%); }
.mag__mast { position: absolute; z-index: 2; top: 4cqw; left: 6cqw; right: 6cqw; font: 900 31cqw/.8 var(--f-display); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.04em; color: var(--paper); text-shadow: 0 .5cqw 2cqw rgba(42, 31, 23, .35); }
.mag__issue { position: absolute; z-index: 2; top: 30cqw; left: 6.5cqw; font: 700 3.6cqw/1 var(--f-body); letter-spacing: .14em; }
.mag__title { position: absolute; z-index: 2; left: 6cqw; right: 6cqw; bottom: 25cqw; font: italic 900 13cqw/.86 var(--f-display); font-variation-settings: "SOFT" 100, "WONK" 1; text-shadow: 0 .5cqw 3cqw rgba(42, 31, 23, .5); }
.mag__title::before { content: ""; display: block; width: 14cqw; height: 1.4cqw; margin-bottom: 2.6cqw; background: var(--orange); }
.mag__lines { position: absolute; z-index: 2; left: 6cqw; right: 26cqw; bottom: 6cqw; font: 500 3.9cqw/1.25 var(--f-body); }
.mag__lines b { color: var(--peach); }
.mag__code { position: absolute; z-index: 2; right: 5cqw; bottom: 5cqw; width: 16cqw; height: 10cqw; background: repeating-linear-gradient(90deg, var(--ink) 0 .5cqw, var(--paper) .5cqw 1.2cqw, var(--ink) 1.2cqw 1.5cqw, var(--paper) 1.5cqw 2.4cqw) content-box, var(--paper); padding: 1.2cqw; }

/* ---------- Standalone magnet ---------- */
.magnet { border-radius: 3cqw; overflow: hidden; box-shadow: 2.2cqw 2.8cqw 0 var(--sage-x), var(--shadow-2); }
.magnet .ph { aspect-ratio: 1; }

/* ---------- Memory cards ---------- */
.cards { position: relative; aspect-ratio: 2.5 / 3.5; }
.card-sm { position: absolute; inset: 0; padding: 6cqw 6cqw 18cqw; border-radius: 7cqw; box-shadow: var(--shadow-2); transition: transform .5s var(--spring); }
.card-sm .ph { aspect-ratio: 1 / 1.08; border-radius: 4cqw; }
.card-sm:nth-child(1) { transform: rotate(-14deg) translateX(-16%); }
.card-sm:nth-child(2) { transform: rotate(9deg) translateX(14%); }
.card-sm:nth-child(3) { transform: rotate(-2deg); }
.card-sm__note { position: absolute; z-index: 3; left: 0; right: 0; bottom: 5cqw; text-align: center; font: 700 11cqw/1 var(--f-hand); color: var(--orange); }
.obj--cards:hover .card-sm:nth-child(1) { transform: rotate(-22deg) translateX(-28%); }
.obj--cards:hover .card-sm:nth-child(2) { transform: rotate(16deg) translateX(26%); }

/* ---------- Keychain ---------- */
.keychain { position: relative; padding-top: 24cqw; }
.keychain__ring { position: absolute; top: 0; left: 50%; width: 30cqw; aspect-ratio: 1; margin-left: -15cqw; border: 3.6cqw solid #a39b8f; border-radius: 50%; box-shadow: inset 0 0 0 .8cqw rgba(255, 255, 255, .4), 1px 2px 3px rgba(42, 31, 23, .3); }
.keychain__body { position: relative; padding: 7cqw; border-radius: 16cqw; background: rgba(255, 251, 246, .55); border: 1.5px solid rgba(255, 255, 255, .9); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(42, 31, 23, .08); }
.keychain__body::before { content: ""; position: absolute; top: 2.5cqw; left: 50%; width: 7cqw; aspect-ratio: 1; margin-left: -3.5cqw; border-radius: 50%; background: var(--cream); box-shadow: inset 0 1px 2px rgba(42, 31, 23, .4); }
.keychain .ph { border-radius: 11cqw; }

/* ---------- Memory box ---------- */
.mbox { position: relative; aspect-ratio: 1.2; }
.mbox__peek { position: absolute; left: 10%; right: 10%; top: 0; height: 62%; }
.mbox__peek .ph { position: absolute; width: 50%; aspect-ratio: 1; border: 3.5cqw solid var(--paper); border-bottom-width: 9cqw; box-shadow: var(--shadow-1); }
.mbox__peek .ph:first-child { left: 2%; top: 8%; transform: rotate(-12deg); }
.mbox__peek .ph:last-child { right: 2%; top: 0; transform: rotate(9deg); }
.mbox__base { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: var(--kraft); border-radius: 1.5cqw; box-shadow: var(--shadow-2), inset 0 3cqw 0 rgba(154, 65, 11, .12); overflow: hidden; }
.mbox__base::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .6; mix-blend-mode: multiply; }
.mbox__label { position: absolute; left: 8%; bottom: 12%; padding: 2cqw 4cqw; background: var(--paper); font: 700 6cqw/1 var(--f-hand); color: var(--ink-2); transform: rotate(-3deg); box-shadow: var(--shadow-1); }
.mbox__ribbon { position: absolute; right: 18%; bottom: 0; width: 7cqw; height: 60%; background: var(--orange); box-shadow: inset -1cqw 0 0 rgba(42, 31, 23, .15); }
.mbox__ribbon::before { content: ""; position: absolute; top: -6cqw; left: 50%; width: 18cqw; height: 10cqw; margin-left: -9cqw; border: 2.4cqw solid var(--orange); border-radius: 50% 50% 40% 40%; }

/* ---------- Bookmark ---------- */
.bookmark { display: flex; flex-direction: column; gap: 5cqw; padding: 7cqw 7cqw 24cqw; border-radius: 5cqw; box-shadow: var(--shadow-2); }
.bookmark::after { content: ""; position: absolute; left: 50%; bottom: 8cqw; width: 9cqw; aspect-ratio: 1; margin-left: -4.5cqw; border-radius: 50%; background: var(--cream); box-shadow: inset 0 1px 3px rgba(42, 31, 23, .4); }
.bookmark .ph { border-radius: 2cqw; }
.bookmark__tassel { position: absolute; left: 50%; bottom: -36cqw; width: 5cqw; height: 44cqw; margin-left: -2.5cqw; background: repeating-linear-gradient(90deg, var(--orange) 0 1cqw, var(--orange-d) 1cqw 1.6cqw); border-radius: 0 0 3cqw 3cqw; transform-origin: top; transform: rotate(8deg); z-index: -1; }

/* ---------- real product photo ---------- */
.obj--photo img { width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(42, 31, 23, .25)); }

/* shared hover physics */
.lift { transition: transform .45s var(--spring); }
.lift:hover { transform: translateY(-8px) rotate(-1.5deg) scale(1.02); }