:root{--bg:#0b0f14;--muted:#9aa4b2;--text:#e6edf6;--accent:#ff7a18;--accent2:#ffb100;--border:rgba(255,255,255,.08);--shadow:0 10px 25px rgba(0,0,0,.25);--radius:18px;--max:1120px;--font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#070a0f 0%, #0b0f14 25%, #0b0f14 100%);color:var(--text);font-family:var(--font)}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(7,10,15,.65);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;gap:14px;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:12px 24px}
.brand{display:flex;flex-direction:column;gap:2px}
.brand-top{display:flex;gap:10px;align-items:center;font-weight:900;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted)}
.badge-dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;transition:.15s;user-select:none}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.btn.primary{background:linear-gradient(135deg,var(--accent) 0%, var(--accent2) 100%);color:#0b0f14;border-color:transparent;font-weight:900}
.btn.ghost{background:transparent}
.btn.disabled{opacity:.45;pointer-events:none}
.pill{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.02)}
.count-badge{min-width:22px;height:22px;border-radius:999px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text)}
.hero{padding:44px 0 18px}
.hero-grid{display:grid;gap:18px;grid-template-columns:1.35fr .65fr}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr}}
.h1{font-size:44px;line-height:1.05;margin:0 0 12px;letter-spacing:-.8px}
.p{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 18px}
.card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.card.pad{padding:18px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:28px 0 12px}
.h2{margin:0;font-size:18px;letter-spacing:.2px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
.pcard{overflow:hidden;position:relative}
.pimg{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pbody{padding:12px}
.ptitle{font-weight:900;font-size:14px;line-height:1.25;margin:0 0 8px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.small{font-size:12px;color:var(--muted)}
.toolbar{display:grid;gap:10px;grid-template-columns:1.2fr .8fr .8fr .7fr;margin:14px 0}
@media(max-width:920px){.toolbar{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.toolbar{grid-template-columns:1fr}}
.input,select,textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);outline:none}
.input::placeholder{color:rgba(154,164,178,.75)}
.footer{margin-top:40px;padding:24px 0 40px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
.breadcrumbs{color:var(--muted);font-size:13px;margin:16px 0}
.product-wrap{display:grid;gap:14px;grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:920px){.product-wrap{grid-template-columns:1fr}}
.gallery{display:grid;gap:10px}
.gmain{aspect-ratio:4/3;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.gmain img{width:100%;height:100%;object-fit:cover;display:block}
.gthumbs{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.gthumb{aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:rgba(255,255,255,.03);cursor:pointer}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.hr{height:1px;background:var(--border);margin:14px 0}
.rich{color:var(--text)}
.rich *{max-width:100%}
.rich h1,.rich h2,.rich h3{margin:14px 0 8px}
.rich p,.rich li{color:rgba(230,237,246,.9);line-height:1.6}
.rich table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.rich th,.rich td{border:1px solid var(--border);padding:8px;vertical-align:top}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{border:1px solid var(--border);padding:10px;vertical-align:top}
.table th{color:var(--muted);font-weight:700;text-align:left}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.notice{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.18);color:rgba(230,237,246,.92)}
@media print{.nav,.no-print{display:none !important;}body{background:#fff;color:#000}.card{box-shadow:none;border:1px solid #ddd}a{text-decoration:none;color:#000}}

/* v9: image polish */
.pimg{
  aspect-ratio: 1 / 1;
  background:#ffffff;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  padding:14px;
}
.pimg img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition: transform .18s ease;
  transform: translateZ(0);
}
.pcard:hover .pimg img{ transform: scale(1.06); }

/* product page main image: keep square + contain */
.gmain{ aspect-ratio: 1 / 1; }
.gmain img{ object-fit: contain; }
.gthumb img{ object-fit: contain; }


/* v11: dropdown readability */
select, option{
  color: var(--text);
}
select{
  background: rgba(255,255,255,.05);
}
/* Many browsers render option list with OS colors; force a dark-friendly option background where supported */
select option{
  background: #0b0f14;
  color: var(--text);
}
select:focus, .input:focus, textarea:focus{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,122,24,.18);
}


/* Category tiles */
.cat-grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}
.cat-tile{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);box-shadow:var(--shadow);padding:18px;transition:.18s}
.cat-tile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(255,122,24,.28), 0 18px 40px rgba(0,0,0,.35)}
.cat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cat-name{font-weight:900;font-size:18px;letter-spacing:.2px}
.cat-desc{color:var(--muted);margin-top:8px;line-height:1.35}
.cat-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:22px}
.cat-cta{margin-top:14px;display:flex;justify-content:flex-start}
.cat-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.0);background:var(--accent);color:#0b0f14;font-weight:900;cursor:pointer;transition:.15s}
.cat-tile:hover .cat-btn{background:#cc5f12;transform:translateY(-1px)}


/* --- Homepage layout tweaks (v17 hotfix3) --- */
.sidebar{align-self:start}
.cat-grid.fullwidth{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.cat-grid.fullwidth{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.cat-grid.fullwidth{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* v20 upgrades: header, featured cards, category icons */
.brand img{height:92px !important;width:auto !important}
@media (max-width: 640px){.brand img{height:76px !important}}
.brand-sub{color:#fff !important;font-weight:650 !important;font-size:15px !important}

/* Featured products cards */
.fprod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 980px){.fprod-grid{grid-template-columns:1fr}}
.fprod-card{background:#12161b;border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.25);transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.fprod-card:hover{transform:translateY(-2px);border-color:rgba(255,122,0,.55);box-shadow:0 0 0 3px rgba(255,122,0,.10), 0 10px 26px rgba(0,0,0,.35)}
.fprod-img{display:block;background:#ffffff;aspect-ratio:16/10}
.fprod-img img{width:100%;height:100%;object-fit:contain;display:block;padding:10px}
.fprod-body{padding:12px}
.fprod-title{font-weight:850;font-size:13px;line-height:1.2;max-height:2.4em;overflow:hidden}
.fprod-sub{margin-top:6px;color:var(--muted);font-size:12px}
.fprod-actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* Category tiles: bigger icons + slick */
.cat-top{gap:10px !important}
.cat-icon{
  font-size:18px !important;
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.cat-tile:hover .cat-icon{
  border-color:rgba(255,122,0,.55);
  box-shadow:0 0 0 3px rgba(255,122,0,.10);
}

/* Category grid fixed 3x3 */
.cat-grid.fullwidth{display:grid;grid-template-columns:repeat(3,1fr) !important;gap:16px !important}
@media (max-width: 980px){.cat-grid.fullwidth{grid-template-columns:repeat(2,1fr) !important}}
@media (max-width: 640px){.cat-grid.fullwidth{grid-template-columns:1fr !important}}


/* Toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);opacity:0;
  background:#12161b;border:1px solid rgba(255,255,255,.12);color:#fff;padding:10px 14px;border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);transition:opacity .18s ease, transform .18s ease;z-index:9999;font-weight:650}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


/* v21c: hard lock category grid */
.cat-grid.fullwidth{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px !important}
@media(max-width:980px){.cat-grid.fullwidth{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:640px){.cat-grid.fullwidth{grid-template-columns:1fr !important}}


/* v21d: hard lock category grid */
.cat-grid.fullwidth{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px !important}
@media(max-width:980px){.cat-grid.fullwidth{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:640px){.cat-grid.fullwidth{grid-template-columns:1fr !important}}


/* v22: browse product tile glow */
.pcard{transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.pcard:hover{transform:translateY(-2px);border-color:rgba(255,122,0,.55);box-shadow:0 0 0 3px rgba(255,122,0,.10), 0 10px 26px rgba(0,0,0,.35)}
.pcard:hover .pimg{box-shadow:inset 0 0 0 1px rgba(255,122,0,.22), 0 0 30px rgba(255,122,0,.08)}

/* Keep product detail image calmer */
.gmain:hover{border-color:rgba(255,255,255,.14);box-shadow:none}

/* homepage layout polish */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){.how-grid{grid-template-columns:1fr}}
.how-card{min-height:150px}

/* CLEAN PRODUCT IMAGE BOX */
.gmain {
    background: #ffffff;
    padding: 30px;
    border: 3px solid #cfcfcf;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    display: flex;
    align-items: center;      /* THIS fixes vertical alignment */
    justify-content: center;  /* centers horizontally */
}

.gmain img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}