/* RetroWest additions (keeps original Webflow layout intact) */

/* Hide the original Webflow badge if present (we don't include it, but safe) */
.w-webflow-badge{ display:none !important; }

/* Logo placement */
.rw-logo-wrap{
  position:absolute;
  left:50%;
  top:12%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.rw-tagline{
  font-family: Overpass Mono, monospace;
  font-size: 1rem;
  letter-spacing: .06em;
  background:#c0c0c0;
  padding:.35rem .6rem;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #444;
  border-bottom: 2px solid #444;
}

/* Desktop icon tweaks */
.desktop-icon-wrapper .icons-heading{
  text-transform:uppercase;
  color:#fff;
  text-shadow: 1px 1px 0 #000;
}

/* Make icons feel like classic Windows pixel icons */
.desktop-icons,
.popup-icon,
.start-icon,
.link-icon{
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ------------------------------------------------------------
   Windows 3.1 / 95-ish desktop background
   ------------------------------------------------------------ */
.desktop-wrapper{
  background-color:#008080 !important; /* classic teal */
  /* subtle dithering + soft vignette */
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 55%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 2px,
      rgba(0,0,0,0.06) 2px,
      rgba(0,0,0,0.06) 4px);
  background-size: auto, 8px 8px;
}

/* Shop controls */
.rw-controls{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
  padding:.6rem;
}
.rw-controls input,
.rw-controls select{
  font-family: Inconsolata, monospace;
  font-size: 1rem;
  padding: .45rem .55rem;
  border: 2px solid #111;
  background: #fff;
}
.rw-controls label{ font-family: Overpass Mono, monospace; font-size:.9rem; }

/* Product grid */
.rw-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.6rem;
  padding:.6rem;
}
@media (max-width: 820px){
  .rw-grid{ grid-template-columns: 1fr; }
}

