/* ===========================
   MiniShop • Styles (Light)
   =========================== */

:root{
  --bg: #f8fafc;          /* slate-50 */
  --panel: #ffffff;       /* panel white */
  --card: #f1f5f9;        /* light card */
  --muted: #475569;       /* slate-600 */
  --text: #1e293b;        /* slate-800 */
  --accent: #2563eb;      /* blue-600 */
  --accent-2: #db2777;    /* pink-600 */
  --ok: #16a34a;          /* green-600 */
  --danger: #dc2626;      /* red-600 */
  --ring: rgba(37,99,235,.35);
  --shadow: 0 6px 20px rgba(0,0,0,.12);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;

  /* header height, useful if you switch to position:fixed */
  --header-h: 72px;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 800px at 10% -10%, #e2e8f0 0, #f8fafc 70%), var(--bg);
  color: var(--text);
}

a{ color:inherit }
.wrap{ max-width:1200px; margin:0 auto; padding: 20px; }

/* ===== Header (Sticky) ===== */
header{
  position: sticky;      /* <- sticky nav */
  top: 0;
  z-index: 1000;         /* higher than page content, lower than drawer */
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.bar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding: 16px 20px; max-width:1200px; margin:0 auto;
}

.brand{ display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.3px }
.brand .logo{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  box-shadow: var(--shadow);
}
.brand .logo svg{ width:22px; height:22px; }

.controls{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; width:100%; justify-content:flex-end }

/* Inputs / Buttons */
.input, select{
  background: #fff;
  border:1px solid rgba(0,0,0,.15);
  color: var(--text);
  padding:10px 12px; border-radius: 10px; outline:none; min-width: 200px;
}
.input:focus, select:focus{ box-shadow: 0 0 0 3px var(--ring); border-color: transparent }

.btn{ cursor:pointer; user-select:none; border:none; padding:10px 14px; border-radius: 10px; background: #e2e8f0; color:var(--text); display:inline-flex; gap:8px; align-items:center }
.btn:hover{ background:#cbd5e1 }
.btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; font-weight:700 }
.btn.icon{ padding:10px }

/* Cart button */
.cart-btn{ position:relative }
.cart-badge{ position:absolute; top:-6px; right:-6px; background: var(--danger); color:white; font-weight:700; border-radius:999px; padding:2px 6px; font-size:12px; min-width:22px; text-align:center }

/* Hero */
.hero{ padding: 28px 20px 10px }
.hero .wrap{ display:flex; align-items:center; gap:20px; justify-content:space-between; flex-wrap:wrap }
.headline{ font-size: clamp(22px, 3vw, 30px); font-weight:800 }
.sub{ color: var(--muted) }

/* Main & Grid */
main{ padding: 10px 20px 60px }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; align-items:stretch }
@media (max-width: 1200px){ .grid{ grid-template-columns: repeat(8, 1fr) } }
@media (max-width: 800px){ .grid{ grid-template-columns: repeat(4, 1fr) } }
@media (max-width: 520px){ .grid{ grid-template-columns: repeat(2, 1fr) } }

.card{
  grid-column: span 3; background: var(--card); border:1px solid rgba(0,0,0,.08);
  border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; min-height: 320px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 14px 46px rgba(0,0,0,.35) }

