/* "Our Song" customizer (inc/our-song.php + assets/js/our-song.js).
   Phone: sticky live hoodie on top, one question below, one big button fixed
   above the tab bar. Desktop: hoodie left, questions right.
   The preview is the owner's hoodie photo (840x1050 scene) with the print card
   drawn on it in card units (cover = 100 px) through a homography; the card's
   sizes come from skrnd_os_card(), shared with the PDF. */

.skrnd-os-product { display: block !important; }
/* the real form.cart stays hidden: style.css gives `div.product form.cart` display:flex, which beats [hidden] */
.woocommerce div.product form.cart.os-form, .os-form[hidden] { display: none !important; }
.os-app {
  --os-card: var(--skrnd-surface);
  --os-stage: #e6e1d7;
  --os-line: #d6d0c4;
  --os-warn: #9a4b12;
  --os-ar: "SKRND Arabic";
  display: grid; gap: 14px; padding-bottom: 24px;
}
@media (min-width: 900px) { .os-app { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; } }

/* live preview: the owner's photo, cropped by --cx/--cy/--cw/--ch (scene px;
   our-song.js reads the same values to place the ink layer) */
.os-stage { position: sticky; top: var(--skrnd-header-h); z-index: 5; background: var(--skrnd-bg); padding-block: 4px 8px; }
.os-photo { --cx: 28; --cy: 80; --cw: 800; --ch: 800; position: relative; overflow: hidden; isolation: isolate; aspect-ratio: var(--cw) / var(--ch); width: min(100%, clamp(240px, 38vh, 400px)); margin-inline: auto; border-radius: 22px; background: #6f6c69; }
@media (min-width: 900px) {
  .os-stage { top: calc(var(--skrnd-header-h) + 16px); }
  .os-photo { --cx: 0; --cy: 0; --cw: 840; --ch: 1050; width: min(100%, 540px); }
}
.os-shirt { position: absolute; max-width: none; height: auto; width: calc(84000% / var(--cw)); left: calc(var(--cx) * -100% / var(--cw)); top: calc(var(--cy) * -100% / var(--ch)); user-select: none; -webkit-user-drag: none; }
.os-ink { position: absolute; left: 0; top: 0; width: 840px; height: 1050px; transform-origin: 0 0; visibility: hidden; pointer-events: none; }
.os-photo.os-ready .os-ink { visibility: visible; }
/* phones + tablets (owner, 2026-10-08): once the preview sticks under the
   header it shrinks WITH the scroll, 1px per px, down to half size. Only
   transforms change (no layout), so its bottom edge rises exactly as fast as
   the questions below and they stay attached until it is half size; after that
   they slide under it. The page-coloured band behind it (::before) shortens by
   the same amount (--os-cut), and only the band + photo take taps, so the
   questions showing below stay tappable. Driven by our-song.js. */
@media (max-width: 899px) {
  .os-stage { background: none; pointer-events: none; }
  .os-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--skrnd-bg); transform: translateY(calc(var(--os-cut, 0) * -1px)); pointer-events: auto; }
  .os-photo { transform-origin: 50% 0; transform: scale(var(--os-s, 1)); pointer-events: auto; }
  .os-tag { opacity: calc((var(--os-s, 1) - .75) * 4); }
  /* room under each question, so the footer doesn't sit right under the search box */
  .os-step { min-height: max(320px, 46vh); }
}
/* light garments: the ink takes the fabric's light and folds; dark garments:
   white ink, dimmed where the fabric is in shadow (alpha map from the photo) */
