/* =============================================================================
   preview2d.css — Build Your Own Belt · the honest 2D pairing card
   American Leather Company of Scottsdale · americanleatherusa.com

   Foundation: v3/skin.css owns every token and component (.al-well, --plate,
   .al-kicker, .al-rule--stitch, .al-dl, .al-btn, .al-badge). This file adds
   only the card's own layout. Tokens only — no raw hex, px space, font stack
   or duration is declared here (the homepage.html discipline).

   Root: .albb-p2d[data-mode="stage"|"summary"][data-loading]
   Stage   = the full card (WebGL fallback inside the viewer well, print view,
             and the page's skeleton before Three.js arrives).
   Summary = the compact "your build" row for the review step and the
             add-to-cart confirmation.
   ========================================================================== */

.albb-p2d{
  position:relative; min-width:0;
  color:var(--al-text-mid); font-family:var(--al-font-body);
  font-size:var(--al-fs-body); line-height:var(--al-lh-body);
  background:var(--al-ground-2); border-radius:var(--al-r-card);
  padding:var(--al-sp-5);
}
/* free-standing variant (outside a well): card recipe without the lift */
.albb-p2d--card{ background:var(--al-surface-1); border:var(--al-border); box-shadow:var(--al-shadow-card); }
.albb-p2d *, .albb-p2d *::before, .albb-p2d *::after{ box-sizing:border-box; }

/* ---------- lockup: kicker / sentence-H2 / stitch rule / lede ---------- */
.albb-p2d__head{ margin:0 0 var(--al-sp-5); }
.albb-p2d .al-kicker{ margin:0 0 var(--al-sp-2); }
.albb-p2d__title,
body.theme-rocket-wc-master .albb-p2d__title{
  font-family:var(--al-font-display); font-weight:500;
  font-size:var(--al-fs-d3); line-height:var(--al-lh-d3);
  color:var(--al-text-hi); letter-spacing:-.01em; margin:0;
}
.albb-p2d .al-rule{ margin:var(--al-sp-3) 0; }
.albb-p2d__lede,
body.theme-rocket-wc-master p.albb-p2d__lede{
  font-size:var(--al-fs-xs); line-height:var(--al-lh-tight);
  color:var(--al-text-dim); margin:0; max-width:var(--al-measure-lede);
}
.albb-p2d__note,
body.theme-rocket-wc-master p.albb-p2d__note{
  font-size:var(--al-fs-xs); line-height:var(--al-lh-tight);
  color:var(--al-text-dim); margin:var(--al-sp-2) 0 0; max-width:var(--al-measure-lede);
}
.albb-p2d__note:empty{ display:none; }

/* ---------- the pair: strap (portrait 3:4) + buckle (square) ---------- */
.albb-p2d__pair{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--al-gap); align-items:start;
}
@media (max-width:639px){ .albb-p2d__pair{ grid-template-columns:minmax(0,1fr); } }
.albb-p2d__fig{ margin:0; min-width:0; }
/* .al-card .al-well strips the frame; the card here wants the well framed */
.albb-p2d .al-well{ border:var(--al-border); border-radius:var(--al-r-card); }
.albb-p2d__well{ width:100%; }
.albb-p2d__well--strap{ --al-ratio:3 / 4; }
.albb-p2d__well--buckle{ --al-ratio:1 / 1; }
/* a vertical strip photo: crop the white studio margins, keep the whole strap height */
.albb-p2d__well--band img{ object-fit:cover; }
/* keyed cut-out or a PNG with real alpha: the dark ground so silver and stone read */
.albb-p2d__well--dark{
  background:var(--al-ground-2); padding:var(--al-plate-pad);
  display:flex; align-items:center; justify-content:center;
}
.albb-p2d__well--dark img, .albb-p2d__well canvas{
  display:block; width:100%; height:100%; object-fit:contain; object-position:center;
}
.albb-p2d__well img{ transform:none; } /* no hover zoom on a measurement photo */
.albb-p2d__well--empty{
  border-style:dashed; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:var(--al-sp-5);
  font-family:var(--al-font-util); font-weight:600; font-size:var(--al-fs-u-xs);
  letter-spacing:var(--al-ls-u-xs); text-transform:uppercase; color:var(--al-text-dim);
}
.albb-p2d__well--empty::after{ content:none; }