.rw-card{
  border: 2px solid #111;
  background: #fff;
  padding: .65rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.rw-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.rw-chip{
  font-family: Overpass Mono, monospace;
  font-size:.85rem;
  padding:.2rem .45rem;
  background:#eca6a6;
  border:2px solid #111;
}
.rw-price{
  font-family: Inconsolata, monospace;
  font-weight:700;
}
.rw-title{
  font-family: VT323, monospace;
  font-size: 1.9rem;
  line-height: 1.6rem;
}
.rw-meta{
  font-family: Overpass Mono, monospace;
  font-size:.9rem;
}
.rw-blurb{
  font-family: Inconsolata, monospace;
  font-size: 1rem;
  line-height: 1.25rem;
}

.rw-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.2rem; }
.rw-btn{
  font-family: Overpass Mono, monospace;
  padding:.4rem .6rem;
  border:2px solid #111;
  background:#ececec;
  cursor:pointer;
}
.rw-btn:disabled{ opacity:.55; cursor:not-allowed; }
.rw-btn-ghost{ background:#fff; }

.rw-empty{
  padding: 1rem;
  font-family: Inconsolata, monospace;
}

/* Cart */
.rw-cart{
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.rw-line{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  border:2px solid #111;
  padding:.55rem;
  background:#fff;
}
.rw-line-title{
  font-family: VT323, monospace;
  font-size: 1.7rem;
  line-height: 1.4rem;
}
.rw-line-meta{ font-family: Overpass Mono, monospace; font-size:.9rem; }
.rw-line-controls{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.rw-qty, .rw-remove{
  border:2px solid #111;
  background:#ececec;
  font-family: Overpass Mono, monospace;
  width: 2rem;
  height: 2rem;
  cursor:pointer;
}
.rw-qty-val{ min-width: 1.6rem; text-align:center; font-family: Inconsolata, monospace; font-weight:700; }
.rw-line-price{ font-family: Inconsolata, monospace; font-weight:700; margin-left:.4rem; }

.rw-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:2px dashed #111;
  padding-top:.6rem;
  font-family: Overpass Mono, monospace;
}
.rw-cart-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Cart badge */
.rw-badge{
  position:absolute;
  right:-6px;
  top:-6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background:#111;
  color:#ececec;
  font-family: Overpass Mono, monospace;
  font-size: 12px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Details */
.rw-details{
  padding:.6rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.rw-details h2{ margin:0; font-family: VT323, monospace; font-size: 2.2rem; }
.rw-kv{ display:grid; grid-template-columns: 140px 1fr; gap:.35rem .6rem; font-family: Overpass Mono, monospace; }
.rw-details p{ margin:0; font-family: Inconsolata, monospace; }

/* Small helper */
.rw-link{ color:#111; text-decoration:underline; }

/* Make popups flexible on small screens */
@media (max-width: 820px){
  .popup{ width: calc(100vw - 1.2rem); left: .6rem !important; }
  .popup.is-contact{ width: calc(100vw - 1.2rem); }
}


/* ------------------------------------------------------------
   Mobile / small screens
   Goal: keep the "desktop" vibe, but make it usable on phones.
   ------------------------------------------------------------ */
@media (max-width: 720px){
  /* Enable a normal document flow + scrolling */
  body.body{
    overflow-x:hidden;
  }

  .desktop-wrapper{
    position:relative;
    height:auto;
    min-height:100vh;
    justify-content:flex-start;
    align-items:flex-start;
    padding: 0.9rem 0.9rem 5.2rem; /* bottom space for fixed nav bar */
  }

  .rw-logo-wrap{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    margin: 0.6rem auto 0.2rem;
    text-align:center;
  }

  .rw-tagline{
    font-size: .95rem;
    line-height: 1.2rem;
  }

  /* Icons become a grid */
  .desktop-icons-wrapper{
    position:relative;
    width:100%;
    padding: 0.8rem 0 0.2rem;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem .2rem;
  }
  .desktop-icon-wrapper{
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: .35rem .25rem;
  }
  .desktop-icons{
    width: 3.2rem;
  }
  .icons-heading{
    font-size: 1.5rem;
    line-height: 1.8rem;
    margin: .1rem 0 0;
  }

  /* Bottom bar becomes fixed */
  .navigation-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    padding: .45rem .35rem;
    z-index: 999;
  }
  .menu-button{
    width:auto;
    min-width: 6.5rem;
    margin: 0 .45rem;
    padding: .35rem .35rem;
  }
  .menu-title{ font-size: 1.6rem; line-height: 1.6rem; }

  /* Reduce clutter on tiny screens */
  .looping-text-wrapper{ display:none; }

  /* Start menu becomes a bottom sheet */
  .start-menu-wrap{
    position:fixed;
    left: .35rem;
    right: .35rem;
    bottom: 3.6rem; /* above nav bar */
    width:auto;
    max-height: calc(100vh - 5.2rem);
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    padding: .8rem .6rem .6rem 2.6rem;
    z-index: 1000;
  }

  /* Popups become full-screen panels */
  .popup{
    position:fixed !important;
    left: .35rem !important;
    right: .35rem !important;
    top: .35rem !important;
    bottom: 3.6rem !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    z-index: 1200 !important;
  }

  .popup-top-bar{
    position:sticky;
    top:0;
    z-index: 2;
  }

  /* Make popup content scroll */
  .popup > :not(.popup-top-bar){
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Shop controls stack nicely */
  .rw-controls{
    gap: .45rem;
  }
  .rw-controls label{
    width: 100%;
  }
  .rw-controls input,
  .rw-controls select{
    width: 100%;
  }

  /* Cart lines wrap cleanly */
  .rw-line{
    flex-direction:column;
    align-items:flex-start;
  }
  .rw-line-controls{
    width:100%;
    justify-content:space-between;
  }
  .rw-cart-actions .rw-btn,
  .rw-cart-actions .rw-link{
    width:100%;
    text-align:center;
  }
}

/* Prevent background scroll when a popup is open on mobile */
body.rw-has-popup{ overflow:hidden; }



/* ------------------------------------------------------------
   Arcade-ish font treatment
   (Uses bundled Google-font CSS if available; falls back to monospace)
   ------------------------------------------------------------ */
:root{
  --rw-font-arcade: 'Overpass Mono', 'Inconsolata', 'Lucida Console', 'Courier New', monospace;
}
body, .popup, .navigation-bar, .rw-btn, .rw-controls label, .rw-controls input, .rw-controls select{
  font-family: var(--rw-font-arcade) !important;
  letter-spacing: .02em;
}
.popup-title, .menu-title, .menu-link-title, .icons-heading, .rw-tagline{
  font-family: var(--rw-font-arcade) !important;
  letter-spacing: .08em;
}
.popup-title, .menu-title, .menu-link-title, .icons-heading{
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   Animated "screensaver" canvas background
   ------------------------------------------------------------ */
#rw-screensaver{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
}

/* Let the screensaver show through a bit */
.desktop-wrapper{
  position:relative;
  z-index:1;
  background-color: rgba(0,128,128,.55) !important;
}

/* Start button: closer to Win95 */
.menu-button{
  display:flex;
  align-items:center;
  gap:.35rem;
}
.start-winlogo{
  width:16px;
  height:16px;
  image-rendering: pixelated;
}

/* Start menu with expandable submenus */
.rw-start-menu .start-menu-item-wrap{ display:none; } /* legacy safety */
.rw-start-item{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.32rem .5rem;
  cursor:pointer;
  text-decoration:none;
  color:#000;
}
.rw-start-item:hover,
.rw-start-item:focus{
  background:#000080;
  color:#fff;
  outline:none;
}
.rw-start-item:hover .menu-link-title,
.rw-start-item:focus .menu-link-title{ color:#fff; }

.rw-has-sub{ position:relative; }
.rw-sub-arrow{
  margin-left:auto;
  font-size:.9rem;
  opacity:.9;
}
.rw-submenu{
  display:none;
  position:absolute;
  left: 100%;
  top: 0;
  min-width: 220px;
  background:#c0c0c0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #444;
  border-bottom: 2px solid #444;
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
  z-index:9999;
  padding:.15rem 0;
}
.rw-submenu .rw-start-item{
  padding:.32rem .5rem;
}
.rw-submenu-right{
  left: 100%;
  top: 0;
}

/* Root start menu should appear above taskbar */
.start-menu-wrap.rw-start-menu{
  padding:.15rem 0;
}
.start-menu-wrap.rw-start-menu .divider{
  margin:.25rem 0;
}

/* Mobile: submenus open "inline" instead of hover */
@media (max-width: 720px){
  .rw-submenu{
    position: static;
    min-width: 100%;
    margin-left: .4rem;
    box-shadow:none;
  }
  .rw-sub-arrow{ display:none; }
}


/* Theme variants toggled from Start > Programs > Utilities */
html[data-rw-theme="charcoal"] .desktop-wrapper{
  background-color: rgba(32,32,32,.55) !important;
}
html[data-rw-theme="charcoal"] .rw-tagline{
  background:#3a3a3a;
  color:#fff;
}