.os-photo:not(.is-dark) .os-ink { mix-blend-mode: multiply; }
.os-photo.is-dark .os-ink { -webkit-mask: url(../img/our-song/ink-shade.png) 36px 228px / 832px 768px no-repeat; mask: url(../img/our-song/ink-shade.png) 36px 228px / 832px 768px no-repeat; }
.os-tag { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: 99px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* the print card, in card units (px): sizes = skrnd_os_card() */
.os-card, .os-meas { font-family: "SKRND Inter", var(--os-ar), sans-serif; font-kerning: normal; font-feature-settings: "calt" 0; font-synthesis: none; }
.os-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: var(--ink, #fff); text-align: left; }
.os-card[dir="rtl"] { text-align: right; }
.os-card .c-head { display: flex; align-items: center; gap: 24px; }
.os-card .c-cover { flex: none; width: 100px; height: 100px; border-radius: 5px; background: #8d8d8d center / cover no-repeat; }
.os-card .c-cover.none { display: none; }
.os-card .c-meta { min-width: 0; margin-top: -.77px; }
.os-card .c-title { color: var(--title, currentColor); font-weight: 700; }
.os-card .c-artist { font-weight: 600; margin-top: 5.53px; }
.os-card .c-artist:empty { display: none; }
.os-card .c-lines { font-weight: 700; margin-top: 15.44px; }
.os-card .c-lines.empty { opacity: .5; }
.os-card .c-title > div, .os-card .c-artist > div, .os-card .c-lines > div { white-space: nowrap; unicode-bidi: plaintext; }
.os-meas { position: absolute; left: -9999px; top: 0; font-size: 100px; line-height: 1; white-space: pre; visibility: hidden; pointer-events: none; }

/* steps */
.os-panel { min-width: 0; }
.os-panel .product_title { margin-bottom: 10px; }
/* same-design offer (owner, 2026-10-08) */
.os-offer { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 9px 12px; border-radius: 12px; background: var(--os-card); border: 1px dashed var(--os-line); font-size: 14px; font-weight: 700; line-height: 1.35; }
.os-offer svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--skrnd-sale); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.os-offer b, .os-pair b { color: var(--skrnd-sale); font-weight: 900; }
.os-pair { margin: -4px 0 14px; }
.os-pair-add { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 52px; padding: 0 16px; border-radius: 16px; border: 2px dashed var(--os-line); background: var(--os-card); font-size: 16px; font-weight: 800; cursor: pointer; }
.os-pair-box { padding: 14px; border-radius: 18px; border: 2px solid var(--skrnd-ink); background: var(--os-card); }
.os-pair-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-weight: 800; font-size: 16px; }
.os-pair-head .os-link { padding: 0; font-size: 14px; }
.os-colours--sm { gap: 8px 4px; margin-bottom: 12px; }
.os-colours--sm .os-sw { font-size: 11.5px; }
.os-colours--sm .os-sw i { width: 34px; height: 34px; }
.os-sizes--sm { gap: 6px; }
.os-sizes--sm .os-sz { height: 42px; border-radius: 12px; font-size: 15px; }
/* milestones: a track joins the four dots; each li draws the segment from the
   previous dot to its own (::before), filled once that milestone is reached.
   Done = filled dot + check, current = ring + halo, todo = grey. */
.os-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 18px; list-style: none; padding: 0; }
.os-steps li { position: relative; }
.os-steps li + li::before { content: ""; position: absolute; top: 25px; right: 50%; width: 100%; height: 3px; border-radius: 3px; background: var(--os-line); transition: background-color .3s; }
.os-steps li.done::before, .os-steps li.current::before { background: var(--skrnd-ink); }
.os-steps button { position: relative; z-index: 1; width: 100%; display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 5px 2px; color: var(--skrnd-muted); font: 800 13px/1.2 var(--skrnd-font); cursor: pointer; }
.os-steps .dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--os-line); background: var(--os-card); transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s; }
.os-steps svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.os-steps .done button, .os-steps .current button { color: var(--skrnd-ink); }
.os-steps .done .dot { border-color: var(--skrnd-ink); background: var(--skrnd-ink); color: var(--skrnd-bg); }
.os-steps .done svg { stroke-width: 2.8; }
.os-steps .current .dot { border-color: var(--skrnd-ink); background: var(--os-card); color: var(--skrnd-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--skrnd-ink) 12%, transparent); }

.os-step h2 { font-size: clamp(20px, 5vw, 26px); line-height: 1.1; margin: 0 0 6px; font-weight: 900; letter-spacing: -.01em; text-transform: none; text-wrap: balance; }
.os-hint { margin: 0 0 16px; color: var(--skrnd-muted); font-size: 16px; }
.os-app button, .os-app input, .os-app textarea { font-family: var(--skrnd-font), var(--os-ar), sans-serif; color: inherit; }
.os-app button:focus-visible, .os-app input:focus-visible, .os-app label:focus-within { outline: 3px solid var(--skrnd-cta); outline-offset: 2px; }

