/* live.css — the pieces added for the Console / Stripe build and the two phone fixes.
   Same language as the rest: paper, ink, hairlines, Manrope, the shared --ease. */

/* Sold-out size (live mode) */
.sizes button.is-out{color:#b3b3bb;border-style:dashed;text-decoration:line-through;text-decoration-thickness:1px}
.sizes button.is-out.active{background:#55555c;border-color:#55555c;color:#e8e8ec;text-decoration:none}
.co-line-unavailable .co-line-variant em{font-style:normal;color:#8a3b3b}
.co-line-unavailable .co-line-image{opacity:.45}

/* Shipping option that is actually selected (live) */
.co-delivery-option.is-selected{border-color:#17171999}
.co-delivery-option.is-selected .co-status-dot{border-color:#171719;background:radial-gradient(circle,#171719 45%,transparent 48%)}

/* Stripe Payment Element lives here */
.co-payment-live{background:#fff;border-color:#1b1b2033}
.co-payment-mount{margin-top:18px;min-height:120px}
.co-payment-mount:empty{background:repeating-linear-gradient(90deg,#1b1b2008 0 8px,transparent 8px 16px);min-height:120px}
.co-pay-button{min-width:240px}
.co-waiting{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#17171a24);font-size:11px;color:#55555e}
.co-waiting-dot{width:14px;height:14px;border:1px solid #aaa6;border-top-color:#171719;border-radius:50%;animation:spin 1.1s linear infinite;flex-shrink:0}
.co-loading,.account-loading{font-size:11px;color:#7a7a82;padding:30px 0}

/* Phone fix 1: the total sits above the button on the review step */
.co-mobile-total{display:none}
@media(max-width:760px){
  .co-mobile-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:28px;padding:16px 0 0;border-top:1px solid var(--co-line,#17171a24);font-size:10px;color:#6c6c70}
  .co-mobile-total strong{font-size:20px;letter-spacing:-.4px;color:var(--ink,#151517);font-weight:500}
  .co-mobile-total+.co-step-actions{margin-top:14px;border-top:0;padding-top:0}
  .co-step-actions{flex-direction:column-reverse;align-items:stretch}
  .co-step-actions>.co-button{min-width:0;width:100%}
  .co-step-actions>.co-back-button,.co-step-actions>.co-text-link{align-self:flex-start}
}

/* Phone fix 2: sticky Add to bag once the options scroll away */
.pdp-sticky{display:none}
@media(max-width:760px){
  .pdp-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;align-items:center;justify-content:space-between;gap:14px;padding:12px 6% calc(12px + env(safe-area-inset-bottom));background:#eeeef0f2;backdrop-filter:blur(14px);border-top:1px solid var(--line,#17171a24);transform:translateY(110%);transition:transform .38s var(--ease,cubic-bezier(.2,.7,.2,1));pointer-events:none}
  .pdp-sticky.is-visible{transform:none;pointer-events:auto}
  .pdp-sticky>div{display:flex;flex-direction:column;gap:3px;min-width:0}
  .pdp-sticky-price{font-size:18px;letter-spacing:-.4px;font-weight:500}
  .pdp-sticky-meta{font-size:8px;letter-spacing:.6px;text-transform:uppercase;color:#6c6c70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdp-sticky .add-button{width:auto;margin:0;padding:14px 16px;font-size:10px;gap:18px;flex-shrink:0;min-width:150px}
  .product-dark .pdp-sticky{background:#161618f0;color:#f0f0f3}
  .product-dark .pdp-sticky-meta{color:#9b9ba1}
  .product-dark .pdp-sticky .add-button{background:#dedee1;color:#171719}
  #product-page:has(.pdp-sticky.is-visible) .product-related{padding-bottom:110px}
}

/* Email-code sign-in */
.account-signin{margin-top:22px;max-width:420px}
.account-signin .account-fine strong{font-weight:500;color:var(--ink,#151517)}
.account-signin .account-text-button{display:inline;padding:0;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.account-field input:disabled{background:#f1f1f3;color:#7a7a82;cursor:not-allowed}

@media(prefers-reduced-motion:reduce){
  .pdp-sticky{transition:none}
  .co-waiting-dot{animation:none;border-top-color:#aaa6}
}

/* Still render shown while the 3D file loads, then fades under it */
.studio-poster{position:absolute;inset:6% 10%;width:auto;height:auto;max-width:80%;max-height:88%;margin:auto;object-fit:contain;pointer-events:none;z-index:1;transition:opacity .6s var(--ease,cubic-bezier(.2,.7,.2,1));filter:drop-shadow(12px 15px 14px #1b1b2220)}
.studio-poster.is-hidden{opacity:0}
.hero-viewer .studio-poster{inset:0 12%;max-width:76%;max-height:100%}
.viewer-canvas .studio-poster{inset:4% 12%;max-width:76%;max-height:92%}
.story-viewer .studio-poster{inset:12% 20%;max-width:60%;max-height:76%}
.model-loading{z-index:2}
@media(prefers-reduced-motion:reduce){.studio-poster{transition:none}}
.hero-viewer:has(.studio-poster) .model-loading,.viewer-canvas:has(.studio-poster) .model-loading,.story-viewer:has(.studio-poster) .model-loading{justify-content:flex-end;padding-bottom:3%}