/* KAYCO Item Master v6 — shell (header, category strip, footer) + shared toast / copy chip, on top of kayco-shop's compiled CSS. Tokens = kayco-shop tailwind.config. */
:root { --plum:#7A3872; --plum-50:#FBF7FB; --plum-100:#F3EBF6; --plum-200:#E4D2E6; --ink-950:#121014; --ink-900:#1B181F; --ink-700:#3B3741; --ink-600:#55515C; --ink-500:#6B6772; --ink-400:#706C76; --ink-300:#C7C3CC; --line:#ECEAEE; --mist:#F5F4F1; --canvas:#FBFAF8; --leaf:#13825D; --leaf-50:#E8F6EF; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
#app[hidden] { display: none; }
/* toast — kayco-shop's dark pill */
.im-toaster { position:fixed; left:50%; bottom:calc(var(--tabbar-h, 0px) + var(--buybar-h, 0px) + max(12px, env(safe-area-inset-bottom))); transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; width:max-content; max-width:calc(100vw - 32px); }
.im-toast { display:flex; align-items:center; gap:9px; max-width:100%; padding:11px 16px 11px 14px; border-radius:16px; background:var(--ink-900); color:#fff; font-size:14px; font-weight:600; box-shadow:0 1px 1px rgba(27,24,31,.04),0 12px 32px -12px rgba(27,24,31,.24),0 32px 64px -32px rgba(65,22,61,.28); }
/* copy chip — core CopyChip (item page, sheets) */
.im-copy { display:inline-flex; align-items:center; gap:5px; max-width:100%; height:26px; padding:0 8px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink-700); font-size:12px; font-weight:600; line-height:1; cursor:copy; transition:border-color .15s, background .15s, color .15s; white-space:nowrap; }
.im-copy:hover { border-color:var(--plum-200); background:var(--plum-50); color:var(--plum); }
.im-copy:active { transform:scale(.97); }
.im-copy:focus-visible { outline:none; box-shadow:0 0 0 4px rgba(122,56,114,.14); border-color:var(--plum); }
.im-copy-l { color:var(--ink-400); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.im-copy-i { color:var(--ink-400); flex:none; }
.im-copy:hover .im-copy-i, .im-copy:hover .im-copy-l { color:var(--plum); }
.im-copy > span.tabular { overflow:hidden; text-overflow:ellipsis; }

/* v13o-p (accessibility): the skip link shows when it gets keyboard focus (its utility classes were never in the compiled shop.css, so
   it stayed off screen; no transition, so it is on screen the moment it has focus); hover lifts and the shimmer stop for reduced motion */
.im-skip { position:fixed; left:16px; top:12px; z-index:100; transform:translateY(-300%); transition:none; }
.im-skip:focus, .im-skip:focus-visible { transform:none; }
#main:focus-visible { outline:none; box-shadow:none; }
@media (prefers-reduced-motion: reduce) {
  .im-card:hover, .hm-mini:hover, .hm-brand:hover, .bl-pic:hover, .bl-line:hover, .im-card-ph img, .group:hover img { transform:none !important; }
  .skeleton { animation:none !important; }
}

/* v13o-p: one empty state and loading placeholders for every page (core.js EmptyState, SkelRows, SkelText) */
.im-empty { display:flex; flex-direction:column; align-items:center; padding:52px 24px; border-radius:24px; background:var(--canvas); box-shadow:inset 0 0 0 1px var(--line); text-align:center; }
.im-empty-ic { display:flex; width:56px; height:56px; align-items:center; justify-content:center; border-radius:18px; background:#fff; color:var(--plum); box-shadow:0 0 0 1px var(--line), 0 12px 24px -12px rgba(27,24,31,.2); }
.im-empty-t { margin-top:20px; max-width:36rem; overflow-wrap:anywhere; font-size:22px; font-weight:800; line-height:1.2; letter-spacing:-.035em; color:var(--ink-950); }
.im-empty-b { max-width:28rem; margin:8px auto 0; font-size:14px; line-height:1.55; color:var(--ink-500); }
.im-empty-a { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:24px; }
.im-empty.is-boxed { margin-top:20px; padding:40px 20px; border-radius:20px; }
.im-empty.is-boxed .im-empty-ic { width:48px; height:48px; border-radius:16px; box-shadow:0 0 0 1px var(--line); }
.im-empty.is-boxed .im-empty-t { margin-top:12px; font-size:17px; font-weight:700; letter-spacing:0; color:var(--ink-900); }
.im-empty.is-boxed .im-empty-b { margin-top:4px; }
.im-empty.is-boxed .im-empty-a { margin-top:20px; }
.im-empty.is-inline { flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 16px; border-radius:16px; text-align:left; }
.im-empty.is-inline .im-empty-ic { width:40px; height:40px; border-radius:12px; box-shadow:0 0 0 1px var(--line); }
.im-empty.is-inline .im-empty-t { margin:0; font-size:14.5px; font-weight:700; letter-spacing:0; color:var(--ink-900); }
.im-empty.is-inline .im-empty-b { margin:2px 0 0; font-size:13px; }
.im-empty.is-inline .im-empty-a { margin:0; justify-content:flex-start; }
.im-skel-rows { display:flex; flex-direction:column; gap:8px; }
.im-skel-rows > .skeleton { display:block; width:100%; border-radius:12px; }
.im-skel-text { display:flex; flex-direction:column; gap:8px; }
.im-skel-text > .skeleton { display:block; height:12px; border-radius:6px; }
.im-skel-head { padding-top:12px; } .im-skel-head > .skeleton:first-child { height:30px; border-radius:10px; }
.im-skel-item { display:flex; flex-direction:column; gap:24px; padding-top:12px; }
.im-skel-ph { width:100%; aspect-ratio:1 / 1; max-width:520px; border-radius:24px; }
@media (min-width:768px) { .im-skel-item { flex-direction:row; } .im-skel-ph { width:44%; } }

/* header */
.im-head::before { content:''; position:absolute; inset:0; z-index:-1; border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); transition:box-shadow .3s, border-color .3s; }
.im-head.is-scrolled::before { border-color:transparent; box-shadow:0 10px 30px -20px rgba(27,24,31,.45); }
.im-logo-l { border-left:1px solid var(--line); padding:6px 0 6px 12px; font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--plum); white-space:nowrap; }
@media (min-width:768px) and (max-width:1023.98px) { .im-head .im-logo-l { display:none; } }
.im-head-search { flex:1 1 auto; min-width:0; max-width:720px; }
.im-head-sep { width:1px; height:24px; margin:0 4px; background:var(--line); }
.im-hl { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; min-width:40px; padding:0 10px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-600); white-space:nowrap; transition:background .15s, color .15s; }
.im-hl:hover { background:var(--mist); color:var(--ink-900); }
.im-hl.is-on { background:var(--plum-100); color:var(--plum); }
.im-hl span { display:none; }
.im-hl::after { content:attr(data-tip); position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); padding:5px 9px; border-radius:8px; background:var(--ink-900); color:#fff; font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:5; }
.im-hl:hover::after, .im-hl:focus-visible::after { opacity:1; transition-delay:.3s; }
@media (min-width:1280px) { .im-hl { padding:0 12px; } .im-hl span { display:inline; } .im-hl::after { display:none; } }

