.sf-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.sf-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(97, 74, 39, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      rgba(239, 230, 210, 0.98),
      rgba(221, 207, 176, 0.96)
    ),
    #e5d7ba;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.sf-product-card:hover {
  border-color: rgba(97, 74, 39, 0.38);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
  transform: translateY(-2px);
}

.sf-product-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.15 / 1;
  margin: 10px;
  border: 1px solid rgba(97, 74, 39, 0.22);
  border-radius: 4px;
  background: #d6c7aa;
}

.sf-product-image > img:not(.sf-sold-stamp) {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(0.9) contrast(1.04);
  object-fit: cover;
  transition: transform 220ms ease;
}

.sf-product-card:hover .sf-product-image > img:not(.sf-sold-stamp) {
  transform: scale(1.035);
}

.sf-status,
.sf-nation,
.sf-photo-status {
  position: absolute;
  border-radius: 999px;
  background: rgba(31, 36, 32, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 7px 10px;
  text-transform: uppercase;
  backdrop-filter: blur(18px);
}

.sf-status {
  left: 12px;
  top: 12px;
}

.sf-discount-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border-radius: 4px;
  background: rgba(189, 57, 48, 0.96);
  color: #fff9ec;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 8px 9px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.sf-status-sold {
  background: rgba(255, 255, 255, 0.86);
  color: rgba(24, 26, 28, 0.86);
}

.sf-status-available {
  background: rgba(86, 98, 75, 0.94);
}

.sf-status-reserved {
  background: rgba(128, 92, 45, 0.94);
}

.sf-status-auction-live {
  background: rgba(140, 45, 38, 0.94);
}

.sf-status-upcoming {
  background: rgba(86, 98, 75, 0.94);
}

.sf-nation {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 20px;
  border: 1px solid rgba(33, 27, 20, 0.16);
  border-radius: 4px;
  background: rgba(33, 27, 20, 0.72);
  color: #fff;
  padding: 0;
}

.sf-nation img {
  display: block;
  width: 24px;
  height: 20px;
  object-fit: cover;
}

.sf-nation b {
  display: inline-block;
  padding: 3px 4px;
  font-size: 11px;
}

.sf-product-body {
  flex: 1;
  display: grid;
  grid-template-rows: 24px 46px 38px 58px 18px;
  gap: 10px;
  padding: 4px 18px 18px;
}

.sf-product-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(33, 27, 20, 0.52);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.sf-product-title {
  display: -webkit-box;
  overflow: hidden;
  max-height: calc(1.2em * 2);
  color: #211b14;
  font-family: var(--sf-font);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sf-product-title:hover {
  color: #211b14;
  text-decoration: none;
}

.sf-product-subtitle {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(33, 27, 20, 0.64);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sf-product-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid rgba(97, 74, 39, 0.22);
  padding-top: 13px;
}

.sf-product-price {
  min-width: 0;
}

.sf-product-price span {
  display: block;
  color: rgba(33, 27, 20, 0.5);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.sf-product-price b {
  display: block;
  margin-top: 3px;
  color: #211b14;
  font-size: 20px;
  line-height: 1;
}

.sf-product-action {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(33, 27, 20, 0.92);
  color: #f7edd8;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.sf-product-action:hover {
  color: #fff9ec;
  text-decoration: none;
}

.sf-card-meta {
  overflow: hidden;
  color: rgba(115, 48, 31, 0.86);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sf-card-meta-live {
  color: #8c2d26;
}

.sf-main-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sf-line);
  border-radius: 6px;
  background: #ddd8cc;
  box-shadow: var(--sf-shadow);
}

.sf-main-photo img {
  display: block;
  width: 100%;
  max-height: 690px;
  object-fit: contain;
  background: #f8f7f2;
}

.sf-photo-status {
  left: 16px;
  top: 16px;
  background: var(--sf-red);
}

.sf-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.sf-thumb-button,
.sf-thumbs div {
  height: 62px;
  border: 1px solid var(--sf-line);
  border-radius: 4px;
  background: #fff;
}

.sf-thumb-button {
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.sf-thumb-button.active {
  border-color: var(--sf-red);
  box-shadow: 0 0 0 2px rgba(109, 31, 26, 0.18);
}

.sf-thumb-button:focus-visible {
  outline: 2px solid var(--sf-red);
  outline-offset: 2px;
}

.sf-thumb-button img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sf-thumbs div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: var(--sf-muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

/* ============================================================================
 * VINTAGE CATALOGUE CARD + ARCHIVE SHELL
 * Hand-written CSS (chosen over a purge-prone Tailwind build) that reproduces
 * the React LotCard.tsx 1:1 — triple-inset sepia frame, sepia plate, brass
 * "Buy" button — plus the shop/category page shell and pagination.
 * ==========================================================================*/

/* --- Archive grid: grid-cols-2 / sm:3 / lg:4, gap-4 ---------------------- */
.sf-lot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .sf-lot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sf-lot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-lot-grid > li.sf-lot { list-style: none; margin: 0; }

/* --- The card: dark, blends with the page background (reference style) --- */
.sf-lot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  background: #242b2e;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sf-lot-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.55);
}

/* --- Plate (photo): white so product shots sit on their native background,
   image fully fitted — NEVER cropped (recommendations doc, image 13 vs 14) --- */
.sf-lot-plate {
  position: relative;
  background: #fff;
}
.sf-lot-photo {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4; /* близко к медианным ~1.2 фото — полосы минимальны */
  overflow: hidden;
  background: #fff;
}
/* Blurred copy of the same shot under the contain photo — fills the bars */
.sf-lot-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(18px) brightness(1.04);
}
.sf-lot-photo-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 300ms ease;
}
.sf-lot-card:hover .sf-lot-photo-img {
  transform: scale(1.02);
}

