/* ==========================================================
   Maplewood School Supplies — e-catalog, 2002
   Bright, cheerful classroom e-commerce. Tables, bevels,
   primary-crayon colors. Shared across all pages.
   ========================================================== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#fff8df url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='%23fff8df'/><circle cx='8' cy='8' r='2' fill='%23ffe9a8'/><circle cx='28' cy='24' r='2' fill='%23ffe9a8'/></svg>");
  font-family:Verdana, Geneva, Arial, sans-serif;
  font-size:12px; color:#3a2f1a; line-height:1.6;
}
.wrap {
  max-width:840px; margin:0 auto; background:#fffdf6;
  border:3px solid #f2a900; border-top:none;
}

/* ---- header: crayon-box banner ---- */
.head {
  background:linear-gradient(180deg,#ffd34d 0%,#f2a900 100%);
  border-bottom:4px solid #c47e00;
  padding:14px 20px; position:relative;
}
.head .crayons {
  position:absolute; right:14px; top:12px; font-size:26px; letter-spacing:-4px;
  text-shadow:1px 1px 0 #fff; user-select:none;
}
.logo {
  font-family:'Comic Sans MS','Marker Felt',Arial,sans-serif;
  font-size:30px; font-weight:bold; color:#1a6b2f;
  text-shadow:2px 2px 0 #fff, 3px 3px 0 #c9e2c9;
}
.logo .apple { color:#cc2b2b; }
.tagline {
  font-family:'Comic Sans MS',Arial,sans-serif;
  font-size:12px; color:#7a4b00; font-style:italic; margin-top:2px;
}
.est { font-size:10px; color:#9a6a10; }

/* ---- nav: tabbed folder look ---- */
.nav {
  background:#1a6b2f; padding:0 8px; border-bottom:3px solid #0f4a1f;
  display:flex; flex-wrap:wrap;
}
.nav a {
  color:#eafaea; text-decoration:none; padding:7px 15px; font-size:11px;
  font-weight:bold; border-right:1px solid #0f4a1f;
}
.nav a:hover { background:#0f4a1f; color:#fff; }
.nav a.active { background:#fffdf6; color:#1a6b2f; }

/* ---- breadcrumb / search bar ---- */
.crumb {
  background:#fbf2cf; padding:5px 20px; font-size:10px; color:#8a6a30;
  border-bottom:1px solid #ecd99a; display:flex; justify-content:space-between; align-items:center;
}
.crumb a { color:#1a6b2f; }
.crumb .srch input {
  font-family:Verdana,sans-serif; font-size:10px; border:1px solid #c9a850;
  padding:1px 4px; background:#fff;
}
.crumb .srch button {
  font-size:10px; background:#f2a900; border:1px outset #ffd34d; color:#5a3a00;
  cursor:pointer; padding:1px 6px;
}

/* ---- layout ---- */
.body { padding:18px 20px; }
.cols { display:flex; gap:18px; }
.main { flex:1; min-width:0; }
.side { width:172px; flex-shrink:0; }

h1 {
  font-family:'Comic Sans MS',Arial,sans-serif; color:#cc2b2b;
  font-size:22px; margin-bottom:8px;
}
h2 {
  font-family:'Comic Sans MS',Arial,sans-serif; color:#1a6b2f; font-size:16px;
  border-bottom:2px dashed #ecd99a; padding-bottom:4px; margin:18px 0 10px;
}
h2:first-child { margin-top:0; }
h3 { color:#7a4b00; font-size:13px; margin:10px 0 3px; }
p { margin-bottom:9px; }
a { color:#1a6b2f; }
a:hover { color:#cc2b2b; }
.welcome { background:#eef8ee; border:1px dashed #9cc89c; padding:10px 12px; margin-bottom:14px; }

/* ---- category tiles (home) ---- */
.cats { display:flex; flex-wrap:wrap; gap:12px; }
.cat {
  width:calc(50% - 6px); border:2px solid #f2a900; background:#fffdf6;
  text-decoration:none; color:#3a2f1a; display:flex; gap:10px; padding:9px;
}
.cat:hover { background:#fff6da; border-color:#cc2b2b; }
.cat .ico { font-size:34px; line-height:1; flex-shrink:0; }
.cat .ct { font-weight:bold; color:#1a6b2f; font-size:13px; }
.cat .cs { font-size:10px; color:#8a6a30; }

/* ---- product grid ---- */
.grid { display:flex; flex-wrap:wrap; gap:12px; }
.prod {
  width:calc(33.33% - 8px); border:1px solid #d9c075; background:#fff;
  padding:8px; text-align:center; display:flex; flex-direction:column;
}
.prod .pic {
  height:78px; background:#f6f0d8; border:1px solid #e6d49a; margin-bottom:6px;
  display:flex; align-items:center; justify-content:center; font-size:42px;
}
.prod .pic img { max-width:74px; max-height:74px; }
.prod .nm { font-weight:bold; font-size:11px; color:#5a3a00; min-height:28px; }
.prod a.nm { text-decoration:none; }
.prod a.nm:hover { color:#cc2b2b; }
.prod .sku { font-size:9px; color:#aa9050; }
.prod .pr { color:#cc2b2b; font-weight:bold; font-size:14px; margin:4px 0; }
.prod .cart {
  margin-top:auto; background:#f2a900; border:2px outset #ffd34d; color:#5a3a00;
  font-family:Verdana,sans-serif; font-size:10px; font-weight:bold; cursor:pointer;
  padding:3px 0;
}
.prod .cart:hover { background:#ffd34d; }
.prod .stock { font-size:9px; color:#1a6b2f; margin-top:3px; }

/* ---- product detail ---- */
.detail { display:flex; gap:18px; }
.detail .dpic {
  width:230px; flex-shrink:0; border:2px solid #d9c075; background:#fff;
  padding:8px; text-align:center;
}
.detail .dpic img { max-width:100%; }
.detail .dpic .thumbs { margin-top:6px; font-size:9px; color:#8a6a30; }
.detail .dinfo { flex:1; min-width:0; }
.bigprice { color:#cc2b2b; font-size:28px; font-weight:bold; font-family:Georgia,serif; }
.was { color:#999; text-decoration:line-through; font-size:13px; }
.buybox { border:2px solid #1a6b2f; background:#eef8ee; padding:10px 12px; margin:12px 0; }
.buybox .big {
  display:block; width:100%; background:#cc2b2b; color:#fff; border:2px outset #e85b5b;
  font-family:'Comic Sans MS',Arial,sans-serif; font-size:15px; font-weight:bold;
  cursor:pointer; padding:7px 0; margin-bottom:6px;
}
.buybox .big:hover { background:#e03a3a; }
.buybox .alt {
  width:100%; background:#f2a900; color:#5a3a00; border:1px outset #ffd34d;
  font-family:Verdana,sans-serif; font-size:11px; cursor:pointer; padding:4px 0;
}

/* spec table */
table.t { width:100%; border-collapse:collapse; font-size:11px; margin:10px 0; }
table.t th { background:#1a6b2f; color:#fff; text-align:left; padding:5px 9px; font-size:10px; }
table.t td { border:1px solid #e6d49a; padding:5px 9px; vertical-align:top; }
table.t tr:nth-child(even) td { background:#fbf6e3; }
table.t td.lbl { background:#f6f0d8; font-weight:bold; color:#5a3a00; width:38%; }

/* fine print / requirement callout */
.fineprint {
  border:1px solid #d9c075; background:#fbf6e3; padding:9px 12px; margin:12px 0;
  font-size:10px; color:#7a6030; line-height:1.7;
}
.fineprint strong { color:#5a3a00; }

/* ---- side boxes ---- */
.sbox { background:#fbf6e3; border:2px solid #ecd99a; padding:9px 11px; margin-bottom:14px; font-size:11px; }
.sbox h4 {
  color:#1a6b2f; font-size:11px; font-family:'Comic Sans MS',Arial,sans-serif;
  border-bottom:1px solid #ecd99a; padding-bottom:3px; margin-bottom:6px;
}
.sbox p { margin-bottom:5px; }
.sbox a { display:block; padding:1px 0; }

.cartbox { background:#eef8ee; border:2px solid #9cc89c; }
.cartbox h4 { color:#cc2b2b; border-color:#cdeacd; }

/* reviews */
.review { border-top:1px dotted #d9c075; padding:8px 0; }
.review .stars { color:#f2a900; font-size:13px; }
.review .who { font-size:10px; color:#aa9050; font-style:italic; }

/* form */
.gform label { display:block; font-size:11px; font-weight:bold; color:#5a3a00; margin:6px 0 2px; }
.gform input, .gform textarea {
  width:100%; font-family:Verdana,sans-serif; font-size:11px;
  border:1px solid #c9a850; padding:3px 5px; background:#fff;
}
.gform textarea { height:60px; }
.gform button {
  margin-top:8px; background:#f2a900; border:2px outset #ffd34d; color:#5a3a00;
  font-family:'Comic Sans MS',Arial,sans-serif; font-size:12px; font-weight:bold;
  cursor:pointer; padding:4px 16px;
}
.gform button:hover { background:#ffd34d; }

/* ---- footer ---- */
.foot {
  background:#1a6b2f; color:#bfe0bf; font-size:10px; padding:14px 20px;
  text-align:center; line-height:1.9; border-top:4px solid #0f4a1f;
}
.foot a { color:#eafaea; }
.foot .tiny { color:#7aa87a; font-size:9px; }

/* 404 */
.lost { text-align:center; padding:34px 20px; }
.lost .big404 {
  font-family:'Comic Sans MS',Arial,sans-serif; font-size:64px; color:#f2a900;
  text-shadow:2px 2px 0 #c47e00;
}
.lost h1 { color:#cc2b2b; }
.lost .quiet { color:#8a6a30; font-style:italic; max-width:460px; margin:10px auto; }