/* === THEME TOKENS === */ /* Default: LIGHT */ :root{ --bg:#f6f8fc; --bg2:#eef2f7; --card:#ffffff; --muted:#475569; --text:#0b0f17; --accent:#3b82f6; --accent-2:#6366f1; --border:#d1d5db; } /* Dark when */ .theme-dark{ --bg:#0b0f17; --bg2:#0e1220; --card:#121829; --muted:#9aa3b2; --text:#eef2f7; --accent:#6c7cff; --accent-2:#8a7dff; --border:#1e2437; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:linear-gradient(180deg,var(--bg),var(--bg2)); color:var(--text); } a{color:var(--text);text-decoration:none;opacity:.9} a:hover{opacity:1} /* Full-width containers */ .container{width:min(1280px,100% - 32px);margin:0 auto;padding:16px} .container-wide{width:min(1600px,100% - 32px);margin:0 auto;padding:16px} /* Header */ .site-header{display:flex;align-items:center;justify-content:space-between;padding:12px 0; font-size: 20px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px} .nav{display:flex;gap:18px} .muted{opacity:.7} .section-title{margin:18px 0 8px;font-size:20px;opacity:.9} /* Hero */ .hero{ padding:56px 0; background:radial-gradient(1200px 400px at 50% -10%, color-mix(in oklab,var(--accent) 25%, transparent), transparent 60%); } .hero h1{font-size:36px;margin:0 0 10px} .hero p{max-width:680px;opacity:.85;margin:0 0 16px} .cta{display:inline-block;background:var(--accent);padding:12px 16px;border-radius:12px;font-weight:700;color:#fff} .cta:hover{filter:brightness(1.08)} /* Cards / grid */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px} .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)} .product{display:flex;flex-direction:column;gap:10px;transition:transform .15s ease, box-shadow .15s ease} .product:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.12)} .product img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#f3f4f6} .price-line{display:flex;justify-content:space-between;align-items:center;gap:8px} /* Buttons */ button{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer} button:hover{filter:brightness(0.98)} button.primary{background:var(--accent);border:none;color:#fff} /* Theme toggle button */ .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:10px; border:1px solid var(--border);background:var(--card); font-size:18px;line-height:1;padding:0; } .icon-btn:hover{filter:brightness(0.98)} /* Reusable buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer;background:#f8fafc;color:#0b0f17} .theme-dark .btn{background:#0f1524;color:#fff} .btn.lg{padding:14px 18px;font-size:16px} .btn.success{background:#16a34a;border-color:#15803d;color:#fff} .btn.success:hover{filter:brightness(1.05)} /* Forms */ .form .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .form label{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;font-weight:600} input,textarea,select{ display:block;width:100%; background:#ffffff;color:#0b0f17; border:1.5px solid #cbd5e1;border-radius:10px;padding:10px 12px; } .theme-dark input,.theme-dark textarea,.theme-dark select{background:#0e1320;color:#e5e7eb;border-color:#2b344d} input::placeholder{color:#7b8496} input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);border-color:#94a3b8} /* Table */ .table{width:100%;table-layout:fixed;border-collapse:collapse} .table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left} .table thead th{opacity:.85;font-weight:700} .table colgroup col.col-id{width:80px} .table colgroup col.col-title{width:auto} .table colgroup col.col-price{width:140px} .table colgroup col.col-stock{width:140px} .table colgroup col.col-actions{width:160px} .table td:last-child{text-align:right} /* Badges */ .badge{padding:2px 8px;border-radius:999px;font-size:12px;background:#e8f5ee;color:#065f35;border:1px solid #b7e2c9} .theme-dark .badge{background:#1b2237;border-color:#27304a;color:#cfe9da} .badge.ok{background:#e8f5ee;border-color:#b7e2c9;color:#065f35} .theme-dark .badge.ok{background:#11341f;border-color:#1f5d31;color:#b7f7cf} .badge.no{background:#fee2e2;border-color:#fecaca;color:#7f1d1d} .theme-dark .badge.no{background:#3a1414;border-color:#5a2121;color:#f8b} .site-footer{display:flex;align-items:center;justify-content:space-between;opacity:.85;padding-top:12px} /* Cart drawer */ .drawer{position:fixed;right:0;top:0;height:100%;width:380px;background:var(--card); border-left:1px solid var(--border);box-shadow:-10px 0 30px rgba(0,0,0,.15);display:flex;flex-direction:column} .drawer.hidden{display:none} .drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)} .drawer-footer{margin-top:auto;border-top:1px solid var(--border);padding:16px;display:flex;align-items:center;justify-content:space-between} .cart-item{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border)} .cart-item img{width:64px;height:64px;object-fit:cover;border-radius:8px} .cart-item .grow{flex:1} /* Profile dropdown menu */ .menu{position:relative} .menu-trigger{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px 12px; font-weight:600; cursor:pointer; } .menu-list{ position:absolute;right:0;top:calc(100% + 8px); min-width:180px;background:var(--card); border:1px solid var(--border);border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); display:grid;padding:8px;gap:4px;z-index:30; } .menu-list.hidden{display:none} .menu-list a,.menu-list .linklike{ padding:10px 12px;border-radius:8px;text-align:left; background:transparent;border:none;color:var(--text); text-decoration:none;cursor:pointer; } .menu-list a:hover,.menu-list .linklike:hover{ background:color-mix(in oklab,var(--accent) 12%, transparent); } /* Logout red override */ .menu-list .linklike.logout-btn{color:#dc2626;font-weight:600} .menu-list .linklike.logout-btn:hover{background:rgba(220,38,38,.1)} /* ===== Product modal / gallery ===== */ .modal.hidden { display: none; } .modal { position: fixed; inset: 0; z-index: 60; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); } .modal-card { position: relative; z-index: 61; width: min(1100px, 96vw); max-height: 92vh; margin: 4vh auto; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.25); } .modal-close { position: absolute; top: 10px; right: 10px; z-index: 3; } .modal-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; padding: 20px; } @media (max-width: 900px) { .modal-body { grid-template-columns: 1fr; } } .gallery { display: grid; gap: 12px; } /* NEW: viewer wraps the big image and the arrows */ .viewer { position: relative; height: min(64vh, 560px); display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 12px; } .theme-dark .viewer { background: #0f1524; } .viewer img#gMain { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; } /* Arrows now center within the viewer only */ .gallery .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--card); border: 1px solid var(--border); border-radius: 999px; width: 36px; height: 36px; font-size: 22px; line-height: 32px; display: inline-flex; align-items: center; justify-content: center; } .gallery .gallery-nav.left { left: 8px; } .gallery .gallery-nav.right { right: 8px; } /* Thumbnails row — keep items in one line */ .thumbs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 8px 0 4px; align-items: center; } .thumbs img, .thumbs video { flex: 0 0 auto; width: 70px; height: 70px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; background: #f3f4f6; } .theme-dark .thumbs img, .theme-dark .thumbs video { background: #0f1524; } .thumbs img.active, .thumbs video.active { border-color: var(--accent); } .details{display:grid;gap:14px;align-content:start} .details h2{margin:0} .m-price{font-size:20px;font-weight:800} .qty-row{display:grid;gap:6px;width:160px} .qty-row input{text-align:center} .actions{display:flex;gap:12px;flex-wrap:wrap} /* Hide any lingering descriptions on cards */ .product .desc{display:none} /* ===== Lightbox (click-to-zoom) ===== */ .lightbox.hidden{display:none} .lightbox{position:fixed;inset:0;z-index:70} .lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8)} .lightbox img{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.4) } .lb-close{position:absolute;top:12px;right:12px;z-index:71} /* Quantity input inside cart drawer */ .qty-input{ width:72px; text-align:center; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--card); color:var(--text); margin-right:10px; } /* Red trash button */ .trash-btn{ border:1px solid #fecaca; background:#fee2e2; color:#991b1b; font-weight:700; border-radius:10px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .trash-btn:hover{ background:#fecaca; } .theme-dark .trash-btn{ border-color:#5a2121; background:#3a1414; color:#fecaca; } .trash-btn:hover{ filter:brightness(1.03); } /* ===== Branding bits ===== */ .brand img.site-logo{ width:36px;height:36px;object-fit:contain;border-radius:8px;display:inline-block; } .brand .site-name{ font-weight:800;letter-spacing:.3px; } /* Make the auto-injected header stay at the top while scrolling */ #app-header{ position: sticky; top: 0; z-index: 1000; /* sit above page content */ background: var(--card); /* solid backdrop so text stays readable */ border-bottom: 1px solid var(--border); /* Optional polish */ backdrop-filter: saturate(1.1) blur(6px); } /* Grey catalog section that covers products + pager */ .catalog{ background: var(--bg2); padding: 24px 0 56px; /* extra bottom so pager sits on grey */ } /* Pager container (the JS already sets flex styles, this is a safety net) */ #pager{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; margin: 18px 16px 0; } /* White info section with two columns */ .info-panels{ background: var(--card); border-top: 1px solid var(--border); padding: 28px 0 36px; } .info-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .info-panels .label{ margin: 0 0 10px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: .75; } .info-panels .links{ list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .info-panels .links a{ color: var(--text); text-decoration: none; opacity: .9; } .info-panels .links a:hover{ opacity: 1; text-decoration: underline; } main h2 { margin-top: 2em; border-bottom: 2px solid #eee; padding-bottom: 0.3em; } /* --- Cart drawer: keep it clear of the sticky header --- */ :root{ /* tune if your header is taller/shorter */ --header-h: 64px; } /* slightly smaller header on narrow screens */ @media (max-width: 480px){ :root{ --header-h: 56px; } } .drawer{ /* push the drawer down below the header */ top: var(--header-h); height: calc(100vh - var(--header-h)); z-index: 999; /* ensure it’s above page content but below modals if any */ overflow-y: auto; /* so the whole list is scrollable */ -webkit-overflow-scrolling: touch; } /* keep the drawer’s header visible while you scroll the cart */ .drawer .drawer-header{ position: sticky; top: 0; background: var(--surface); z-index: 1; } /* keep the drawer’s footer stuck to the bottom of the drawer */ .drawer .drawer-footer{ position: sticky; bottom: 0; background: var(--surface); z-index: 1; /* optional: a little shadow so it feels elevated while scrolling */ box-shadow: 0 -6px 16px rgba(0,0,0,.06); }