/* --- Big diagonal red SOLD banner across the photo ----------------------- */
.sf-lot-sold-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  transform: translate(-50%, -50%) rotate(-12deg);
  border: 4px solid #d0021b;
  border-radius: 2px;
  padding: 2px 26px;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d0021b;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
/* Spoiler: blur + zoom the photo, grain veil laid over (grain in base.css) */
.sf-lot-photo--spoiler .sf-lot-photo-img {
  transform: scale(1.1);
  filter: blur(24px) sepia(0.28);
}
.sf-lot-spoiler-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sf-lot-spoiler-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sf-lot-spoiler-badge span {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
}

/* --- Nation emblem chip, top-left --------------------------------------- */
.sf-lot-emblem-chip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #8a7343;
  border-radius: 2px;
  background: rgba(221, 208, 180, 0.92);
  padding: 4px 8px;
  box-shadow: 0 1px 0 rgba(58, 49, 32, 0.15);
  pointer-events: none;
}
.sf-lot-emblem-chip img { display: block; height: 14px; width: auto; }
.sf-lot-emblem-label {
  font-family: var(--sf-font);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #3a3120;
}
/* A nation without a flag asset shows a label-only chip — keep its text
   visible everywhere (mobile hides the label for flag-bearing chips). */
.sf-lot-emblem-chip.is-flagless .sf-lot-emblem-label { display: inline-block !important; }

/* --- Discount stamp, top-right ------------------------------------------ */
.sf-lot-discount {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 10;
  border-radius: 2px;
  background: rgba(178, 0, 0, 0.92);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  pointer-events: none;
}

/* --- Card body: title / product number / price / red button -------------- */
.sf-lot-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  color: #ece7dd;
}
.sf-lot-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #ece7dd;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  transition: color 200ms ease;
}
.sf-lot-title:hover { color: #fff; text-decoration: underline; }
.sf-lot-no {
  margin: 0;
  font-size: 13px;
  color: rgba(236, 231, 221, 0.75);
}
.sf-lot-no b { color: #ece7dd; }

/* --- Price + red Learn more button --------------------------------------- */
.sf-lot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 10px;
}
.sf-lot-price-value {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}
.sf-lot-price-value .amount,
.sf-lot-price-amount { color: inherit; }
.sf-lot-price-poa { font-size: 13px; font-style: italic; font-weight: 600; }
.sf-lot-buy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 2px;
  background: #b20000;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-decoration: none;
  transition: background 200ms ease;
}
.sf-lot-buy:hover {
  background: #d21212;
  color: #fff;
  text-decoration: none;
}

