/* ============================================================================
   styles.css — the preview's own layer, and nothing more.

   The product page itself is the theme's real one: components/product-page.njk
   (.t-pdp…) styled by assets/shop-pdp.css, inside the normal header and footer.
   This file adds only the few pieces the link-input flow needs, all built on
   the theme tokens (--t-*) rather than a second palette.
   ========================================================================== */

/* --- skip link: offscreen until focused --- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--t-radius-btn);
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-weight: 800;
}
.skip:focus { left: 12px; top: 12px; }

.mono { font-family: var(--t-font-mono); }

/* shop-pdp.css gives .t-pdp-field display:flex, which beats the [hidden]
   attribute. The state panels in the buy card depend on [hidden]. */
.t-pdp-field[hidden] { display: none; }
.t-pdp-card--buy [hidden] { display: none !important; }
.t-pdp-acc-body[hidden] { display: none; }
.t-pdp-acc-head svg { transition: transform .2s var(--t-ease); }
.t-pdp-acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }

/* --- the branded placeholder in the media slot ---
   There is no decoration artwork in the repo and the live theme ships no image
   files, so the real logo sits on the theme's own media gradient. Nothing here
   pretends to be a picture of a specific decoration. */
.t-pdp-media img.t-pdp-media-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 30px rgba(var(--t-accent-rgb), 0.45);
  margin-bottom: 4px;
}

/* --- the link field, in the slot the variant picker normally occupies --- */
.t-pdp-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--t-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--t-text);
  font: inherit;
  font-weight: 600;
}
.t-pdp-input::placeholder { color: var(--t-faint); }
.t-pdp-input:focus-visible { border-color: var(--t-accent); }
.t-pdp-input[aria-invalid="true"] { border-color: #ff7a90; }

.t-pdp-help { margin: 0; color: var(--t-faint); font-size: 0.82rem; font-weight: 600; }
.t-pdp-live-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-accent-rgb), 0.4);
  background: rgba(var(--t-accent-rgb), 0.1);
  color: var(--t-text);
  font-size: 0.86rem;
  font-weight: 700;
}
.t-pdp-live-note[hidden] { display: none; }
.t-pdp-add[hidden] { display: none; }
.t-pdp-note[hidden] { display: none; }

/* The verified desktop steps, inside the help accordion. */
.decos-howto { margin: 10px 0 12px; padding-left: 18px; color: var(--t-muted); }
.decos-howto li { margin-bottom: 6px; }
.decos-howto b { color: var(--t-text); }

/* The customer's order, once one exists. */
.decos-order { margin-top: 16px; }
.decos-order[hidden] { display: none; }
.decos-order__state { margin: 8px 0 10px; color: var(--t-text); font-weight: 700; }
.decos-order__gift { margin: 0 0 12px; }
.decos-order__gift[hidden] { display: none; }
.decos-order__permalink { margin: 4px 0 12px; word-break: break-all; }
.decos-order__permalink a { color: var(--t-accent); font-weight: 700; font-size: 0.86rem; }
.t-pdp-quote-name {
  margin: 0;
  color: var(--t-text);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* --- progress --- */
.t-pdp-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.t-pdp-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--t-accent), var(--t-accent-hover));
  transition: width 280ms var(--t-ease);
}
.t-pdp-bar i[data-done="1"] { background: linear-gradient(90deg, var(--t-green), #6ee7a8); }

/* --- delivered --- */
.t-pdp-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-pdp-codes li {
  font-family: var(--t-font-mono);
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed var(--t-border-hover);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--t-muted);
  word-break: break-all;
}
.t-pdp-code-note { margin: 0; color: var(--t-star); font-size: 0.82rem; font-weight: 600; }

/* --- notices --- */
.t-pdp-notice { min-height: 0; margin: 0; font-weight: 700; }
.t-pdp-notice:empty { display: none; }
.t-pdp-notice[data-kind="error"] { color: #ff8fa3; }
.t-pdp-notice[data-kind="ok"] { color: var(--t-green); }

/* The buy card's note is the demo disclosure; keep it small and visible. */
.t-pdp-card--buy .t-pdp-note { display: flex; margin-top: 16px; }

/* === DECOS link input (staged Phase 1). Append to assets/custom.css.

   Everything here is scoped to [data-decos-root], the buy card the Decos
   product page renders instead of the variant picker. It reuses shop-pdp.css
   classes (.t-pdp-form, .t-pdp-field, .t-pdp-label, .t-pdp-add,
   .t-pdp-checkout) and builds on the theme tokens (--t-*), so it inherits a
   theme update and cannot leak into any other product page.

   Safe to remove as one block. === */
[data-decos-root] .t-pdp-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--t-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--t-text);
  font: inherit;
  font-weight: 600;
}
[data-decos-root] .t-pdp-input::placeholder { color: var(--t-faint); }
[data-decos-root] .t-pdp-input:focus-visible { border-color: var(--t-accent); }