/* skeleton shimmer (brass tint); static under reduced motion */
.albb-p2d__shimmer{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background-color:var(--al-surface-2);
  background-image:linear-gradient(100deg, transparent 25%, var(--al-brass-tint) 50%, transparent 75%);
  background-size:220% 100%;
  animation:albb-p2d-shimmer 1.4s var(--al-ease) infinite;
  transition:opacity var(--al-t) var(--al-ease);
}
.is-loading > .albb-p2d__shimmer{ opacity:1; }
@keyframes albb-p2d-shimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
.is-skeleton{ color:transparent !important; background:var(--al-surface-2) !important; border-radius:var(--al-r-sm); }
.is-skeleton *{ visibility:hidden; }

/* image-error fallback: text + product-page link, on the plate */
.albb-p2d__err{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--al-sp-2); text-align:center;
  padding:var(--al-sp-5); background:var(--al-surface-1); color:var(--al-text-mid);
  font-size:var(--al-fs-xs); line-height:var(--al-lh-tight);
}
.albb-p2d__err[hidden]{ display:none; }

/* width rule — the chosen buckle end and the belt body at the photo's own scale */
.albb-p2d__rule{
  position:absolute; left:var(--al-plate-pad); right:var(--al-plate-pad); bottom:var(--al-sp-3);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:var(--al-sp-1);
  pointer-events:none;
}
.albb-p2d__rule[hidden]{ display:none; }
.albb-p2d__rule-body{ height:2px; background:var(--al-brass-500); border-radius:var(--al-r-pill); opacity:.9; }
.albb-p2d__rule-end{ height:4px; background:var(--al-brass-300); border-radius:var(--al-r-pill); box-shadow:0 0 0 2px var(--al-plate); }
.albb-p2d__rule-label{
  font-family:var(--al-font-util); font-weight:600; font-size:var(--al-fs-u-xs);
  letter-spacing:var(--al-ls-u-xs); text-transform:uppercase; line-height:1.4;
  color:var(--al-text-inverse); background:var(--al-plate);
  padding:2px 8px; border-radius:var(--al-r-sm); text-align:center;
}

/* captions under each photo */
.albb-p2d__cap,
body.theme-rocket-wc-master figcaption.albb-p2d__cap{
  margin:var(--al-sp-3) 0 0; font-size:var(--al-fs-sm); line-height:var(--al-lh-tight); color:var(--al-text-mid);
}
.albb-p2d__cap strong, body.theme-rocket-wc-master .albb-p2d__cap strong{ color:var(--al-text-hi); font-weight:600; }
.albb-p2d__cap-price{
  font-family:var(--al-font-util); font-weight:600; color:var(--al-brass-300);
  font-feature-settings:"tnum"; white-space:nowrap; margin-left:var(--al-sp-2);
}
.albb-p2d__cap-sub{ display:block; font-size:var(--al-fs-xs); color:var(--al-text-dim); margin-top:var(--al-sp-1); }
.albb-p2d__cap-sub:empty{ display:none; }
.albb-p2d__warn, body.theme-rocket-wc-master .albb-p2d__warn{ color:var(--al-warn); }
.albb-p2d .al-badge{ vertical-align:middle; margin-left:var(--al-sp-2); }

/* the detail rows (skin's .al-dl recipe) */
.albb-p2d__dl{ margin:var(--al-sp-5) 0 0; gap:var(--al-sp-3); }
.albb-p2d__dl .al-dl__row{ grid-template-columns:96px minmax(0,1fr); }
.albb-p2d__dl dd{ font-size:var(--al-fs-sm); }

