@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@300;400;700&display=swap');

/* style.css — monochrome base + pastel accent + pixelized minimal UI */
:root{
  --grey-0:#ffffff;
  --grey-1:#f6f6f7;
  --grey-2:#e9eaeb;
  --grey-3:#d6d6d6;
  --grey-4:#9aa0a6;
  --text:#1f2326;

  --accent-blue:#bcd7ff;
  --accent-purple:#d6c8ff;
  --accent-green:#c8f5d2;

  --nav-width:220px;
  --content-max:1100px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased;
  background:var(--grey-1);
  color:var(--text);
}

/* thin pixel-like section separators (mejinavi feel) */
section{border-bottom:1px solid rgba(31,35,38,0.06); padding:48px 40px}

/* full-screen hero */
.fullscreen{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:0}
.home-content{ text-align:center }
.logo{font-family:'Press Start 2P', monospace;font-size:44px;margin:0}
.tagline{color:var(--grey-4);margin-top:10px}

/* scroll indicator */
.scroll-indicator{position:absolute;bottom:28px;text-align:center;color:var(--grey-4);font-size:12px}
.scroll-indicator .arrow{font-size:20px;display:block}

:root {
  --nav-width: 240px;
  --grey-0: #fafafa;
  --grey-4: #888;
  --text: #111;
  --accent-blue: #6cb6ff;
}

/* Hide checkbox */
#navToggle { display: none; }

/* Hamburger handle */
.nav-handle {
  position: fixed;
  top: 16px;
  left: 8px;
  cursor: pointer;
  z-index: 50;
  font-size: 24px;
  user-select: none;
}

/* Nav wrapper */
.nav-wrap {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 40;
}

/* Side nav */
.nav {
  width: var(--nav-width);
  height: 100vh;
  background: var(--grey-0);
  border-right: 1px solid rgba(31,35,38,0.06);
  padding: 22px;
  transform: translateX(calc(-1 * var(--nav-width)));
  transition: transform 0.28s ease;
  display: flex;
  flex-direction: column;
}

/* Show nav when checkbox checked */
#navToggle:checked + .nav-handle + .nav-wrap .nav {
  transform: translateX(0);
}

/* Brand styling */
.nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav .brand .mark {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(31,35,38,0.08);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#fff,#fafafa);
}

/* Nav links */
.nav ul {
  list-style: none;
  padding: 24px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nav a {
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
}
.nav a:hover {
  background: linear-gradient(90deg, rgba(188,215,255,0.18), rgba(214,200,255,0.06));
}

/* Badge */
.badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-blue);
  color: #111;
  font-size: 12px;
  text-align: center;
  margin-left: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Main content pushed right */
.main {
  margin-left: 0;
  padding: 20px;
  transition: margin-left 0.28s ease;
}
#navToggle:checked ~ .main {
  margin-left: var(--nav-width);
}

/* Desktop override */
@media(min-width: 920px) {
  .main {
    margin-left: var(--nav-width);
    max-width: var(--content-max, 960px);
    margin-right: auto;
  }
.nav-handle {
  position: fixed;
  top: 16px;
  left: 8px;
  z-index: 60;
  font-size: 24px;
  cursor: pointer;
  padding: 6px 10px;
  background: var(--grey-0);
  border: 1px solid rgba(31,35,38,0.04);
  border-radius: 6px;
  user-select: none;
}
}

/* accent margin column on right for bright color accents */
.accent-margin{position:fixed;right:0;top:0;height:100vh;width:56px;display:flex;flex-direction:column;gap:8px;padding:12px}
.accent-block{height:10px;border-radius:4px;box-shadow:0 1px 0 rgba(0,0,0,0.02)}
.accent-blue{background:var(--accent-blue)}.accent-purple{background:var(--accent-purple)}.accent-green{background:var(--accent-green)}

/* product grid */
.container{max-width:var(--content-max);margin:0 auto}
.section-title{font-family:'Press Start 2P';
  font-size:14px;margin:0 0 18px 0}
.product-grid{display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap:18px;}
.product-card{background:var(--grey-0);padding:16px;border:1px solid rgba(31,35,38,0.06);text-decoration:none;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:12px}
.product-card p{margin:0;font-weight:700}

/* checkerboard transparency grid */
.img-checker{width:100%;height:160px;border-radius:6px;border:1px solid rgba(31,35,38,0.04);background-image:
  linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
  linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.03) 75%),
  linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.03) 75%);
background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;display:flex;align-items:center;justify-content:center}
.img-checker.small{width:68px;height:68px}

/* product page 2-col layout */
.product-page{display:grid;grid-template-columns:1fr 360px;gap:28px;padding:40px}
.product-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.product-info h1{font-family:'Press Start 2P';font-size:18px;margin:0}
.product-info .price{font-weight:700;margin-top:8px}
.qty-selector{display:flex;gap:8px;align-items:center;margin:12px 0}
.qty-selector input[type=radio]{margin-right:6px}

/* cart */
.cart-list{display:flex;flex-direction:column;gap:12px}
.cart-item{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid rgba(31,35,38,0.04);border-radius:6px;background:var(--grey-0)}
.cart-item .thumb{width:88px;height:88px;border-radius:6px}
.summary{border:1px solid rgba(31,35,38,0.04);padding:16px;background:var(--grey-0)}

/* profile */
.profile-box{padding:18px;border:1px solid rgba(31,35,38,0.04);background:var(--grey-0);border-radius:6px}