.os-search { position: relative; }
.os-search input { width: 100%; height: 60px; border-radius: 18px; border: 2px solid var(--os-line); background: var(--os-card); padding: 0 18px 0 54px; font-size: 18px; font-weight: 700; }
.os-search input:focus { border-color: var(--skrnd-ink); outline: none; }
.os-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; stroke: var(--skrnd-muted); fill: none; stroke-width: 2.4; }
.os-results { display: grid; gap: 10px; margin-top: 14px; }
.os-song { display: flex; align-items: center; gap: 14px; text-align: start; width: 100%; padding: 10px; border-radius: 18px; border: 2px solid var(--os-line); background: var(--os-card); min-height: 76px; cursor: pointer; }
.os-song .c { flex: none; width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, #bbb, #777) center / cover; }
.os-song .t { min-width: 0; }
.os-song b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.os-song .t span { color: var(--skrnd-muted); font-size: 15px; font-weight: 600; }
.os-song[aria-pressed="true"] { border-color: var(--skrnd-ink); box-shadow: inset 0 0 0 1px var(--skrnd-ink); }
.os-song .tick { margin-inline-start: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--skrnd-ink); color: var(--skrnd-bg); display: none; place-items: center; font-weight: 900; flex: none; }
.os-song[aria-pressed="true"] .tick { display: grid; }
.os-notfound { margin: 6px 0 0; }
.os-none { padding: 16px; border-radius: 18px; border: 2px dashed var(--os-line); display: grid; gap: 10px; }
.os-none .os-hint { margin: 0; }

.os-lyrics { display: grid; gap: 8px; }
.os-ly { width: 100%; text-align: start; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--os-line); background: var(--os-card); font-size: 18px; font-weight: 700; line-height: 1.3; unicode-bidi: plaintext; cursor: pointer; }
.os-ly[aria-pressed="true"] { background: var(--skrnd-ink); color: var(--skrnd-bg); border-color: var(--skrnd-ink); }
.os-counter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-weight: 800; flex-wrap: wrap; position: sticky; top: calc(var(--skrnd-header-h) + 4px); }
.os-pill { font-size: 14px; border-radius: 99px; padding: 5px 12px; background: var(--os-card); border: 1px solid var(--os-line); }
.os-link { background: none; border: 0; padding: 8px 0; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; font-size: 16px; cursor: pointer; }
.os-link[disabled] { opacity: .4; cursor: default; }
.os-app textarea { width: 100%; min-height: 128px; border-radius: 16px; border: 2px solid var(--skrnd-ink); background: var(--os-card); padding: 14px; font-size: 18px; font-weight: 700; line-height: 1.35; resize: vertical; unicode-bidi: plaintext; }
.os-chars { font-size: 14px; color: var(--skrnd-muted); text-align: end; margin-top: 4px; font-variant-numeric: tabular-nums; }
.os-note { color: var(--os-warn); font-weight: 700; font-size: 15px; min-height: 1.4em; margin: 8px 0; }
.os-note:empty { min-height: 0; margin: 0; }
.os-credit { margin-top: 14px; font-size: 13px; }