/* --- Archive / shop page shell ------------------------------------------ */
.sf-shop-head {
  max-width: var(--sf-container, min(1180px, calc(100% - 32px)));
  margin: 24px auto 20px;
}
.sf-shop-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
}
.sf-shop-crumbs a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.sf-shop-crumbs a:hover { color: #fff; }
.sf-crumb-sep { opacity: 0.6; }
.sf-crumb-current { color: #fff; }
.sf-shop-title {
  margin: 10px 0 6px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}
.sf-shop-meta {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.8);
}
.sf-shop-desc { margin-top: 10px; color: rgba(255, 255, 255, 0.75); font-size: 14px; }

.sf-lot-grid { max-width: var(--sf-container, min(1180px, calc(100% - 32px))); margin-inline: auto; }

/* --- Pagination --------------------------------------------------------- */
.sf-pagination,
.woocommerce-pagination.sf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: var(--sf-container, min(1180px, calc(100% - 32px)));
  margin: 28px auto 40px;
}
.sf-page-btn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background: #b20000;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f5ecd6;
  text-decoration: none;
}
.sf-page-btn:hover { color: #fff; background: #d21212; text-decoration: none; }
.sf-page-disabled { opacity: 0.4; pointer-events: none; }
.sf-page-status,
.sf-result-count {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Full-width catalog + grid override (beats Storefront floats) --- */
.sf-fullwidth #primary, .sf-fullwidth .content-area { width: 100% !important; float: none !important; margin: 0 !important; }
.sf-fullwidth #secondary, .sf-fullwidth .widget-area { display: none !important; }
.woocommerce ul.products.sf-lot-grid,
ul.products.sf-lot-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { ul.products.sf-lot-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { ul.products.sf-lot-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.woocommerce ul.products.sf-lot-grid li.product,
ul.products.sf-lot-grid li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* Force column counts over Storefront's own product grid */
.woocommerce ul.products.sf-lot-grid, ul.products.sf-lot-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; display:grid !important; }
@media (min-width:640px){ .woocommerce ul.products.sf-lot-grid, ul.products.sf-lot-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (min-width:1024px){ .woocommerce ul.products.sf-lot-grid, ul.products.sf-lot-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }

/* keep the price on one line */
.sf-lot-price-value { white-space: nowrap; }

/* === FIX: apply the lot grid to ALL product lists (home 'Recently added' uses
   ul.products.columns-4, not sf-lot-grid → was stacking full-width) === */
.woocommerce ul.products, ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
@media (min-width:640px){ .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (min-width:1024px){ .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } }
.woocommerce ul.products li.product, ul.products li.product {
  width:100% !important; float:none !important; margin:0 !important; clear:none !important; max-width:none !important;
}

/* === FIX: price single line (no wrap between $ and amount) === */
.sf-lot-price-value, .sf-lot-price-value .amount, .sf-lot-price-amount, .woocommerce-Price-amount { white-space: nowrap !important; }
.woocommerce-Price-currencySymbol { display: inline !important; margin-right: 1px; }

/* === FIX: Storefront forces `.woocommerce li.product img { margin:0 auto 1.5em }`
   which centered the tiny nation emblem in the meta line and pushed No. down.
   Kill that margin on the card's inline emblems/flags. === */
.sf-lot .sf-lot-line-emblem,
.sf-lot-line-emblem,
.sf-lot-emblem-chip img,
.sf-lot-line-nation + .sf-lot-no { margin: 0 !important; }
.sf-lot-line-emblem { height: 14px !important; width: auto !important; }

/* === FIX: kill the DUPLICATE pagination + sort clutter that rendered ABOVE the
   grid (Storefront's before-loop .storefront-sorting), and tighten the gap. === */
.storefront-sorting:has(+ ul.products) .sf-pagination,
.storefront-sorting:has(+ ul.products) .sf-result-count { display: none !important; }
.storefront-sorting:has(+ ul.products) { margin: 0 0 10px !important; padding: 0 !important; min-height: 0 !important; }
.storefront-sorting:has(+ ul.products) .woocommerce-ordering { margin: 0 !important; }
ul.products.sf-lot-grid { margin-top: 6px !important; }
/* the top sort dropdown: dark, not a white box */
.woocommerce-ordering select { background:#242b2d !important; color:#ece7dd !important; border:1px solid #3a4244 !important; border-radius:6px; padding:6px 10px; }

/* === ROOT-CAUSE FIX: Storefront/Woo add clearfix pseudo-elements
   `ul.products::before/::after { content:""; display:table }` for the old float
   layout. In our CSS-GRID they become GRID ITEMS occupying the 1st + last cells,
   shoving the first product into column 2 (empty gap on the left). Kill them. === */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products.sf-lot-grid::before, ul.products.sf-lot-grid::after,
ul.products::before, ul.products::after { content: none !important; display: none !important; }

/* === FIX: catalog grid + sorting + pagination were full-bleed at x=0 while the
   header/filters were centered in a 1180 container → whole catalog looked
   misaligned/shifted. Center them to the SAME container. === */
.woocommerce ul.products.sf-lot-grid,
ul.products.sf-lot-grid,
.storefront-sorting,
.woocommerce-pagination,
nav.sf-pagination,
.woocommerce-no-products-found {
  max-width: min(1180px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.storefront-sorting { display: flex !important; align-items: center; gap: 14px; }