.thumb{ aspect-ratio: 16 / 10; background: linear-gradient(135deg, #0b1229, #152654); display:grid; place-items:center; position:relative }
.thumb img{ max-width: 80%; max-height: 72%; object-fit:contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)) }
.pill{ position:absolute; top:10px; left:10px; background:#ffffffcc; color:#334155; font-weight:700; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(0,0,0,.08) }

.body{ padding: 14px 14px 12px; display:grid; gap:10px; flex:1 }
.title{ font-weight:800; letter-spacing:.2px; line-height:1.2 }
.desc{ color: var(--muted); font-size: 13px; min-height: 38px }
.price-row{ display:flex; align-items:center; justify-content:space-between }
.price{ font-size: 18px; font-weight:800 }
.rating{ color:black; font-weight:700 }

/* empty state */
.empty{ grid-column: 1 / -1; background: #f8fafc; color: var(--muted); padding: 24px; border-radius: var(--radius); border:1px solid rgba(0,0,0,.06); text-align:center }

/* ===== Drawer (Cart) — on top of header ===== */
.drawer{
  position: fixed;
  inset:0;
  z-index: 3000; /* > header z-index */
  display:grid; grid-template-columns: 1fr min(520px, 90vw);
  pointer-events:none;
}
.drawer .scrim{ background: rgba(0,0,0,.25); opacity:0; transition: opacity .18s ease; z-index:3000; }
.drawer .panel{
  background: #fff; border-left: 1px solid rgba(0,0,0,.08); transform: translateX(100%); transition: transform .2s ease; display:flex; flex-direction:column; z-index:3001; box-shadow: var(--shadow);
}
.drawer.open{ pointer-events:auto }
.drawer.open .scrim{ opacity:1 }
.drawer.open .panel{ transform:none }

.panel header{ position:sticky; top:0; background:#fff; padding:16px; z-index:2; border-bottom: 1px solid rgba(0,0,0,.08) }
.panel header h2{ margin:0; font-size:18px }
.panel .content{ padding: 10px 16px 100px; display:grid; gap:12px; overflow:auto; height:100%;
  background: linear-gradient(180deg, rgba(248,250,252,.85), rgba(255,255,255,1) 40%);
}

.line{ display:grid; grid-template-columns: 64px 1fr auto; gap:12px; align-items:center; background:#f8fafc; border:1px solid rgba(0,0,0,.08); padding:10px; border-radius:12px }
.line .mini{ width:64px; height:64px; border-radius:10px; background:#eef2f7; display:grid; place-items:center }
.line .name{ font-weight:700; color: var(--text) }
.line .desc{ color: var(--muted) }
.qty{ display:flex; align-items:center; gap:6px }
.qty button{
  width:28px; height:28px; border-radius:8px; border:1px solid #cbd5e1;
  background:#f1f5f9; color:var(--text); box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
.qty button:hover{ background:#e2e8f0 }
.qty button:active{ transform: translateY(1px) }
.qty input{ width:44px; text-align:center; padding:6px 8px; border-radius:8px; border:1px solid #cbd5e1; background:#fff; color:var(--text) }

.line .btn{ background:#eef2f7; color: var(--text); border: 1px solid rgba(0,0,0,.06); }
.line .btn:hover{ background:#e5e9f2 }

.panel footer{ position:sticky; bottom:0; background: linear-gradient(0deg, #fff 70%, rgba(255,255,255,0)); padding: 14px 16px; border-top: 1px solid rgba(0,0,0,.08) }
.totals{ display:grid; gap:6px; color: var(--muted) }
.totals .row{ display:flex; justify-content:space-between }
.grand{ font-weight:800; font-size:18px; color: var(--text) }

/* Footer & small ui bits */
footer{ padding: 30px 20px; color: var(--muted) }
.kbd{ padding:.2rem .35rem; border:1px solid rgba(0,0,0,.3); border-bottom-width:2px; border-radius:6px; background:#fff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px }

/* Buttons in footer */
.btn{ background:#e2e8f0; color: var(--text) }
.btn:hover{ background:#cbd5e1 }
.btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:700 }

/* ===== Product Detail Page ===== */
#productPage{ padding: 20px; }
.pp-wrap{ max-width: 1100px; margin: 0 auto; }
.pp-breadcrumb{ margin-bottom: 12px; }
.pp-back{ text-decoration: none; font-weight: 700; color: var(--accent); }
.pp-back:hover{ text-decoration: underline; }

.pp-card{
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px;
  background: var(--panel); border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
@media (max-width: 900px){ .pp-card{ grid-template-columns: 1fr; } }

.pp-media{ position: relative; background: linear-gradient(135deg, #eef2f7, #fff); display: grid; place-items: center; min-height: 320px; }
.pp-media img{ max-width: 86%; max-height: 80%; object-fit: contain; }
.pp-media .pill{ position: absolute; top: 12px; left: 12px; }

.pp-body{ padding: 18px; display: grid; gap: 10px; align-content: start; }
.pp-title{ margin: 0; font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; }
.pp-meta{ display: flex; gap: 12px; align-items: baseline; }
.pp-price{ font-size: 22px; font-weight: 800; }
.pp-rating{ font-weight: 700; }
.pp-reviews{ color: var(--muted); }
.pp-cat{ color: var(--muted); }
.pp-desc{ color: var(--text); }
.pp-actions{ display: flex; gap: 10px; margin-top: 8px; }
.pp-placeholder{ width: 80%; height: 70%; border-radius: 12px; background:#f1f5f9; display:grid; place-items:center; color:#94a3b8; font-weight:700; }

/* Make entire product card tile clickable; action row separated */
.card .card-link{ display:block; color:inherit; text-decoration:none; }
.card .card-actions{ padding: 0 14px 14px; }

/* ===== Checkout Modal – Polished ===== */

/* Top-layer dim + blur */
.ck-modal::backdrop{
  background: rgba(15,23,42,.55);           /* slate-900 ~55% */
  backdrop-filter: blur(6px);
  animation: ck-fade .18s ease-out both;
}

/* Dialog container is transparent; card holds visuals */
.ck-modal{
  padding: 0;
  border: none;
  background: transparent;
}

/* Card */
.ck-card{
  width: min(880px, 92vw);
  margin: 0 auto;
  background:
    radial-gradient(1200px 600px at -20% -20%, #e2e8f0 0, transparent 60%),
    var(--panel);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(2,8,23,.35), var(--shadow);
  overflow: clip;
  animation: ck-rise .22s ease-out both;
}

/* Sticky-style header inside the card */
.ck-header{
  position: sticky;
  top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff 65%, rgba(255,255,255,.85));
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.ck-header h3{ margin: 0; font-size: 18px; font-weight: 800; letter-spacing:.2px }
.ck-header .ck-close{
  border: 1px solid rgba(0,0,0,.08);
  background: #f1f5f9;
  border-radius: 10px;
}
.ck-header .ck-close:hover{ background:#e2e8f0 }

/* Content area */
.ck-card form{ padding: 16px 18px 12px }

/* Summary panel */
.ck-summary{
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 14px;
  display: grid; gap: 8px;
}
.ck-summary .row{
  display:flex; justify-content:space-between; color: var(--muted);
}
.ck-summary .grand{
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,.12);
  color: var(--text);
  font-weight: 800; font-size: 18px;
}

/* Grid for fields */
.ck-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}
.ck-field{ display: grid; gap: 6px }
.ck-span-2{ grid-column: span 2 }
@media (max-width: 720px){
  .ck-grid{ grid-template-columns: 1fr }
  .ck-span-2{ grid-column: 1 / -1 }
}

/* Labels + controls */
.ck-field label{
  font-size: 12px;
  letter-spacing:.02em;
  color: var(--muted);
  font-weight: 700;
}
.ck-field input,
.ck-field textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
  color: var(--text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.ck-field textarea{ resize: vertical; min-height: 96px; }
.ck-field input:focus,
.ck-field textarea:focus{
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--ring);
  background: #fff;
}

/* Helpful invalid styling (native constraint validation) */
.ck-field input:invalid:not(:placeholder-shown),
.ck-field textarea:invalid:not(:placeholder-shown){
  border-color: rgba(220,38,38,.55); /* red-600 */
  box-shadow: 0 0 0 2px rgba(220,38,38,.25);
}
.ck-field input:required + .hint::before,
.ck-field textarea:required + .hint::before{ content:"* "; color: var(--danger) }

/* Actions footer */
.ck-actions{
  display:flex; gap:10px; justify-content:flex-end;
  padding: 14px 0 2px;
  position: sticky; bottom: -6px;
  background: linear-gradient(180deg, transparent, #fff 45%, #fff);
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 8px;
}

/* Buttons inherit your .btn tokens; tweak for prominence */
.ck-actions .btn.primary{
  box-shadow: 0 8px 24px rgba(37,99,235,.35);
}
.ck-actions .btn.primary:hover{
  filter: saturate(1.05);
  transform: translateY(-1px);
}
.ck-actions .btn:active{ transform: translateY(1px) }

/* Small totals shown inside the drawer reuse your tokens — no change */

/* Animations (respect motion preferences) */
@keyframes ck-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes ck-rise{
  from{ opacity:.6; transform: translateY(8px) scale(.995) }
  to{ opacity:1; transform: none }
}
@media (prefers-reduced-motion: reduce){
  .ck-modal::backdrop, .ck-card{ animation: none !important }
}

/* Optional: Dark-mode polish if you add a .dark class on <body> later */
body.dark .ck-card{ background: linear-gradient(135deg, #0b1229, #0f172a) }
body.dark .ck-header{ background: linear-gradient(180deg, #0f172a 65%, rgba(15,23,42,.85)) }
body.dark .ck-summary{ background: linear-gradient(135deg, #0f172a, #111827); border-color: rgba(255,255,255,.06) }
body.dark .ck-field input,
body.dark .ck-field textarea{ background:#0f172a; border-color: rgba(255,255,255,.08); color:#e5e7eb }
body.dark .ck-field input:focus,
body.dark .ck-field textarea:focus{ box-shadow: 0 0 0 3px rgba(59,130,246,.35) }

/* Product card thumbnail */
.thumb{
  aspect-ratio: 16 / 10;              /* consistent tile height from width */
  display: grid; 
  place-items: center;                 /* center both axes */
  background: linear-gradient(135deg, #0b1229, #152654);
  position: relative;
  overflow: hidden;
}

/* Image: fill box logically, never stretch, always centered */
.thumb img{
  width: 100%;
  height: 100%;
  display: block;                      /* removes baseline gap */
  object-fit: contain;                 /* keep proportions */
  object-position: center center;      /* force centering */
  /* optional: drop-shadow if you like */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
  overflow: hidden;
}

/* Product page image: same visual size for any image */
.pp-media{
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #eef2f7, #fff);
  border-radius: 12px;

  /* fixed-but-responsive height so every product looks the same */
  height: clamp(320px, 42vw, 520px);   /* min -> fluid -> max */
  padding: 12px;                       /* breathing room for contain */
}

#paypal-button-container {
  margin-top: 14px;
}
@media (max-width: 900px){
  .pp-media{ height: clamp(260px, 55vw, 380px); }
}

/* Force the image to fill the box proportionally */
.pp-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;    /* keep aspect ratio, no cropping */
  object-position: center;
  display: block;
  overflow: hidden;
}