/* Dust & Stardust · 2026-11-15 (owner's decisions before opening)
   1. "Sold out": every piece is sold out for now (js/products.js "soldOut": true). A small script note in a corner of the photo,
      in the site's handwriting accent (Princess Sofia), sepia/rose ink with a tiny gilt star. The photo is never dimmed or greyed.
      Shop cards (.sh-frame) and the product page main image (.pd-main .gf). The product page button turns into a quiet,
      non-clickable "Sold out" in the same ink.
   2. "Coming soon": the Locket Bag and Theatre Bag pages (crowdfunding first). Every picture inside their gilt frames is the closed
      stage curtain (img/coming-soon/curtain.webp, 900x1200), object-fit cover centred on the curtain, with "Coming soon" written
      over it in Princess Sofia (HTML text, so it stays sharp and translatable). Also used on the two Shop feature cards.
   Loaded by shop.html, product.html, locket.html, theatre-bag.html, custom.html (and their /ko/ copies). */

:root { --so-ink: #9a6a62; --so-sepia: #4a3a2e; --so-gold: #b4935a; --so-paper: 251, 247, 239; }

/* ---------- 1. Sold out ---------- */
.so-mark {
  position: absolute; z-index: 6; pointer-events: none;
  right: 12%; bottom: 10.5%;
  display: inline-flex; align-items: baseline; gap: .32em;
  padding: .32em .78em .42em;
  font-family: var(--hand, "Princess Sofia"), "Princess Sofia", cursive !important;
  font-size: clamp(15px, 1.22vw, 18px); font-weight: 400; font-style: normal; line-height: 1;
  letter-spacing: .01em; text-transform: none; white-space: nowrap;
  color: var(--so-ink);
  /* a soft paper glow, not a badge: legible on any photo, no edge, no fill colour */
  background: radial-gradient(closest-side, rgba(var(--so-paper), .94), rgba(var(--so-paper), .82) 55%, rgba(var(--so-paper), 0));
  text-shadow: 0 0 6px rgba(var(--so-paper), .9);
  transform: rotate(-5deg); transform-origin: 100% 100%;
}
.so-mark::before { content: "\2726"; font-family: Georgia, "Times New Roman", serif; font-size: .62em; color: #a8864e; transform: translateY(-.42em); }
/* the corner of each frame shape (photo insets from css/shop.css / css/frame.css) */
.sh-arch .so-mark, .gf.arch .so-mark { right: 11%; bottom: 8.6%; }
.sh-oval .so-mark, .gf.oval .so-mark { right: 21%; bottom: 17%; }
.pd-main .so-mark { font-size: clamp(17px, 1.5vw, 22px); }
/* the hang look (prints on a line, ?look=hang): photo insets are 4.2% 5.2% 5.6% 5.2% */
:root:not([data-look="frame"]) .sh-frame .so-mark, :root:not([data-look="frame"]) .pd-main .so-mark { right: 8%; bottom: 8%; }

/* product page: the add-to-cart button becomes a quiet note in the same ink (not clickable, not grey) */
.pd-add.is-soldout, .pd-add.is-soldout:hover, .pd-add.is-soldout:disabled {
  background: transparent !important; color: var(--so-ink) !important; box-shadow: none !important; transform: none !important;
  border: 1px solid rgba(180, 147, 90, .55) !important; cursor: default; opacity: 1 !important;
  font-family: var(--hand, "Princess Sofia"), "Princess Sofia", cursive !important; font-size: 25px !important; font-weight: 400 !important;
  letter-spacing: .01em !important; text-transform: none !important; line-height: 1.1;
}
.pd-add.is-soldout::before { content: "\2726"; font-family: Georgia, serif; font-size: .45em; color: var(--so-gold); margin-right: .5em; vertical-align: .45em; }
.pd-soldout-note { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--so-sepia); text-align: center; }
.pd-soldout-note a { color: var(--so-ink); font-weight: 700; }
.pd-making { margin-top: 10px; }

/* custom.html: the rush-order line under the letter's signature */
.letter-rush { margin: 10px 0 0; text-align: center; font-size: 15px; line-height: 1.55; color: var(--ink-soft, #7a6a5c); }
.letter-rush a { color: var(--so-ink); font-weight: 700; }

/* ---------- 2. Coming soon (curtain) ---------- */
.cs-curtain { position: relative; display: block; overflow: hidden; background: #f3e6d6; }
.cs-curtain > img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 52%; }
.cs-over {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); z-index: 2; margin: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: .18em; width: max-content; max-width: 92%; text-align: center;
}
.cs-over .cs-word {
  font-family: var(--hand, "Princess Sofia"), "Princess Sofia", cursive !important; font-weight: 400; font-style: normal;
  font-size: clamp(30px, 4.2vw, 58px); line-height: 1.05; letter-spacing: .01em; text-transform: none; white-space: nowrap;
  color: #fff8ec;
  text-shadow: 0 1px 1px rgba(74, 58, 46, .55), 0 0 14px rgba(74, 58, 46, .45), 0 0 34px rgba(74, 58, 46, .25);
}
html[lang="en"] .cs-over .cs-ko { display: none; } /* the small Korean line (곧 공개됩니다) shows on /ko/ pages only */
.cs-over .cs-ko { font-family: var(--ko-font, "Gowun Batang"), serif; font-size: clamp(13px, 1.15vw, 16px); letter-spacing: .08em; color: #fff8ec; text-shadow: 0 1px 2px rgba(74, 58, 46, .7), 0 0 10px rgba(74, 58, 46, .45); }
.cs-over .cs-word::before, .cs-over .cs-word::after { content: "\2726"; font-family: Georgia, serif; font-size: .3em; vertical-align: .9em; margin: 0 .55em; color: #f6e7c8; }
/* sizes inside smaller frames */
.sh-feature .cs-over .cs-word { font-size: clamp(19px, 1.65vw, 25px); }
.sh-feature .cs-over .cs-word::before, .sh-feature .cs-over .cs-word::after { margin: 0 .4em; }

/* the curtain fills each frame shape: .gf photo windows already have their own shape; the .gilt frames keep the old picture's ratio */
.gf-photo > .cs-curtain, .sh-photo > .cs-curtain { position: absolute; inset: 0; width: 100%; height: 100%; }
.lh-art .gilt > .gilt-in.cs-curtain { aspect-ratio: 718 / 478; }

/* the Locket / Theatre pages while closed: one hero, centred, nothing to order */
.cs-page .lh { min-height: 62vh; display: flex; align-items: center; }
.cs-page .lh > .wrap { flex: 0 1 auto; } /* keeps .wrap's own width + auto margins inside the flex row */
.cs-page .lh-copy .cs-line { font-size: 19px; line-height: 1.6; color: var(--ink-m, #5a4a3e); margin: 0 0 22px; }
.cs-page .lh-copy .cs-line a { font-weight: 700; color: var(--so-ink); text-decoration: none; border-bottom: 1px solid rgba(154, 106, 98, .35); }
.cs-page .lh-copy .cs-ko-line { font-size: 15px; color: var(--so-ink); margin: -12px 0 22px; }
.cs-page .lh-art .gf { margin-inline: auto; }
@media (max-width: 760px) {
  .cs-page .lh { min-height: 0; }
  .cs-over .cs-word { font-size: clamp(30px, 9vw, 44px); }
  .so-mark { font-size: 15px; }
  .pd-main .so-mark { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .so-mark { transform: none; } }