/* price block: two real line prices and their sum, no bundle price */
.albb-p2d__price{
  margin-top:var(--al-sp-5); padding-top:var(--al-sp-4); border-top:var(--al-border-hair);
  display:grid; gap:var(--al-sp-2);
}
.albb-p2d__line{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--al-sp-4);
  font-size:var(--al-fs-sm); line-height:var(--al-lh-tight); color:var(--al-text-mid); margin:0;
}
.albb-p2d__line > span:last-child{
  font-family:var(--al-font-util); font-weight:600; color:var(--al-brass-300);
  font-feature-settings:"tnum"; white-space:nowrap;
}
.albb-p2d__line--total{
  margin-top:var(--al-sp-1); padding-top:var(--al-sp-2); border-top:var(--al-border-hair);
  font-family:var(--al-font-util); font-weight:600; font-size:var(--al-fs-u-sm);
  letter-spacing:var(--al-ls-u-sm); text-transform:uppercase; color:var(--al-text-hi);
}
.albb-p2d__line--total > span:last-child{ font-size:var(--al-fs-d4); letter-spacing:0; }
.albb-p2d__two,
body.theme-rocket-wc-master p.albb-p2d__two{ font-size:var(--al-fs-xs); line-height:var(--al-lh-tight); color:var(--al-text-dim); margin:0; }

/* actions: the builder owns the page's one gold CTA; the card's own button is ghost */
.albb-p2d__actions{ margin-top:var(--al-sp-5); }
.albb-p2d__actions:empty{ display:none; }
.albb-p2d__actions .al-btn{ min-height:44px; }
.albb-p2d__actions .al-btn[disabled]{ opacity:.6; cursor:progress; }

/* footnote (Chivo uppercase utility) */
.albb-p2d__fine,
body.theme-rocket-wc-master p.albb-p2d__fine{
  margin:var(--al-sp-5) 0 0; font-family:var(--al-font-util); font-weight:500;
  font-size:var(--al-fs-u-xs); letter-spacing:var(--al-ls-u-xs); text-transform:uppercase;
  line-height:1.6; color:var(--al-text-dim);
}

/* ---------- summary mode: two small plates + the lines ---------- */
.albb-p2d[data-mode="summary"]{
  padding:var(--al-sp-4);
  display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:var(--al-sp-4); align-items:center;
}
.albb-p2d[data-mode="summary"] .albb-p2d__head,
.albb-p2d[data-mode="summary"] .albb-p2d__dl,
.albb-p2d[data-mode="summary"] .albb-p2d__fine,
.albb-p2d[data-mode="summary"] .albb-p2d__actions,
.albb-p2d[data-mode="summary"] .albb-p2d__cap,
.albb-p2d[data-mode="summary"] .albb-p2d__rule,
.albb-p2d[data-mode="summary"] .albb-p2d__two,
.albb-p2d[data-mode="summary"] .albb-p2d__reason{ display:none; }
.albb-p2d[data-mode="summary"] .albb-p2d__pair{ display:contents; }
.albb-p2d[data-mode="summary"] .albb-p2d__well{
  width:88px; --al-ratio:1 / 1; --al-plate-pad:8px; border-radius:var(--al-r-ctrl);
}
.albb-p2d[data-mode="summary"] .albb-p2d__well--empty{ padding:var(--al-sp-2); font-size:var(--al-fs-u-xs); }
.albb-p2d[data-mode="summary"] .albb-p2d__err{ padding:var(--al-sp-2); font-size:var(--al-fs-u-xs); }
.albb-p2d[data-mode="summary"] .albb-p2d__err a{ display:none; }
.albb-p2d[data-mode="summary"] .albb-p2d__price{ margin:0; padding:0; border:0; gap:var(--al-sp-1); }
.albb-p2d[data-mode="summary"] .albb-p2d__line{ font-size:var(--al-fs-xs); }
.albb-p2d[data-mode="summary"] .albb-p2d__line--total > span:last-child{ font-size:var(--al-fs-d4); }
@media (max-width:479px){
  .albb-p2d[data-mode="summary"]{ grid-template-columns:auto auto; }
  .albb-p2d[data-mode="summary"] .albb-p2d__price{ grid-column:1 / -1; }
}

/* ---------- reduced motion: no shimmer sweep, no transitions ---------- */
@media (prefers-reduced-motion: reduce){
  .albb-p2d__shimmer{ animation:none; background-image:none; transition:none; }
  .albb-p2d__well img{ transition:none; }
}
@media (forced-colors: active){
  .albb-p2d__rule-end, .albb-p2d__rule-body{ background:CanvasText; }
}
@media print{
  .albb-p2d{ background:transparent; color:CanvasText; }
  .albb-p2d__actions, .albb-p2d__shimmer{ display:none !important; }
}