/* multi demo store pop-up (inside the main site's dialog.tk-modal) */
.tkm-modal .tk-modal-inner{padding-bottom:0}
.tkm-h{margin:1.1rem 0 .5rem;font-size:1.05rem}
.tkm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.tkm-grid--sets{grid-template-columns:repeat(3,minmax(0,1fr))}
.tkm-card{position:relative;margin:0;padding:0;border:2px solid #e4ddd3;border-radius:14px;background:#fff;display:flex;flex-direction:column;overflow:hidden;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.tkm-card:hover{border-color:#b9ad9c}
.tkm-card:focus-visible{outline:3px solid #1f7a3d;outline-offset:2px}
.tkm-card.on{border-color:#1f7a3d;box-shadow:0 0 0 3px rgba(31,122,61,.18)}
.tkm-check{position:absolute;top:.5rem;right:.5rem;z-index:2;width:1.9rem;height:1.9rem;border-radius:50%;background:#1f7a3d;color:#fff;font-weight:700;display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.tkm-card.on .tkm-check{display:flex}
.tkm-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#f3eee8}
.tkm-ph,.tkm-setph{animation:tkmp 1.2s infinite alternate;background:#efe8df}@keyframes tkmp{to{opacity:.55}}
.tkm-cap{padding:.55rem .65rem .7rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.tkm-pick{margin-top:auto;padding-top:.35rem;font-size:.85rem;font-weight:600;color:#6b625a}
.tkm-card.on .tkm-pick{color:#1f7a3d;font-weight:700}
.tkm-price{font-weight:700}.tkm-tag{color:#1f7a3d;font-weight:600}.tkm-save{color:#1f7a3d;font-weight:700}
.tkm-setimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#f3eee8}
.tkm-setimgs>*{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.tkm-cart{margin-top:1.2rem;border:1px solid #e4ddd3;border-radius:12px;padding:.85rem;background:#fffdfa}
.tkm-cart h3{margin:.1rem 0 .5rem}
.tkm-lines{list-style:none;padding:0;margin:0 0 .5rem}.tkm-lines li{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;padding:.4rem 0;border-bottom:1px solid #eee}
.tkm-q button{font-size:1.1rem;padding:0 .4rem}.tkm-amt{text-align:right;min-width:5.5rem}
.tkm-rm{font-size:.85rem;margin-left:.15rem}.tkm-cart-note{margin:.15rem 0 .55rem;padding:.55rem .65rem;border-radius:10px;background:#fff6e8;border:1px solid #e8d2a8;color:#5a4a2e}
.tkm-line--preview{opacity:.72}.tkm-line--preview .tkm-amt{text-decoration:line-through;opacity:.7}
.tkm-upsell{display:block;width:100%;text-align:left;margin:.35rem 0;padding:.55rem .7rem;border:1px solid #1f7a3d;color:#1f7a3d;background:#f1faf3;border-radius:10px;font-weight:600;cursor:pointer;font:inherit}
.tkm-bar{position:sticky;bottom:0;z-index:3;background:#fff;border-top:1px solid #e4ddd3;margin:1rem -1.25rem 0;padding:.75rem 1.25rem 1rem;display:grid;grid-template-columns:1fr minmax(220px,340px);gap:.4rem .9rem;align-items:center}
.tkm-bar .form-status{grid-column:1/-1;margin:0}
.tkm-total{margin:0;font-weight:700;font-size:1.05rem}
.tkm-buy.is-done{background:#1f7a3d;border-color:#1f7a3d;color:#fff;font-weight:700}
.tk-toast{pointer-events:none}
@media (max-width:900px){.tkm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tkm-grid--sets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tkm-grid,.tkm-grid--sets{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .tkm-bar{margin:1rem -.9rem 0;padding:.6rem .9rem calc(.8rem + env(safe-area-inset-bottom));grid-template-columns:1fr}
  .tkm-lines li{grid-template-columns:1fr auto}.tkm-lines li>span:first-child{grid-column:1/-1}.tkm-amt{min-width:0}.tkm-cap{padding:.45rem .5rem .55rem;font-size:.92rem}}
.tkm-setimgs--2{grid-template-columns:repeat(2,1fr)}.tkm-setimgs--2>*{aspect-ratio:3/2}

/* Oct 20: review step (real Printify product photos before payment) */
.tkr h2 { margin-top: .25rem; }
.tkr-meter { height: 6px; border-radius: 3px; background: #ece7df; overflow: hidden; margin: .25rem 0 1rem; }
.tkr-meter span { display: block; height: 100%; background: #2f7d4f; transition: width .3s; }
.tkr-list { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tkr-item { border: 1px solid #e3ddd3; border-radius: 12px; padding: .5rem; background: #fff; }
.tkr-media { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; min-height: 140px; align-items: center; }
.tkr-media img, .tkr-media canvas { width: 100%; height: auto; border-radius: 8px; display: block; }
.tkr-media > :only-child { grid-column: 1 / -1; }
.tkr-item.is-fallback .tkr-media > * { grid-column: 1 / -1; max-height: 260px; object-fit: contain; }
.tkr-spin { grid-column: 1 / -1; justify-self: center; width: 36px; height: 36px; border: 3px solid #e3ddd3; border-top-color: #2f7d4f; border-radius: 50%; animation: tkr-spin .9s linear infinite; }
@keyframes tkr-spin { to { transform: rotate(360deg); } }
.tkr-item.is-loading .tkr-media { background: linear-gradient(90deg, #f6f2ec, #efe9e0, #f6f2ec); border-radius: 8px; }
.tkr-cap { display: flex; flex-direction: column; padding: .4rem .2rem 0; }
.tkr-item.is-real .tkr-note { color: #2f7d4f; }
.tkr-ok.is-done { background: #2f7d4f; border-color: #2f7d4f; color: #fff; }
.tkr-back { margin-top: .75rem; }
@media (max-width: 480px) { .tkr-list { grid-template-columns: 1fr; } }
.tkr-ok.is-done, .tkr-ok.is-done:disabled { opacity: 1; background: #2f7d4f; border-color: #2f7d4f; color: #fff; }

/* Oct 21: pop-up restructure (gallery on top, products grouped below) + sherpa vs velveteen */
html.tkm-lock, html.tkm-lock body { overflow: hidden; }
.tkm-modal .tk-modal-inner { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tkg { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start; margin: .25rem 0 1rem; scroll-margin-top: 60px;   /* Oct 25: clear the sticky .tkm-head (cart bar) so the product title isn't hidden */ }
.tkg-main { position: relative; aspect-ratio: 1 / 1; background: #f6f2ec; border-radius: 14px; overflow: hidden; }
.tkg-main img { width: 100%; height: 100%; object-fit: contain; display: block; animation: tkg-in .25s ease; }
@keyframes tkg-in { from { opacity: .3; } to { opacity: 1; } }
.tkg.is-loading .tkg-main::after { content: ''; position: absolute; right: .6rem; top: .6rem; width: 22px; height: 22px; border: 3px solid #e3ddd3; border-top-color: #2f7d4f; border-radius: 50%; animation: tkr-spin .9s linear infinite; }
img.tkg-zoom { transform: scale(1.55); }
.tkg-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: .5rem; }
.tkg-thumbs button { padding: 0; border: 2px solid #e4ddd3; border-radius: 10px; overflow: hidden; background: #f6f2ec; cursor: pointer; aspect-ratio: 1 / 1; }
.tkg-thumbs button.on { border-color: #1f7a3d; }
.tkg-thumbs img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tkg-title { margin: .2rem 0 .25rem; font-size: 1.2rem; }
.tkg-price { margin: 0 0 .35rem; font-size: 1.05rem; }
.tkg-src.is-real { color: #1f7a3d; font-weight: 600; }
.tkg-add { margin-top: .5rem; }
.tkg-add.is-done { background: #1f7a3d; border-color: #1f7a3d; color: #fff; font-weight: 700; }
.tkg-matlink { margin-top: .6rem; display: inline-block; }
.tkm-card.viewing { border-color: #2e3a39; box-shadow: 0 0 0 3px rgba(46,58,57,.15); }
.tkm-card.on.viewing { border-color: #1f7a3d; }
.tkmat { margin: 1rem 0 .5rem; padding: .9rem; border: 1px solid #e4ddd3; border-radius: 12px; background: #fffdfa; scroll-margin-top: 8px; }
.tkmat h3 { margin: 0 0 .6rem; }
.tkmat h4 { margin: 0 0 .4rem; }
.tkmat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tkmat-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.tkmat-imgs figure { margin: 0; }
.tkmat-imgs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
.tkmat-cmp { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.tkmat-cmp th, .tkmat-cmp td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid #eee; vertical-align: top; }
@media (max-width: 640px) {
  .tkg { grid-template-columns: 1fr; gap: .5rem; }
  .tkg-main { aspect-ratio: 4 / 3; }
  .tkmat-cols { grid-template-columns: 1fr; }
}
.tkg-matlink[hidden] { display: none; }
.tkg-main { aspect-ratio: auto; height: min(52vh, 500px); }
.tkg-thumbs { grid-template-columns: repeat(4, minmax(0, 92px)); }
@media (max-width: 640px) { .tkg-main { aspect-ratio: auto; height: min(40vh, 320px); } .tkg-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Oct 21: Portrait Mug size picker */
.tkg-size { border: 0; padding: 0; margin: .4rem 0 .2rem; display: grid; gap: .4rem; }
.tkg-size[hidden] { display: none; }
.tkg-size legend { font-weight: 600; margin-bottom: .3rem; }
.tkg-size-opt { display: flex; align-items: center; gap: .5rem; border: 2px solid #e4ddd3; border-radius: 10px; padding: .5rem .65rem; cursor: pointer; }
.tkg-size-opt.on { border-color: #1f7a3d; background: #f1faf3; }
.tkg-size-opt .tk-badge { margin-left: auto; }

/* Oct 21 round 3: collapsible materials */
.tkmat > summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style-position: inside; padding: .1rem 0; }
.tkmat[open] > summary { margin-bottom: .7rem; }

/* Oct 24: header cart icon + dropdown (replaces the bottom cart) */
.tkm-head{position:sticky;top:0;z-index:6;display:flex;justify-content:flex-end;padding:.35rem 3rem .35rem 0;margin:-.5rem 0 .25rem;background:#fff;pointer-events:none}
.tkm-head>*{pointer-events:auto}
.tkm-cart-btn{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e4ddd3;border-radius:50%;background:#fff;color:#2b2420;cursor:pointer}
.tkm-cart-ic{display:inline-flex}
.tkm-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#d32f2f;color:#fff;font:700 12px/20px system-ui,sans-serif;text-align:center}
.tkm-badge[hidden]{display:none}
.tkm-dd{position:absolute;top:calc(100% + 4px);right:3rem;width:min(380px,calc(100vw - 2rem));max-height:min(70vh,560px);overflow:auto;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#fffdfa}
.tkm-dd[hidden]{display:none}
.tkm-dd .tkm-bar{position:static;margin:.6rem 0 0;padding:.6rem 0 0;grid-template-columns:1fr;border-top:1px solid #e4ddd3}
.tkm-dd .tkm-q button{min-width:40px;min-height:40px;font-size:1.15rem}
.tkm-dd .tkm-lines li{grid-template-columns:1fr auto}.tkm-dd .tkm-lines li>span:first-child{grid-column:1/-1}
@media (max-width:600px){.tkm-head{padding-right:2.6rem}.tkm-dd{position:fixed;top:56px;left:8px;right:8px;width:auto;max-height:calc(100dvh - 140px)}}
