:root{--bg:#0b0b0f;--card:#12131a;--muted:#9aa0aa;--text:#f2f2f2;--gold:#d6b25e;--line:rgba(255,255,255,.08)}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:18px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,11,15,.92);backdrop-filter:blur(10px)}
.brand{font-weight:1000;font-size:22px;color:var(--gold);letter-spacing:.4px}
.navlinks a{margin-left:10px;padding:8px 12px;border:1px solid var(--line);border-radius:999px}
.btnGold{background:var(--gold);color:#111;font-weight:900;border:0;border-radius:999px;padding:10px 14px;cursor:pointer}
.btn{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:999px;padding:10px 14px;cursor:pointer}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:950px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.grid{grid-template-columns:1fr}}
.img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.small{font-size:12px}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hr{height:1px;background:var(--line);margin:12px 0}
.input, textarea, select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:#0f1016;color:var(--text)}
.price{font-weight:1000;color:var(--gold);font-size:18px}
.old{color:var(--muted);text-decoration:line-through;margin-left:8px}


/* ===== MOBILE_HEADER_BUTTONS_FIX_V1 ===== */
@media (max-width: 520px){
  /* Make header areas wrap nicely */
  header, .header, .topbar, .nav, .nav-right, .navLinks, .menu, .row{
    flex-wrap: wrap;
  }

  /* If your header uses flex rows, add spacing */
  header .row, .topbar .row, .nav .row, .header .row,
  header nav, .topbar nav, .header nav, .nav{
    gap: 10px;
    row-gap: 10px;
    align-items: center;
  }

  /* Buttons/links in the header: give breathing room and allow wrapping */
  header a.btn, header a.btnGold, header button.btn, header button.btnGold,
  .topbar a.btn, .topbar a.btnGold, .topbar button.btn, .topbar button.btnGold,
  nav a.btn, nav a.btnGold, nav button.btn, nav button.btnGold{
    white-space: nowrap;
    margin: 0 !important;
    padding: 10px 14px;
    border-radius: 999px;
  }

  /* If your header right side exists, push it neatly */
  .nav-right, .right, .topbar-right{
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}
/* ===== END MOBILE_HEADER_BUTTONS_FIX_V1 ===== */

/* ===== MOBILE HEADER BUTTON FIX V1 ===== */
@media (max-width: 520px) {
  /* header area: allow wrapping cleanly */
  .topbar, header, .header, .nav, .navRow {
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* make button group wrap nicely */
  .topbar .row, header .row, .nav .row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* keep main menu buttons on one row if possible */
  .topbar a.btn, .topbar button.btn,
  header a.btn, header button.btn,
  .nav a.btn, .nav button.btn {
    white-space: nowrap !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
  }

  /* push logout to a new line and make it clear */
  a.btn.logout, button.btn.logout,
  form.logoutForm, form[action="/logout"] {
    flex-basis: 100% !important;
  }

  /* if logout is an <a> or <button> inside a form */
  form[action="/logout"] button,
  form[action="/logout"] .btn,
  a[href="/logout"].btn {
    width: 100% !important;
    text-align: center !important;
  }
}
/* ===== END MOBILE HEADER BUTTON FIX V1 ===== */



/* ===== MOBILE LOGOUT TOP RIGHT FIX V3 ===== */
@media (max-width: 520px) {
  .nav { position: relative; padding-top: 52px; }
  .navlinks { display: flex; flex-wrap: wrap; gap: 10px; }

  /* target logout form/button */
  .navlinks form[action="/account/logout"] {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    z-index: 1000;
  }
  .navlinks form[action="/account/logout"] button {
    margin: 0;
    white-space: nowrap;
  }
}
/* ===== END FIX ===== */

/* ===== HEADER CLEAN MOBILE LAYOUT V3 ===== */
@media (max-width: 520px) {

  /* Make brand a bit bigger */
  header h1,
  header .logo,
  .brand,
  .site-title {
    font-size: 38px !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
  }

  /* Cancel the old "top-right floating logout" */
  a[href="/logout"],
  form[action="/logout"],
  form[action="/logout"] button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  /* Make nav row wrap nicely */
  header .row,
  .topbar .row,
  .nav .row,
  header nav,
  .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* Put Logout on same row as My Account and push it to the right */
  a[href="/logout"],
  form[action="/logout"] button {
    margin-left: auto !important;
  }

}
/* ===== END HEADER CLEAN MOBILE LAYOUT V3 ===== */