/* ══════════════════════════════════════════════════════════════════════
   SHIVAA v139 — bag, category & payment-page pass.

   Three owner reports (18 Sep 2026) and one polish request:
     1 · the bag drawer's "Checkout ✦" tap — js owns it now (js/v139.js);
         this file only makes the drawer feel like it is worth tapping.
     2 · a category page was a wall of 20 category photographs with no
         jewellery in it — the photo slider becomes a text chip strip there.
     3 · the payment page's Place Order bar floated over the form on phones —
         it now sits in the page flow, at the end of the form.
     4 · saved addresses prefill the checkout form (markup styled here).

   Animation rule for everything below: transform and opacity only (no layout
   animation), `prefers-reduced-motion` fully honoured, and no new permanent
   GPU layers on phones — the v121 pack removed those for a reason.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE BAG DRAWER ───────────────────────────────────────────────────
   motion.css gives the drawer a single translateX spring. That is good; this
   adds the two things that make it read as *crafted* rather than *slid*:
   a hint of depth (scale + shadow settle, both composited) and a staggered
   entrance for the contents, so the bag assembles instead of arriving. */
.mc-drawer {
  transform: translateX(104%) scale(.985);
  transition: transform .52s cubic-bezier(.22, .8, .2, 1), visibility .52s;
  will-change: auto;                       /* no permanent layer on a phone */
}
.mc-drawer.open { transform: none; }
.mc-drawer.open { will-change: transform; }        /* only while it is open */

.mc-scrim { transition: opacity .38s ease-out, visibility .38s; }

/* the head and foot settle a beat after the panel lands */
.mc-drawer .mc-head,
.mc-drawer .mc-foot { animation: v139Settle .5s cubic-bezier(.22, .8, .2, 1) both; }
.mc-drawer .mc-foot { animation-delay: .06s; }
@keyframes v139Settle {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* bag rows: tighter stagger, a touch more travel, no opacity flash on re-render */
.mc-drawer.open .mc-line {
  animation: v139RowIn .42s cubic-bezier(.22, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 38ms + .05s);
}
@keyframes v139RowIn {
  from { opacity: 0; transform: translateX(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* the free-shipping meter breathes once when the bag opens */
.mc-drawer.open .mc-ship-bar i { animation: v139Meter .9s cubic-bezier(.22, .8, .2, 1) both .12s; }
@keyframes v139Meter { from { transform: scaleX(.02); transform-origin: left; } to { transform: none; } }

/* Checkout ✦ — the tap that was dead is now the most inviting thing in the
   bag: one slow gold sheen on open, then a spring on press. No loop (a
   permanently shining button is exactly what the owner complained about on the
   payment page). */
.mc-foot .btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.mc-drawer.open .mc-foot .btn-gold::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 48%, transparent 64%);
  transform: translateX(-120%);
  animation: v139Sheen 1.15s cubic-bezier(.3, .7, .2, 1) .28s 1 both;
}
@keyframes v139Sheen { to { transform: translateX(120%); } }
.mc-foot .btn-gold:active { transform: scale(.985); transition: transform .12s ease-out; }

/* ── 2 · CATEGORY PAGE — chip strip instead of 20 photographs ───────────── */
.shop-chipbar { padding: 12px 0 13px; }
.cat-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: none; scroll-snap-align: center;
  font-family: var(--ff-label, inherit); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink-2);
  min-height: 38px; display: inline-flex; align-items: center;   /* 38px+ tap target */
  transition: background-color .22s ease-out, color .22s ease-out,
              border-color .22s ease-out, transform .22s cubic-bezier(.22, .8, .2, 1);
}
.cat-chip:hover { border-color: rgba(212, 175, 90, .8); color: var(--maroon); transform: translateY(-1px); }
.cat-chip:active { transform: scale(.97); }
.cat-chip.on {
  background: linear-gradient(135deg, var(--gold), var(--gold-2, var(--gold)));
  border-color: transparent; color: var(--maroon-deep, #3d0e15); font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(61, 14, 21, .45);
}

/* ── 3 · PAYMENT PAGE — the Place Order bar joins the page flow ───────────
   `mobile.css` pins `.mcta-bar` to the viewport (bottom: 56px, above the
   mobile nav) and `v116.css` repeats `position: fixed`. On the payment page
   that bar sat over the address form for the whole time the customer was
   typing. `.mcta-inline` takes it out of the fixed layer: same card, same
   total, same button — at the end of the form, scrolling with the page. */
.mcta-bar.mcta-inline {
  position: static;
  left: auto; right: auto; bottom: auto;
  display: flex; align-items: center; gap: 14px;
  margin: 18px 16px calc(22px + env(safe-area-inset-bottom));
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255, 253, 249, .96);
  box-shadow: 0 12px 30px -18px rgba(61, 14, 21, .4);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  animation: v139Rise .45s cubic-bezier(.22, .8, .2, 1) both;
}
@keyframes v139Rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mcta-bar.mcta-inline .mcta-total { flex: none; }
.mcta-bar.mcta-inline .btn { flex: 1; }
/* the page no longer has to reserve room for a bar that is not floating */
.cart-layout { padding-bottom: 8px; }
@media (max-width: 768px) {
  .mcta-bar.mcta-inline { margin-inline: 12px; }
  .mcta-bar.mcta-inline .mcta-total b { font-size: 19px; }
}
/* landscape phones keep the bar in flow too — nothing is floating any more */
@media (max-width: 920px) and (max-height: 500px) and (orientation: landscape) {
  .mcta-bar.mcta-inline { margin-bottom: 18px; }
}

/* ── 4 · SAVED ADDRESSES on the checkout form ───────────────────────────── */
.adr-sw { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.adr-sw::-webkit-scrollbar { display: none; }
.adr-chip {
  flex: none; min-width: 168px; max-width: 240px; text-align: left;
  display: grid; gap: 3px; padding: 11px 13px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--white); cursor: pointer;
  transition: border-color .22s ease-out, box-shadow .22s ease-out, transform .22s cubic-bezier(.22, .8, .2, 1);
}
.adr-chip b { font-family: var(--ff-label, inherit); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--maroon); }
.adr-chip small { font-size: 12px; color: var(--ink-3); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adr-chip:hover { border-color: rgba(212, 175, 90, .8); transform: translateY(-1px); }
.adr-chip:active { transform: scale(.98); }
.adr-chip.on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-faint, rgba(212, 175, 90, .16)); }
.adr-chip.adr-new { place-items: center; text-decoration: none; min-width: 116px; border-style: dashed; }
.adr-chip.adr-new b { font-size: 17px; }
.adr-note { font-size: 12.5px; color: var(--ink-2); margin: 0 0 12px; }
.adr-note[hidden] { display: none; }
.adr-note-empty { color: var(--ink-3); }
.adr-save { flex-direction: row; align-items: center; gap: 9px; }
.adr-save input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.adr-save span { font-size: 12.5px; color: var(--ink-2); }

/* ── motion safety — one switch for everything above ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mc-drawer, .mc-scrim,
  .mc-drawer .mc-head, .mc-drawer .mc-foot,
  .mc-drawer.open .mc-line, .mc-drawer.open .mc-ship-bar i,
  .mc-drawer.open .mc-foot .btn-gold::after,
  .cat-chip, .adr-chip, .mcta-bar.mcta-inline {
    animation: none !important;
    transition: none !important;
  }
  .mc-drawer { transform: translateX(104%); }
  .mc-drawer.open { transform: none; }
}