/* 1 · Cosy Desktop: "FiGGYZ OS". A warm wallpaper, chunky desktop icons, soft windows with a
   brand title bar, and a taskbar. The F4F Gallery computer runs the same OS in black and gold. */
.spc--desktop {
  --spc-accent: #E14826; --os-bar: linear-gradient(90deg, #FCAA1A, #E14826); --os-bar-fg: #fff;
  --os-wall: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.55) 0 2px, transparent 3px) 0 0 / 26px 26px, linear-gradient(150deg, #FFE9C9 0%, #FFD0A8 50%, #F6A98A 100%);
}
.spc--desktop[data-site='f4f'] {
  --spc-accent: #1D1D1D; --os-bar: linear-gradient(90deg, #2A2A2A, #111); --os-bar-fg: #E8C877;
  --os-wall: radial-gradient(circle at 20% 15%, rgba(232, 200, 119, 0.25) 0 2px, transparent 3px) 0 0 / 26px 26px, linear-gradient(150deg, #3A3530 0%, #24211E 60%, #151311 100%);
}
.os { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--os-wall); }
.os__desk { position: relative; flex: 1; min-height: 0; overflow: hidden; }

/* boot splash: plays once over the desktop */
.os__boot {
  position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; gap: 14px; text-align: center; pointer-events: none;
  background: #263445; color: #fff; animation: osBoot 1.1s ease 0.2s forwards;
}
.os__boot b { font: 400 clamp(26px, 5cqi, 46px)/1 var(--title-font); color: var(--primary-yellow); }
.os__bar { display: block; width: 180px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.os__bar i { display: block; width: 0; height: 100%; background: var(--primary-yellow); animation: osLoad 0.8s ease forwards; }
@keyframes osBoot { 70% { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes osLoad { to { width: 100%; } }

/* icons */
.os__icons { position: absolute; z-index: 1; left: 12px; top: 12px; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.os__icon {
  display: grid; justify-items: center; gap: 4px; width: 92px; padding: 8px 4px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: 600 12px/1.2 var(--body-font); color: #2A1B10; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.spc--desktop[data-site='f4f'] .os__icon { color: #F3E7C7; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.os__icon:hover { background: rgba(255, 255, 255, 0.35); }
.os__glyph { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 26px; color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.os__glyph--shop { background: linear-gradient(160deg, #FCAA1A, #E14826); }
.os__glyph--wish { background: linear-gradient(160deg, #FF8FB1, #E0245E); }
.os__glyph--cart { background: linear-gradient(160deg, #6FC3DF, #2B7A9B); }
.os__glyph--off { background: linear-gradient(160deg, #8E95A3, #4A525C); }
.os__count { font-weight: 800; }

/* windows */
.os-win {
  position: absolute; z-index: 10; display: flex; flex-direction: column; width: 64%; height: 80%; min-width: 300px; border-radius: 14px; overflow: hidden;
  background: #FFFDF9; box-shadow: 0 18px 40px rgba(38, 20, 10, 0.28), 0 0 0 2px rgba(38, 20, 10, 0.12); animation: osPop 0.18s ease;
}
.os-win--product { width: 60%; height: 84%; }
.os-win--cart { width: 46%; height: 76%; }
.os-win--wish { width: 44%; height: 64%; }
.os-win:not(.is-top) { filter: saturate(0.85); }
.os-win:not(.is-top) .os-win__bar { opacity: 0.8; }
@keyframes osPop { from { transform: scale(0.96); opacity: 0; } }
.os-win__bar { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 14px; background: var(--os-bar); color: var(--os-bar-fg); cursor: grab; user-select: none; touch-action: none; }
.os-win__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1 var(--body-font); }
.os-win__x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.2); color: inherit; cursor: pointer; font-size: 16px; }
.os-win__x:hover { background: rgba(255, 255, 255, 0.35); }
.os-win__body { flex: 1; min-height: 0; overflow: auto; padding: 14px; overscroll-behavior: contain; }

/* the shop window */
.os-shop { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; min-height: 100%; }
.os-shop__side { display: flex; flex-direction: column; gap: 2px; padding-right: 10px; border-right: 2px solid var(--spc-line); }
.os-side { min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font-size: 13px; }
.os-side:hover { background: rgba(225, 72, 38, 0.08); }
.os-side[aria-pressed='true'] { background: var(--spc-accent); color: #fff; font-weight: 700; }
.spc--desktop[data-site='f4f'] .os-side[aria-pressed='true'] { color: #E8C877; }
.os-shop__find input { width: 100%; min-height: 42px; padding: 8px 14px; border: 0; border-radius: 999px; background: #F3ECE4; font: inherit; color: inherit; }
.os-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 10px 0; padding: 0; list-style: none; }
.os-tile {
  display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: 8px; border: 0; border-radius: 12px; background: #fff; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 2px var(--spc-line); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.os-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--spc-accent), 0 8px 16px rgba(38, 20, 10, 0.1); }
.os-tile__photo { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #F6F1EA; }
.os-tile__photo img { width: 100%; height: 100%; object-fit: contain; }
.os-tile__name { font: 600 13px/1.25 var(--body-font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.os-tile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: auto; font-size: 13px; }
.os-pager { display: flex; align-items: center; justify-content: center; gap: 10px; }
.os-pager[hidden] { display: none; }

/* the product window */
.os-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.os-product__main { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #F6F1EA; }
.os-product__main img { width: 100%; height: 100%; object-fit: contain; }
.os-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.os-thumbs button { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 2px var(--spc-line); background: #fff; }
.os-thumbs button[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--spc-accent); }
.os-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.os-product__line { margin: 0; font: 700 11px/1.2 var(--body-font); letter-spacing: 1px; text-transform: uppercase; color: var(--spc-muted); }

/* the wishlist window */
.os-wish { margin: 0; padding: 0; list-style: none; }
.os-wish__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--spc-line); }
.os-wish__row img, .os-wish__row .spc-nophoto { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.os-wish__text { display: flex; flex-direction: column; min-width: 0; }
.os-wish__text span, .os-wish__else { font-size: 12px; color: var(--spc-muted); }

/* the taskbar */
.os__task { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; background: rgba(255, 253, 249, 0.86); backdrop-filter: blur(8px); box-shadow: 0 -2px 0 rgba(38, 20, 10, 0.08); }
.os__start { padding: 6px 12px; border-radius: 10px; background: var(--os-bar); color: var(--os-bar-fg); font: 700 12px/1 var(--body-font); white-space: nowrap; }
.os__tabs { flex: 1; display: flex; gap: 6px; min-width: 0; overflow-x: auto; }
.os__tab { max-width: 180px; min-height: 34px; padding: 4px 12px; border: 0; border-radius: 8px; background: rgba(38, 20, 10, 0.06); cursor: pointer; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os__tab.is-top { background: #fff; box-shadow: inset 0 -3px 0 var(--spc-accent); font-weight: 700; }
.os__clock { font: 700 13px/1 var(--body-font); font-variant-numeric: tabular-nums; }

/* narrow: each window fills the desktop, icons become a row */
@container pc (max-width: 700px) {
  .os__icons { left: 8px; right: 8px; top: auto; bottom: 8px; grid-auto-flow: column; justify-content: space-around; }
  .os__icon { width: 72px; }
  .os__glyph { width: 44px; height: 44px; font-size: 22px; }
  .os-win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; min-width: 0; border-radius: 0; }
  .os-shop { grid-template-columns: minmax(0, 1fr); }
  .os-shop__side { flex-direction: row; overflow-x: auto; padding: 0 0 8px; border-right: 0; border-bottom: 2px solid var(--spc-line); }
  .os-side { flex: none; }
  .os-product { grid-template-columns: minmax(0, 1fr); }
  .os-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .os__start { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .os__boot { display: none; }
  .os-win { animation: none; }
}