/* shop-pdp.css gives .t-pdp-field display:flex, which beats [hidden]. The
   four state panels depend on [hidden], so it is restored here. */
[data-decos-root] .t-pdp-field[hidden] { display: none; }
[data-decos-root] [hidden] { display: none !important; }

[data-decos-root] .t-pdp-help { margin: 0; color: var(--t-faint); font-size: 0.82rem; font-weight: 600; }
[data-decos-root] .t-pdp-live-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-accent-rgb), 0.4);
  background: rgba(var(--t-accent-rgb), 0.1);
  color: var(--t-text);
  font-size: 0.86rem;
  font-weight: 700;
}
[data-decos-root] .t-pdp-live-note[hidden] { display: none; }
[data-decos-root] .t-pdp-quote-name {
  margin: 0;
  color: var(--t-text);
  font-size: 0.92rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

[data-decos-root] .t-pdp-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
[data-decos-root] .t-pdp-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--t-accent), var(--t-accent-hover));
  transition: width 280ms var(--t-ease);
}
[data-decos-root] .t-pdp-bar i[data-done="1"] { background: var(--t-green); }

[data-decos-root] .t-pdp-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
[data-decos-root] .t-pdp-codes li {
  font-family: var(--t-font-mono);
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed var(--t-border-hover);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--t-muted);
  word-break: break-all;
}
[data-decos-root] .t-pdp-code-note { margin: 0; color: var(--t-star); font-size: 0.82rem; font-weight: 600; }

[data-decos-root] .t-pdp-notice { min-height: 0; margin: 0; font-weight: 700; }
[data-decos-root] .t-pdp-notice:empty { display: none; }
[data-decos-root] .t-pdp-notice[data-kind="error"] { color: var(--t-star); }
[data-decos-root] .t-pdp-notice[data-kind="ok"] { color: var(--t-green); }

/* The disclosure stays small but visible under the buttons. */
[data-decos-root] .t-pdp-note { display: flex; margin-top: 16px; }

/* The verified desktop steps, inside the help accordion. */
[data-decos-root] .decos-howto { margin: 10px 0 12px; padding-left: 18px; color: var(--t-muted); }
[data-decos-root] .decos-howto li { margin-bottom: 6px; }
[data-decos-root] .decos-howto b { color: var(--t-text); }

/* The customer's order, once one exists. */
[data-decos-order] { margin-top: 16px; }
[data-decos-order][hidden] { display: none; }
[data-decos-order] .decos-order__state { margin: 8px 0 10px; color: var(--t-text); font-weight: 700; }
[data-decos-order] .decos-order__gift { margin: 0 0 12px; }
[data-decos-order] .decos-order__gift[hidden] { display: none; }
[data-decos-order] .decos-order__permalink { margin: 4px 0 12px; word-break: break-all; }
[data-decos-order] .decos-order__permalink a { color: var(--t-accent); font-weight: 700; font-size: 0.86rem; }
/* === end DECOS === */

/* Keep inactive controls hidden even where the theme uses display:flex. */
[data-decos-order] [hidden], #order-panel [hidden] { display: none !important; }
[data-decos-root] .decos-link-help { font-size: .86rem; color: var(--t-muted); }
[data-decos-root] .decos-link-help summary { cursor: pointer; color: var(--t-text); font-weight: 700; }
[data-decos-root] .decos-link-help ol { padding-left: 20px; margin: 12px 0; }
[data-decos-root] .decos-link-help li { margin-bottom: 8px; line-height: 1.5; }
[data-decos-order] .t-pdp-help { display: block; line-height: 1.5; margin: 10px 0; }
[data-decos-order] .t-pdp-checkout { margin-top: 8px; }

