/* Times + Sharp Parallelogram Theme with Product Cards & Cart */
:root{
  --bg:#f6f9ff; --panel:#ffffff; --panel-hi:#f5f8ff; --edge:#c9d8fb;
  --text:#0f172a; --muted:#475569; --accent:#2563eb; --blue:#1d4ed8;
  --wrap:980px; --sheen-speed:1.3s; --red-glow:rgba(220,38,38,.10);
  --red-ring:rgba(220,38,38,.14); --blue-glow:rgba(59,130,246,.25);
  --price:#b91c1c;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(99,147,255,.12), transparent 60%), var(--bg);
  color:var(--text); font:16px/1.6 "Times New Roman", Times, serif; letter-spacing:.2px; overflow-x:hidden;
}
button,input,select,textarea{ font:inherit }
a{ color:var(--accent); text-decoration:none } a:hover{ text-decoration:underline }

/* Masthead */
.masthead{ position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  padding:10px 6px 14px; border-bottom:1px solid #dbe4ff; }
.masthead::before{ content:""; position:absolute; left:0; right:0; top:0; height:58px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.55) 55%,rgba(255,255,255,.2) 85%,transparent); pointer-events:none }
.logo{ font-family:"Times New Roman", Times, serif; font-style:italic; font-weight:800;
  font-size:46px; letter-spacing:.5px; color:var(--blue); text-shadow:0 1px 0 rgba(255,255,255,.9);
  filter:drop-shadow(0 0 14px var(--blue-glow)) drop-shadow(0 0 28px var(--blue-glow));
}
.mast-right{ display:flex; align-items:flex-end; gap:10px }
.flag{ width:28px; height:20px; border:1px solid #cbd5e1; box-shadow:0 1px 0 rgba(255,255,255,.9); border-radius:3px; overflow:hidden }
.flag svg{ width:100%; height:100%; display:block }
.tag{ color:#334155; text-transform:uppercase; font-size:12px; letter-spacing:2px }

/* Cart badge (for Snipcart) */
.cart-badge{ margin-left:8px; font-size:13px; color:#0f172a; background:#fff; border:1px solid #e5e7eb; padding:4px 8px;
  clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8) }
.cart-link{ text-decoration:none }

.wrap{ position:relative; z-index:1; width:var(--wrap); margin:32px auto }
.chrome{ display:grid; grid-template-columns:230px 1fr; gap:18px; margin-top:16px }
.scanlines{ position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 2px, transparent 4px); mix-blend-mode:screen }

/* Panels & Cards: sharp parallelogram */
.panel, .card{
  position:relative; background:linear-gradient(180deg,#fff 0%,#f7faff 55%,#eef4ff 100%);
  border:1px solid var(--edge);
  clip-path:polygon(2.8% 0, 100% 0, 97.2% 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(0,0,0,.06), 0 2px 0 rgba(255,255,255,.85),
              0 0 0 2px rgba(255,255,255,.7), 0 0 18px var(--red-glow);
}
.panel::after, .card::after{ content:""; position:absolute; left:10px; right:10px; top:8px; height:36px;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.15) 80%,transparent); pointer-events:none }

/* Sidebar nav */
.menu{ display:flex; flex-direction:column; gap:14px; padding:16px }
.menu .item{
  position:relative; display:inline-block; padding:14px 24px; color:#0f172a; text-decoration:none;
  text-transform:uppercase; letter-spacing:.8px; font-weight:800;
  background:linear-gradient(180deg,#fff,#eef3ff); border:1px solid #cfe0ff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 2px 0 rgba(255,255,255,.85), 0 10px 20px rgba(30,64,175,.10);
  clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%); overflow:hidden;
}
.menu .item.current{ outline:2px solid #93c5fd }

/* Content */
.status{ margin-top:12px; padding:18px }
.status h3{ margin:0 0 6px; font-size:14px; text-transform:uppercase; color:#1e293b; letter-spacing:.8px }
.muted{ color:var(--muted) }
.small{ font-size:14px }
.content{ min-height:520px }
.section{ padding:22px 24px 26px; margin-bottom:18px }
.section h1, .section h2{ margin:0 0 12px }
.section h2{ font-size:18px; text-transform:uppercase; letter-spacing:1px; color:#0f172a; border-bottom:1px solid #dbe4ff; padding-bottom:12px }
.breadcrumbs{ font-size:14px; color:#475569; margin:6px 0 14px }
.breadcrumbs a{ color:#334155 }

.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin-top:10px }
.card .img-wrap{ aspect-ratio:4/3; overflow:hidden; background:#f1f5f9; clip-path:inherit }
.card img{ width:100%; height:100%; object-fit:cover; display:block }
.card .card-head{ font-weight:800; color:#0f172a; margin:8px 12px 4px }
.card .price{ color:var(--price); font-weight:800; margin:0 12px 8px }
.card .card-body{ color:#334155; margin:0 12px 12px }
.card .cta-row{ display:flex; gap:8px; align-items:center; padding:0 12px 12px }
.btn{ position:relative; display:inline-block; padding:10px 14px;
  background:linear-gradient(180deg,#9fd0ff,#67b1ff 55%,#3b82f6 100%); color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  border:1px solid rgba(37,99,235,.55); cursor:pointer;
  clip-path:polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), 0 1px 0 rgba(255,255,255,.9), 0 18px 32px rgba(30,64,175,.18);
}
.btn.secondary{ background:linear-gradient(180deg,#fff,#eef3ff); color:#0f172a; border:1px solid #cfe0ff }
.btn:disabled{ opacity:.6; cursor:not-allowed }

.footer{ text-align:center; color:#475569; padding:14px 6px; margin-top:8px; font-size:12px }
.footer .legal{ max-width:var(--wrap); margin:0 auto; text-align:left; font-size:12px; color:#334155 }
.footer .legal h4{ margin:16px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.8px }
.footer .legal ul{ margin:0; padding-left:18px }
.footer .legal a{ color:#0f172a }
@media (max-width:1000px){ .wrap{ width:100%; padding:0 12px } .chrome{ grid-template-columns:1fr } }