.os-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.os-tile { position: relative; display: grid; justify-items: center; gap: 10px; padding: 16px 10px; border-radius: 20px; border: 2px solid var(--os-line); background: var(--os-card); font-weight: 800; font-size: 17px; text-align: center; cursor: pointer; }
.os-tile .img { width: min(100%, 120px); aspect-ratio: 1; border-radius: 14px; background-size: cover; background-position: center; display: grid; place-items: center; }
.os-tile .img svg { width: 42px; height: 42px; stroke: var(--skrnd-muted); fill: none; stroke-width: 1.8; }
.os-tile.blank .img { border: 2px dashed var(--os-line); }
.os-tile[aria-pressed="true"] { border-color: var(--skrnd-ink); box-shadow: inset 0 0 0 1px var(--skrnd-ink); }
.os-tile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.os-lab { font-weight: 900; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--skrnd-muted); margin: 0 0 10px; }
.os-colours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; margin-bottom: 22px; }
.os-sw { display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 2px; font-size: 13px; font-weight: 700; color: var(--skrnd-muted); cursor: pointer; }
.os-sw i { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(0,0,0,.13); display: block; box-shadow: 0 0 0 3px var(--skrnd-bg), 0 0 0 4px transparent; }
.os-sw[aria-pressed="true"] { color: var(--skrnd-ink); }
.os-sw[aria-pressed="true"] i { box-shadow: 0 0 0 3px var(--skrnd-bg), 0 0 0 6px var(--skrnd-ink); }
.os-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.os-sz { height: 56px; border-radius: 16px; border: 2px solid var(--os-line); background: var(--os-card); font-size: 18px; font-weight: 900; cursor: pointer; }
.os-sz[aria-pressed="true"] { background: var(--skrnd-ink); color: var(--skrnd-bg); border-color: var(--skrnd-ink); }

/* one big button */
.os-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; background: color-mix(in srgb, var(--skrnd-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--os-line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.os-bar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.os-back { flex: none; width: 60px; height: 60px; border-radius: 18px; border: 2px solid var(--os-line); background: var(--os-card); display: grid; place-items: center; cursor: pointer; }
.os-back[hidden] { display: none; }
.os-back svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.os-next { flex: 1; height: 60px; border-radius: 18px; border: 0; background: var(--skrnd-ink); color: var(--skrnd-bg) !important; font-size: 19px; font-weight: 900; cursor: pointer; }
.os-next.os-buy { background: var(--skrnd-cta); color: #fff !important; }
.os-next[aria-disabled="true"] { opacity: .45; }
body.single-product:has(.os-app) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
  /* the site tab bar stays hidden on the customizer and slides in when the
     shopper scrolls up (html.os-tabbar-on, our-song.js); the Next bar rides on it */
  html:has(.os-app) .skrnd-tabbar { transform: translateY(105%); transition: transform .25s ease; }
  html.os-tabbar-on:has(.os-app) .skrnd-tabbar { transform: none; }
  .os-bar { transition: transform .25s ease; }
  html.os-tabbar-on .os-bar { transform: translateY(calc(-1 * var(--skrnd-tabbar-h))); }
  body.single-product:has(.os-app) { padding-bottom: calc(var(--skrnd-tabbar-h) + 96px + env(safe-area-inset-bottom)); }
  html:has(.os-app) #tidio-chat, html:has(.os-app) #skrnd-chat { display: none !important; }
}

/* "We will print exactly this" */
.os-sheet-bg { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.45); display: grid; align-items: end; justify-items: center; }
.os-sheet-bg[hidden] { display: none; }
.os-sheet { width: min(100%, 520px); background: var(--skrnd-bg); border-radius: 26px 26px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; overflow: auto; }
@media (min-width: 700px) { .os-sheet-bg { align-items: center; } .os-sheet { border-radius: 26px; } }
.os-sheet h2 { margin: 0 0 4px; font-size: 22px; font-weight: 900; text-transform: none; letter-spacing: 0; }
/* a copy of the live preview (our-song.js sheetPreview) */
.os-sheet-pv .os-photo { width: min(100%, 240px, 32vh); margin: 14px auto 0; border-radius: 16px; pointer-events: none; }
.os-sheet-pv .os-tag { display: none; }
.os-proof { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0; padding: 16px; background: var(--os-card); border-radius: 18px; border: 1px solid var(--os-line); font-size: 15px; }
.os-proof dt { color: var(--skrnd-muted); font-weight: 700; }
.os-proof dd { margin: 0; font-weight: 800; min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.os-row { display: flex; gap: 10px; flex-wrap: wrap; }
.os-row button { flex: 1 1 160px; height: 56px; border-radius: 16px; font-weight: 900; font-size: 17px; border: 2px solid var(--os-line); background: var(--os-card); cursor: pointer; }
.os-row .os-buy { background: var(--skrnd-cta); color: #fff; border-color: var(--skrnd-cta); }
.os-small { font-size: 13px; color: var(--skrnd-muted); margin: 10px 0 0; }
html.os-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .os-app * { transition: none !important; } }