[data-decos-root] .t-pdp-help { color: var(--t-muted); line-height: 1.5; }

/* Gift delivery becomes the primary view after payment. */
.decos-delivery-page { max-width: 720px; margin: 36px auto 80px; }
.decos-delivery-card { padding: clamp(24px, 5vw, 48px); }
.decos-delivery-eyebrow { margin: 0 0 12px; color: var(--t-accent); font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.decos-delivery-heading { margin: 0 0 12px; font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.15; color: var(--t-text); font-weight: 800; }
.decos-delivery-meta { margin: 0 0 28px; color: var(--t-muted); font-size: .95rem; }
.decos-gift-label { display: block; margin: 24px 0 10px; color: var(--t-text); font-weight: 700; font-size: .9rem; }
.decos-gift-link-row { display: flex; gap: 10px; align-items: stretch; }
.decos-gift-link { width: 100%; min-width: 0; flex: 1; border: 1px solid var(--t-border); border-radius: 10px; background: var(--t-bg); color: var(--t-text); padding: 14px; font: inherit; font-size: .9rem; }
.decos-gift-copy { flex: 0 0 auto; min-height: 48px; padding: 12px 18px; }
.decos-claim { display: flex; width: 100%; margin-top: 24px; min-height: 54px; justify-content: center; align-items: center; font-size: 1rem; }
.decos-claim-help { margin: 14px 0 0; color: var(--t-muted); line-height: 1.6; font-size: .9rem; }
.decos-copy-feedback { color: var(--t-muted); font-size: .85rem; margin: 8px 0 0; }
.decos-copy-feedback:empty { display: none; }
.decos-delivery-private { margin: 28px 0 0; color: var(--t-faint); font-size: .8rem; line-height: 1.5; }
.decos-delivery-help { margin: 24px 0 0; color: var(--t-muted); font-size: .88rem; line-height: 1.6; }
.decos-delivery-help summary { cursor: pointer; font-weight: 600; }
.decos-delivery-help a { color: var(--t-accent); }
[data-decos-delivery-focus].t-pdp-grid { display: block; max-width: 720px; margin: 32px auto 64px; }
[data-decos-delivery-focus] > .t-pdp-main,
[data-decos-delivery-focus] .t-pdp-card--info { display: none; }
[data-decos-delivery-focus] > .t-pdp-rail { position: static; width: 100%; max-width: none; }
[data-decos-delivery-focus] [data-decos-order] { margin: 0; padding: 12px; border: 0; background: transparent; box-shadow: none; scroll-margin-top: 100px; }
[data-decos-root][hidden] { display: none !important; }
@media (max-width: 480px) {
  .decos-delivery-page { margin-top: 20px; }
  .decos-gift-link-row { flex-direction: column; }
  .decos-gift-copy { width: 100%; }
  .decos-gift-link { font-size: 16px; }
}

/* Explain automatic delivery beside the first action. */
[data-decos-root] .decos-auto-intro { margin-bottom: 8px; }
[data-decos-root] .decos-auto-intro strong { display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(var(--t-accent-rgb), .14); color: var(--t-text); font-size: .9rem; font-weight: 800; }
[data-decos-root] .decos-auto-intro p { color: var(--t-muted); font-size: .86rem; line-height: 1.6; margin: 12px 0 0; }

/* Match the shop's structured product descriptions, scoped to decorations. */
.t-pdp-prose .decos-description-title { font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.25; margin: 0 0 26px; font-weight: 800; letter-spacing: -.025em; }
.t-pdp-prose .decos-description h3 { font-size: 1.1rem; margin-top: 30px; margin-bottom: 8px; }
.t-pdp-prose .decos-description ol li { margin-bottom: 12px; }
.t-pdp-prose .decos-description hr { margin-top: 26px; }
.t-pdp-prose .decos-description hr + h3 { margin-top: 0; }

/* Redemption terms stay visible before payment and beside the delivered gift. */
.decos-redemption-notice { display: block; padding: 14px 16px; margin: 20px 0; border: 1px solid var(--t-star); border-left-width: 3px; border-radius: 10px; background: rgba(255,255,255,.025); }
.decos-redemption-notice strong { display: block; color: var(--t-star); font-size: .94rem; font-weight: 800; }
.decos-redemption-notice p { color: var(--t-text); margin: 6px 0 0 !important; font-size: .85rem; line-height: 1.6; }