/* category strip */
.im-strip { display:flex; align-items:center; gap:2px; overflow-x:auto; margin:0 -4px; padding:3px 4px 6px; }
.im-pill::before { content:''; position:absolute; inset:-3px 0; }
.im-pill { position:relative; display:inline-flex; flex:none; align-items:center; gap:6px; height:38px; padding:0 13px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-700); white-space:nowrap; transition:background .15s, color .15s; }
.im-pill:hover { background:var(--mist); color:var(--ink-900); }
.im-pill.is-on { background:var(--ink-900); color:#fff; }
.im-pill:focus-visible { outline:2px solid var(--plum); outline-offset:-2px; }
.im-strip-ar { position:absolute; top:0; display:none; width:32px; height:32px; align-items:center; justify-content:center; border-radius:999px; background:#fff; color:var(--ink-700); box-shadow:0 0 0 1px var(--line), 0 2px 6px rgba(27,24,31,.08); }
.im-strip-ar:hover { color:var(--ink-900); }
@media (min-width:768px) { .im-pill { height:32px; padding:0 12px; font-size:13px; } .im-strip { padding:0 4px 8px; } .im-strip-ar { display:flex; } }

/* slim footer */
.im-foot { margin-top:40px; border-top:1px solid var(--line); background:var(--canvas); }
.im-foot-in { display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; padding-top:18px; padding-bottom:18px; font-size:12.5px; line-height:1.5; color:var(--ink-500); }
.im-foot-in strong { color:var(--ink-900); font-weight:700; }
.im-foot-keys { display:none; align-items:center; gap:5px; margin-left:auto; }
.im-foot-keys .kbd { font-family:var(--mono); }
.im-foot-keys .kbd + .kbd { margin-left:-2px; }
@media (max-width:767.98px) { .im-foot-in > p { width:100%; } .im-foot-in > a { margin-bottom:4px; } }
@media (min-width:1024px) { .im-foot-keys { display:flex; } }