/* =======================
   Base
   ======================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: #f6f6f6;
  color: #222;
}

/* =======================
   Header
   ======================= */
header {
  height: 56px;
  padding: 0 16px;
  background: #1d1d1d;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo { display: flex; height: 100%; flex: 0 0 auto; }

/* header logo image sizing */
header .logo img{
  height: 48px;          /* desktop visual size */
  width: auto;
  display: block;
  max-height: 56px;      /* never exceed the bar */
}

/* nav */
.main-nav { display: flex; align-items: center; gap: 1rem; }
.main-nav a { color: #fff; text-decoration: none; }
.new-account { background: #00b300; color: #fff; border: 0; padding: 0.4rem 0.8rem; }

/* =======================
   Logo strip + About
   ======================= */
.logo-strip {
  background-color: #003b49;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0;
}

.about-banner {
  background: #fff8e1;
  padding: 1rem 2rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  font-size: 0.95rem;
  border-top: 1px solid #ccc;
}
.about-banner strong { color: #333; }

/* =======================
   Info banner
   ======================= */
.info-banner {
  background: #e2e2e2;
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
}
.info-banner a { color: #0056b3; text-decoration: underline; }

/* =======================
   Layout
   ======================= */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.main-content {
  display: flex;
  padding: 2rem;
}

.sidebar { flex: 0 0 200px; margin-right: 2rem; width: auto; }
.sidebar h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.sidebar ul { list-style: none; padding: 0; }
.sidebar li { padding: 0.3rem 0; }

.auction-area { flex: 1; }

.filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* grid of cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

/* card */
.item-card {
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}
.card-link { text-decoration:none; color:inherit; display:block; }

.item-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.item-info { padding: 0.8rem; }
.item-info h4 { margin: 0 0 0.5rem; font-size: 1rem; }
.item-info .bid { color: #009900; margin: 0.2rem 0; }
.item-info .time { font-size: 0.85rem; color: #c40000; }

/* =======================
   Features
   ======================= */
.features {
  background: #f9f9f9;
  padding: 4rem 2rem;
  text-align: center;
}
.features h2 {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  color: #111;
  margin-bottom: 3rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 2.5rem;
}
.feature { display: flex; flex-direction: column; align-items: center; }
.feature-icon {
  width: 120px; height: 120px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 0 8px #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}

.feature h4 { font-size: 1.1rem; margin-bottom: 0.5rem; color: #444; }
.feature p  { font-size: 0.95rem; color: #555; line-height: 1.6; }

/* =======================
   Footer
   ======================= */
footer {
  background: #1d1d1d;
  color: white;
  padding: 2rem;
  font-size: 0.9rem;
}
.footer-cols { display: flex; justify-content: space-between; }
footer h5 { margin-bottom: 0.5rem; font-size: 1rem; }
footer ul { list-style: none; padding: 0; }
footer a { color: #ccc; text-decoration: none; }

/* =======================
   Image baseline (do not break header logo)
   ======================= */
.item-card img,
.feature-icon img,
.logo-strip img { max-width: 100%; height: auto; display: block; }

/* =======================
   Dark‑mode hard colors
   ======================= */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; } /* keep forms light */
  body   { background:#f6f6f6; color:#222; }
  header { background:#1d1d1d; color:#fff; }
  .logo-strip   { background:#003b49; }
  .about-banner { background:#fff8e1; color:#333; }
  .info-banner  { background:#e2e2e2; color:#222; }
  .sidebar, .auction-area { background:transparent; }
  footer { background:#1d1d1d; color:#fff; }
}

/* gradients to discourage auto-darkening */
.logo-strip   { background: linear-gradient(#003b49,#003b49); }
.about-banner { background: linear-gradient(#fff8e1,#fff8e1); }
.info-banner  { background: linear-gradient(#e2e2e2,#e2e2e2); }

/* =======================
   Sidebar collapsible
   ======================= */
.sidebar .mobile-collapse {
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  background: #2a2a2a;
  padding: 0.25rem 0.75rem;
}

.sidebar .mobile-collapse > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 0.75rem 0;
  font-weight: 600;
  color: #eee;
  position: relative;
}
.sidebar .mobile-collapse > summary::-webkit-details-marker { display: none; }
.sidebar .mobile-collapse > summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
}
.sidebar .mobile-collapse[open] > summary::after { content: "–"; }

/* =======================
   Categories list (clean links + small count badge)
   ======================= */
#catList { margin:.5rem 0 0; padding:0; list-style:none; }
#catList li { border-bottom: 1px solid rgba(255,255,255,.08); }
#catList li:last-child { border-bottom: 0; }

#catList button{
  -webkit-appearance:none; appearance:none;
  background:transparent; border:0; color:#eee;
  width:100%; text-align:left;
  padding:.45rem .5rem;
  border-radius:6px;
  font: inherit;
  display:flex; align-items:center; gap:.5rem;
  cursor:pointer;
}
#catList button:hover { background: rgba(255,255,255,.06); }
#catList button.cat-selected{
  color:#fff; font-weight:700;
  background: rgba(0,179,0,.14);
}
#catList .cat-count{
  margin-left:auto;
  font-size:.85rem;
  color:#ddd;
  padding: 2px 6px;
  border-radius:4px;
}

/* =======================
   Pager (minimal dark capsule)
   ======================= */
#pager{
  display:flex;
  align-items:center;
  gap:.35rem;
  background:#1f1f1f;
  border:1px solid #2d2d2d;
  border-radius:8px;
  padding:.35rem .45rem;
  width:max-content;
  margin:.75rem 0 0 auto;   /* right-align on desktop */
  color:#eee;
  font-size:.95rem;
}

#pager .page-btn{
  -webkit-appearance:none; appearance:none;
  background:transparent; color:#eee;
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  padding:.25rem .5rem;
  line-height:1;
  cursor:pointer;
}
#pager .page-btn:hover { background: rgba(255,255,255,.08); }
#pager .page-btn:focus { outline:2px solid #00b300; outline-offset:2px; }
#pager .page-btn[disabled]{ opacity:.45; cursor:default; }

#pager .pager-info{
  min-width:2.6rem;
  text-align:center;
  font-weight:600;
  letter-spacing:.02em;
}
#pager .pager-info .total{ color:#ccc; }

/* =======================
   Breakpoints
   ======================= */
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 768px) {
  /* header logo fits bar height on mobile */
  header { height: 56px; }
  header .logo img{ height: 56px; }

  /* main column layout */
  .main-content {
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
  }

  .sidebar { width: 100%; margin: 0; }
  .sidebar .mobile-collapse { width: 100%; border-radius: 8px; }

  .filters {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
  .filters select { min-width: 180px; flex: 1 1 200px; }
  .filters label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }

  .grid { grid-template-columns: 1fr; }

  /* card polish on dark */
  .item-card { background: #1f1f1f; border-color: #333; }
  .item-info h4 { color: #e9e9e9; }
}

@media (max-width: 520px) {
  .feature-grid { grid-template-columns: 1fr; }
  #pager { margin:.75rem auto 0; } /* center pager on phones */
}
/* Categories — links that look like simple list items */
#catList { margin:.5rem 0 0; padding:0; list-style:none; }
#catList li { border-bottom:1px solid rgba(255,255,255,.08); }
#catList li:last-child { border-bottom:0; }

#catList .cat-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  padding:.45rem .5rem;
  color:#eee;
  text-decoration:none;
  border-radius:6px;
}
#catList .cat-link:hover{ background:rgba(255,255,255,.06); }
#catList .cat-link.is-active{
  color:#fff;
  font-weight:700;
  background:rgba(0,179,0,.14);
}
#catList .cat-count{
  margin-left:auto;
  font-size:.85rem;
  color:#ddd;
  padding:2px 6px;
  border-radius:4px;
}
/* === Category list (ul > li > a) ===================================== */
#catList            { margin:.5rem 0 0;  padding:0; list-style:none; }
#catList li         { border-bottom:1px solid rgba(255,255,255,.08); }
#catList li:last-child{ border:0; }

/* link behaves like plain text row */
#catList .cat-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  padding:.45rem .5rem;
  text-decoration:none;
  color:#eee;
  border-radius:6px;
  font: inherit;
}
#catList .cat-link:hover       { background:rgba(255,255,255,.06); }
#catList .cat-link.is-active   { color:#fff; font-weight:700;
                                 background:rgba(0,179,0,.14); }

/* count badge */
#catList .cat-count{
  margin-left:auto;
  font-size:.85rem;
  color:#ddd;
  padding:2px 6px;
  border-radius:4px;
}
/* === Category list (ul > li > a) ===================================== */
#catList            { margin:.5rem 0 0;  padding:0; list-style:none; }
#catList li         { border-bottom:1px solid rgba(255,255,255,.08); }
#catList li:last-child{ border:0; }

/* link = plain row */
#catList .cat-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  padding:.45rem .5rem;
  text-decoration:none;
  color:#eee;
  border-radius:6px;
  background:transparent !important;     /* <- ensure no global style leaks */
  font: inherit;
}
#catList .cat-link:hover     { background:rgba(255,255,255,.06); }
#catList .cat-link.is-active { color:#fff; font-weight:700;
                               background:rgba(0,179,0,.14); } /* only active is green */

/* count badge */
#catList .cat-count{
  margin-left:auto;
  font-size:.85rem;
  color:#ddd;
  padding:2px 6px;
  border-radius:4px;
}

/* kill visited purple */
#catList .cat-link:visited { color:#eee; }
/* Login dialog styling */
#loginDialog {
  border: 0;
  padding: 0;
  border-radius: 10px;
  max-width: 360px;
  width: 92vw;
}
#loginDialog::backdrop { background: rgba(0,0,0,.45); }

.login-form {
  background: #fff;
  color: #222;
  padding: 1rem 1rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.login-form h3 { margin: 0 0 .5rem; font-family: 'Rubik', sans-serif; }

.login-form label { display:block; font-size:.9rem; margin-top:.5rem; }
.login-form input {
  width: 100%;
  margin-top: .25rem;
  padding: .5rem .55rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

#loginError { color: #c40000; font-size: .85rem; margin:.5rem 0 0; }

.login-actions {
  display:flex; justify-content:flex-end; gap:.5rem; margin-top: .9rem;
}
.btn-primary {
  background:#00b300; color:#fff; border:0; border-radius:6px;
  padding:.5rem .9rem; cursor:pointer;
}
.btn-ghost {
  background:transparent; color:#222; border:1px solid #ccc; border-radius:6px;
  padding:.5rem .9rem; cursor:pointer;
}
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost:hover { background:#f3f3f3; }
/* ===== My Bids page ===== */
.mybids { padding: 2rem 16px; }
.mybids h1 {
  font-family: 'Rubik', sans-serif;
  margin: 0 0 1rem 0;
  color: #111;
}

.bids-wrap { margin-top: .5rem; }

.bids-table {
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.95rem;
}
.bids-table thead th {
  text-align: left;
  background: #f3f3f3;
  color: #222;
  font-weight: 600;
  padding: .75rem .9rem;
  border-bottom: 1px solid #ddd;
}
.bids-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.bids-table tr:last-child td { border-bottom: 0; }

.item-cell {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
}
.bids-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 4px;
  border: 1px solid #ddd; background: #fafafa;
}
.bids-title { font-weight: 600; }

.bids-table td.num { text-align: right; }
.bids-table td.muted { color: #666; }

/* status chips */
.status-pill {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}
.status-leading { background: #e6f7ec; color: #0b7a2a; }
.status-outbid  { background: #fdecea; color: #9f1d1d; }
.status-ended   { background: #e9ecef; color: #495057; }

/* mobile: stack cells a bit tighter */
@media (max-width: 560px) {
  .bids-table thead { display: none; }
  .bids-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; padding: .6rem .6rem; }
  .bids-table td { border: 0; padding: .2rem 0; }
  .bids-table td:nth-child(1) { grid-column: 1 / -1; }
  .bids-table td.num { text-align: left; }
  .bids-table td:last-child { justify-self: end; }
}
/* ===== My Bids page (compact, table-like) ===== */
.mybids { padding: 2rem 16px; }
.mybids h1 {
  font-family: 'Rubik', sans-serif;
  margin: 0 0 1rem 0;
  color: #111;
}

/* Table wrapper */
.bids-wrap { margin-top: .5rem; }

/* Table */
.bids-table {
  width: 100%;
  table-layout: fixed;           /* keep columns narrow and consistent */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.95rem;
}
.bids-table col.col-item   { width: auto;   }
.bids-table col.col-num    { width: 110px;  }
.bids-table col.col-status { width: 110px;  }
.bids-table col.col-ends   { width: 160px;  }

.bids-table thead th {
  text-align: left;
  background: #f3f3f3;
  color: #222;
  font-weight: 600;
  padding: .75rem .9rem;
  border-bottom: 1px solid #ddd;
}
.bids-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.bids-table tr:last-child td { border-bottom: 0; }

.bids-table td.num { text-align: right; color:#111; }
.bids-table td.muted { color: #666; }

/* Item cell: small square thumb + title */
.item-cell {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.bids-thumb {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fafafa;
  max-width: none;               /* override global max-width:100% */
}
.bids-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status chips */
.status-pill {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
}
.status-leading { background: #e6f7ec; color: #0b7a2a; }
.status-outbid  { background: #fdecea; color: #9f1d1d; }
.status-ended   { background: #e9ecef; color: #495057; }

/* Empty state reuse */
.grid-empty { color:#666; padding:2rem 0; text-align:center; }

/* Mobile: card-like stack */
@media (max-width: 560px) {
  .bids-table thead { display: none; }
  .bids-table { border: 0; background: transparent; }
  .bids-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .75rem;
    padding: .75rem .75rem;
    margin-bottom: .75rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
  }
  .bids-table td { border: 0; padding: .15rem 0; }
  .bids-table td:first-child { grid-column: 1 / -1; }
  .bids-table td.num { text-align: left; }
  .bids-table td:last-child { justify-self: end; }
}
/* ===== My Bids page (compact, table-like) ===== */
.mybids { padding: 2rem 16px; }
.mybids h1 {
  font-family: 'Rubik', sans-serif;
  margin: 0 0 1rem 0;
  color: #111;
}

/* Table wrapper */
.bids-wrap { margin-top: .5rem; }

/* Table */
.bids-table {
  width: 100%;
  table-layout: fixed;           /* keep columns narrow and consistent */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.95rem;
}
.bids-table col.col-item   { width: auto;   }
.bids-table col.col-num    { width: 110px;  }
.bids-table col.col-status { width: 110px;  }
.bids-table col.col-ends   { width: 160px;  }

.bids-table thead th {
  text-align: left;
  background: #f3f3f3;
  color: #222;
  font-weight: 600;
  padding: .75rem .9rem;
  border-bottom: 1px solid #ddd;
}
.bids-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.bids-table tr:last-child td { border-bottom: 0; }

.bids-table td.num { text-align: right; color:#111; }
.bids-table td.muted { color: #666; }

/* Item cell: small square thumb + title */
.item-cell {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.bids-thumb {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fafafa;
  max-width: none;               /* override global max-width:100% */
}
.bids-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status chips */
.status-pill {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
}
.status-leading { background: #e6f7ec; color: #0b7a2a; }
.status-outbid  { background: #fdecea; color: #9f1d1d; }
.status-ended   { background: #e9ecef; color: #495057; }

/* Empty state reuse */
.grid-empty { color:#666; padding:2rem 0; text-align:center; }

/* Mobile: card-like stack */
@media (max-width: 560px) {
  .bids-table thead { display: none; }
  .bids-table { border: 0; background: transparent; }
  .bids-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .75rem;
    padding: .75rem .75rem;
    margin-bottom: .75rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
  }
  .bids-table td { border: 0; padding: .15rem 0; }
  .bids-table td:first-child { grid-column: 1 / -1; }
  .bids-table td.num { text-align: left; }
  .bids-table td:last-child { justify-self: end; }
}
/* ===== My Bids — force thumbnail size on all viewports ===== */
.mybids .bids-thumb{
  width: 64px !important;
  height: 64px !important;
  max-width: none !important;     /* defeat any global img max-width */
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fafafa;
  flex: 0 0 64px;                 /* if it's inside a flex row, don't grow */
}

/* Title should wrap instead of stretching the row */
.mybids .bids-title{
  display: block;
  white-space: normal;            /* allow wrapping */
  max-width: 42ch;                /* avoid very long titles on mobile */
}

/* Mobile layout: keep the first cell tidy and aligned with the locked thumb */
@media (max-width: 560px){
  .mybids .bids-table thead{ display:none; }

  /* turn each row into a card */
  .mybids .bids-table{
    border: 0;
    background: transparent;
  }
  .mybids .bids-table tr{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .75rem;
    padding: .75rem .75rem;
    margin-bottom: .75rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
  }
  .mybids .bids-table td{ border:0; padding:.15rem 0; }

  /* first cell spans full width, but its inner link behaves like a row with a fixed thumb */
  .mybids .bids-table td:first-child{ grid-column: 1 / -1; }
  .mybids .item-cell{
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;                /* allow title to wrap instead of pushing layout */
  }

  /* slightly larger thumb on very small screens, still fixed */
  .mybids .bids-thumb{
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px;
  }

  /* align the last cell (Ends/status) to the right edge */
  .mybids .bids-table td:last-child{ justify-self: end; }
  .mybids .bids-table td.num{ text-align: left; }
}
/* My Bids — show cell labels on mobile and prevent clipping */
@media (max-width: 560px){
  /* turn each row into a card (you already have most of this) */
  .mybids .bids-table{ border:0; background:transparent; overflow:visible; }
  .mybids .bids-table tr{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:.35rem .75rem;
    padding:.75rem .75rem;
    margin-bottom:.75rem;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:8px;
  }
  .mybids .bids-table td{ border:0; padding:.15rem 0; }

  /* first cell spans full width; fixed-size thumb already enforced */
  .mybids .bids-table td:first-child{ grid-column:1 / -1; }
  .mybids .item-cell{ display:flex; align-items:center; gap:.75rem; min-width:0; }

  /* show a small label above each value, using the td's data-label */
  .mybids .bids-table td[data-label]::before{
    content: attr(data-label);
    display:block;
    font-size:.82rem;
    color:#666;
    margin-bottom:.12rem;
    letter-spacing:.01em;
  }

  /* numbers left-align on mobile; last cell sticks to the right edge */
  .mybids .bids-table td.num{ text-align:left; }
  .mybids .bids-table td:last-child{ justify-self:end; }

  /* keep the thumbnail compact on phones too */
  .mybids .bids-thumb{
    width:72px !important;
    height:72px !important;
    max-width:none !important;
    object-fit:cover;
    border-radius:6px;
    border:1px solid #ddd;
    background:#fafafa;
    flex:0 0 72px;
  }

  .mybids .bids-title{
    display:block;
    white-space:normal;
    max-width:42ch;
  }
}
/* ===== My Bids — expandable order details ===== */
.bid-row.is-open { background: #fafafa; }

.bid-details-row > td {
  padding: 0;               /* the inner panel owns its padding */
  border-top: 0;
}
.bid-details {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 0 0 8px 8px;
  margin: -1px 0 12px 0;    /* tuck under the row border */
  padding: 14px 16px;
}

/* two columns on desktop, stack on mobile */
.od-grid {
  display: grid;
  grid-template-columns: 2fr 1.4fr;
  gap: 18px;
}
.od-block h4 {
  margin: 8px 0 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  color: #111;
}

/* small info tables */
.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  margin: 0 0 12px 0;
}
.detail-table th,
.detail-table td {
  text-align: left;
  padding: 6px 0;
  vertical-align: top;
  border-bottom: 1px solid #f0f0f0;
}
.detail-table tr:last-child th,
.detail-table tr:last-child td { border-bottom: 0; }
.detail-table th { color: #555; font-weight: 600; width: 48%; }
.detail-table td.num { text-align: right; }
.detail-table.compact th { width: 44%; }
.detail-table tr.total th,
.detail-table tr.total td { font-weight: 700; }

/* shipping address block */
.ship-addr { font-style: normal; line-height: 1.5; }

/* item snippet inside details */
.od-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
}
.od-item img {
  width: 72px; height: 72px; object-fit: cover;
  border: 1px solid #ddd; border-radius: 6px;
  background: #fafafa;
}
.od-item-title { font-weight: 600; }
.od-item-meta  { color: #666; font-size: .9rem; }

/* mobile layout */
@media (max-width: 680px){
  .od-grid { grid-template-columns: 1fr; }
  .detail-table th { width: 46%; }
}
/* === My‑Bids details: compact pass =================================== */

/* shrink the details panel’s own paddings */
.bid-details           { padding: 12px 14px; }

/* headings: less air */
.od-block h4           { margin: 6px 0 6px; font-size: .98rem; }

/* info tables: tighter rows */
.detail-table th,
.detail-table td       { padding: 4px 0; font-size: .9rem; }

/* item snippet ─ thumb was overflowing; cap hard here */
.od-item img           {
  width: 96px;                /* <- was inheriting full‑width */
  height: 96px;
  object-fit: cover;
}

/* make sure long pictures can’t escape on very wide screens */
.bid-details-row > td  { overflow: hidden; }

/* ↓ OPTIONAL: if you feel the whole panel is still too tall on mobile,
   you can let the right‑hand column follow under the first */
@media (max-width: 540px){
  .od-grid            { grid-template-columns: 1fr !important; }
}
/* --- ORDER‐DETAILS POLISH ----------------------------------- */

/* A) “Item info” : put text next to the thumb and keep lines tight */
.od-item         { display:flex; gap:.65rem; align-items:flex-start; }
.od-item img     { flex:0 0 64px; width:64px; height:64px; border:1px solid #ddd;
                   border-radius:4px; object-fit:cover; }
.od-item .meta   { font-size:.9rem; line-height:1.35; }

/* B) Photo gallery (initially hidden) */
.photo-grid      { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
                   gap:8px; margin-top:6px; }
.photo-grid img  { width:100%; aspect-ratio:4/3; object-fit:cover;
                   border:1px solid #ccc; border-radius:4px; cursor:pointer; }

/* C) 100 % preview the user asks for */
.full-preview    { width:100%; margin-top:10px; border-radius:6px; }
/* thumbs under “Photos” */
.photo-grid{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.5rem 0 1rem;
}
.photo-thumb{
  width:72px;height:72px;
  object-fit:cover;
  border:1px solid #ccc;
  border-radius:4px;
  cursor:pointer;
}
.photo-thumb:hover{ outline:2px solid #0b7a2a; outline-offset:1px; }

/* big preview */
.full-preview{
  width:100%;
  max-width:100%;
  border:1px solid #ddd;
  border-radius:4px;
  margin-top:1rem;
}

/* Optional: on narrow phones stack blocks vertically */
@media (max-width:560px){
  .od-grid{ display:block; }
  .od-block{ margin-bottom:1.5rem; }
}
/* Photos strip + preview (inside details left column) */
.photos {}

.photo-strip{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:.25rem;
  margin:.35rem 0 .5rem;
}

.photo-thumb{
  flex:0 0 72px;            /* fixed size thumbs */
  width:72px;
  height:72px;
  object-fit:cover;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
}

.photo-view{
  width:100%;
}
.photo-view img{
  display:block;
  width:100%;               /* fill the column */
  max-width:100%;
  height:auto;
  max-height:70vh;          /* reasonable cap */
  border:1px solid #ddd;
  border-radius:4px;
  background:#fff;
}
/* === My Bids – details grid (left: order/delivery/photos, right: address/payment) === */
.od-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  align-items:start;
}
.od-block h4{
  margin: .75rem 0 .35rem;
  font-size: 1rem;
  font-weight: 700;
  color:#111;
}
.detail-table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border:1px solid #eee;
  border-radius:6px;
  overflow:hidden;
  margin: .25rem 0 .75rem;
}
.detail-table tr+tr td,
.detail-table tr+tr th{ border-top:1px solid #f0f0f0; }
.detail-table th{
  width:42%;
  padding:.45rem .6rem;
  text-align:left;
  color:#666;
  background:#fafafa;
  vertical-align:top;
  font-weight:600;
}
.detail-table td{
  padding:.45rem .6rem;
  vertical-align:top;
}
.detail-table.compact th,
.detail-table.compact td{ padding:.35rem .55rem; }
.detail-table .num{ text-align:right; }
.detail-table .total th{ font-weight:800; }
.detail-table .total td{ font-weight:800; }

/* === Photos: strip on top, preview below; all confined to the left column === */
.photos{}
.photo-strip{
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:.25rem;
  margin:.35rem 0 .5rem;
}
.photo-thumb{
  flex:0 0 72px;              /* fixed thumb size */
  width:72px; height:72px;
  object-fit:cover;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
}
.photo-view{ width:100%; }
.photo-view img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:420px;           /* cap so the right column stays visible */
  object-fit:contain;
  border:1px solid #ddd;
  border-radius:4px;
  background:#fff;
}

/* Mobile: stack left/right blocks */
@media (max-width: 720px){
  .od-grid{ grid-template-columns: 1fr; }
}
/* Footer body copy: small + darker gray (titles unchanged) */
footer .footer-cols p,
footer .footer-cols ul li {
  font-size: 0.82rem;     /* small but readable */
  color: #8a8f98;         /* darker gray on #1d1d1d */
  line-height: 1.5;
  margin: .35rem 0;
}

/* Subdue links inside the body copy too */
footer .footer-cols p a,
footer .footer-cols ul li a {
  color: #8a8f98;         /* match surrounding text */
  text-decoration: none;
}

footer .footer-cols p a:hover,
footer .footer-cols ul li a:hover {
  color: #cfd2d5;         /* gentle hover so it’s still discoverable */
}