/* checkout form */
.checkout-page form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.checkout-page label{display:flex;flex-direction:column;font-size:14px}
.checkout-page input{padding:10px;border:1px solid rgba(31,35,38,0.06);border-radius:6px;background:var(--grey-0)}
/* Make all form elements uniform */
.checkout-page input,
.checkout-page textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;   /* match your input borders */
  border-radius: 8px;        /* match other boxes */
  background-color: #fff;    /* same as input boxes */
  font-size: 14px;
  box-sizing: border-box;
  resize: vertical;          /* allow resizing only vertically */
}

.checkout-page textarea {
  min-height: 120px;         /* taller for messages */
}


/* buttons */
.btn{display:inline-block;padding:10px 14px;background:transparent;border:1px solid rgba(31,35,38,0.08);border-radius:6px;text-decoration:none;color:var(--text);font-weight:700}
.btn-accent{background:var(--accent-blue)}

/* responsive */
@media(max-width:920px){
  .nav{transform:translateX(0);position:fixed;left:0;top:0;width:64px;padding:12px}
  #navToggle{display:block;position:fixed;left:8px;top:8px;z-index:60;padding:8px;border-radius:6px;background:var(--grey-0);border:1px solid rgba(31,35,38,0.04)}
  .main{margin-left:64px}
  .product-page{grid-template-columns:1fr}
}

/* iPhone and mobile responsive design */
@media(max-width:768px){
  /* Checkout page mobile fixes */
  .checkout-container{display:block !important}
  .checkout-container .summary{width:100% !important;margin-top:20px}
  .checkout-page form > div > div{display:block !important}
  
  /* Checkout form spacing */
  .checkout-page form > div{margin-bottom:20px !important}
  .checkout-page h3{margin-bottom:12px !important;font-size:14px !important}
  
  /* Order summary mobile */
  #order-items{max-height:200px;overflow-y:auto}
  
  /* Payment security info */
  .checkout-container > div:last-child{margin-top:16px;text-align:center}
  /* General mobile fixes */
  section{padding:20px 16px}
  .container{padding:0 8px}
  
  /* Typography adjustments */
  .pixel-text{font-size:12px !important}
  .logo{font-size:32px !important}
  .section-title{font-size:12px !important}
  
  /* Navigation fixes */
  .nav{width:100%;transform:translateX(-100%);padding:16px}
  .nav-handle{top:12px;left:12px;font-size:20px;padding:8px 12px}
  #navToggle:checked + .nav-handle + .nav-wrap .nav{transform:translateX(0)}
  .nav ul{gap:8px}
  .nav a{font-size:16px;padding:12px 14px}
  
  /* Main content adjustments */
  .main{margin-left:0;padding:16px 8px}
  #navToggle:checked ~ .main{margin-left:0}
  
  /* Hide accent margin on mobile */
  .accent-margin{display:none}
  
  /* Product grid mobile optimization */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-card{padding:12px;gap:8px}
  .product-card p{font-size:12px}
  
  /* Image checker adjustments */
  .img-checker{height:120px}
  .img-checker.small{width:48px;height:48px}
  
  /* Product page mobile fixes */
  .product-page{grid-template-columns:1fr;gap:20px;padding:20px 8px}
  .product-info h1{font-size:14px !important}
  .price{font-size:16px}
  
  /* Quantity buttons mobile */
  .qty-btn{font-size:14px;padding:8px 12px}
  
  /* Cart page mobile fixes */
  .cart-item{flex-direction:column;gap:12px;align-items:flex-start;padding:16px}
  .cart-item .thumb{align-self:center}
  
  /* Checkout page mobile optimization */
  .checkout-page form{max-width:100%}
  
  /* Two column layout fixes */
  .checkout-page > div,
  .checkout-page form > div > div{display:block !important}
  
  /* Form inputs mobile */
  input, select, textarea{font-size:16px !important;padding:12px !important}
  
  /* Summary box mobile */
  .summary{width:100% !important;margin-top:20px}
  
  /* Hero section mobile */
  .fullscreen{height:80vh}
  .home-content{padding:0 20px}
  .tagline{font-size:14px}
  
  /* Scroll indicator mobile */
  .scroll-indicator{bottom:20px;font-size:11px}
  .scroll-indicator .arrow{font-size:18px}
  
  /* Badge mobile */
  .badge{min-width:16px;height:16px;font-size:11px;padding:1px 4px}
  
  /* Button sizing */
  .btn{font-size:14px;padding:12px 16px}
  
  /* Spacing adjustments */
  h2{margin-bottom:16px !important}
  
  /* Grid gaps */
  .product-grid{gap:8px}
  
  /* Font size scaling */
  body{font-size:14px}
}

@media(max-width:375px){
  /* iPhone SE/mini specific fixes */
  section{padding:16px 12px}
  .container{padding:0 4px}
  .product-grid{grid-template-columns:1fr;gap:8px}
  .nav{padding:12px 8px}
  .nav a{font-size:14px;padding:10px 12px}
  
  /* Even smaller text for very small screens */
  .pixel-text{font-size:11px !important}
  .logo{font-size:28px !important}
  .section-title{font-size:11px !important}
  
  /* Product info adjustments */
  .product-info h1{font-size:13px !important}
  .price{font-size:15px}
  
  /* Button adjustments */
  .btn{font-size:13px;padding:10px 14px}
  .qty-btn{font-size:13px;padding:6px 10px}
}

@media(max-width:320px){
  /* Ultra small screen fixes */
  .main{padding:12px 4px}
  section{padding:12px 8px}
  .product-grid{gap:6px}
  .product-card{padding:8px}
  
  /* Minimal spacing */
  .nav{padding:8px}
  .nav ul{gap:6px}
  .nav a{font-size:13px;padding:8px 10px}
}

/* subtle pixel-ish text rendering */
.pixel-text{font-family:'Press Start 2P';letter-spacing:0.5px}